小编Nas*_*r X的帖子

我正在尝试实现一个表，允许用户通过使用“编辑”按钮切换来编辑行。

我能够实现切换功能，但我遇到了一个问题，它切换所有行而不是单行。

我相信我必须按索引选择行，并且通过我的实现我能够这样做，但似乎我无法找到它的任何用途。

Vue.component('employee-data', {
    template:
        /*html*/
        `
        <b-container>
            <h3>Employee Data</h3>
            
            <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" 
                            aria-controls="employee-table"></b-pagination>
            <b-table striped hover :items="employees" id="employee-table"
                    :per-page="perPage" :current-page="currentPage" :fields="fields">

                <template v-slot:cell(employeeName)="row" v-if="edit">
                    <b-form-input v-model="row.item.employeeName"/>
                </template>

                <template v-slot:cell(joinDate)="row" v-if="edit">
                    <b-form-input v-model="row.item.joinDate"/>
                </template>

                <template v-slot:cell(selectedDepartment)="row" v-if="edit">
                    <b-form-input v-model="row.item.selectedDepartment"/>
                </template>
                
                <template v-slot:cell(jobDescription)="row" v-if="edit">
                    <b-form-input v-model="row.item.jobDescription"/>
                </template>

                <template v-slot:cell(actions)="row">
                    <b-button @click="toggleEdit(row.index)">
                        {{ edit ? 'Save' : 'Edit' }}
                    </b-button>
                </template>

            </b-table>
        </b-container>
    `,
    props: {
        employees: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            edit: false, …