在 Vuejs 和 Bootstrap Vue 中编辑行

Question

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

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

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

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>

    

Answer 1

如果您有唯一标识符（如 id）并且只想允许一次编辑一行，则可以将edit变量设置为id当前正在编辑的行的 。您还可以使用通用槽v-slot:cell()来减少编写的模板数量。例子new Vue({&nbsp; el: "#app",&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; edit: null,&nbsp; &nbsp; &nbsp; employees: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; employeeName: "Jane",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; joinDate: "11-11-1111",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedDepartment: "IT",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jobDescription: "Nerd"&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; employeeName: "Peter",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; joinDate: "12-12-1212",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedDepartment: "Accounting",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jobDescription: "Moneier"&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; fields: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: 'employeeName',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Employee Name',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sortable: true&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: 'joinDate',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Join Date',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sortable: true&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: 'selectedDepartment',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Selected Department',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sortable: true&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: 'jobDescription',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Job Description',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sortable: true&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: 'actions',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Actions'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; },&nbsp; computed: {&nbsp; &nbsp; rows() {&nbsp; &nbsp; &nbsp; return this.employees.length&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; onEdit(id) {&nbsp; &nbsp; &nbsp; this.edit = this.edit !== id ? id : null;&nbsp; &nbsp; }&nbsp; }})<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" /><script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script><div id="app">&nbsp; <b-table striped hover :items="employees" :fields="fields">&nbsp; &nbsp; <template v-slot:cell()="{ value, item, field: { key }}">&nbsp; &nbsp; &nbsp; <template v-if="edit != item.id">{{ value }}</template>&nbsp; &nbsp; <b-form-input v-else v-model="item[key]" />&nbsp; &nbsp; </template>&nbsp; &nbsp; <template v-slot:cell(actions)="{ item: { id }}">&nbsp; &nbsp; &nbsp; &nbsp; <b-dropdown variant="primary" text="Actions">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b-dropdown-item @click="onEdit(id)">{{ edit === id ? 'Save' : 'Edit' }}</b-dropdown-item>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b-dropdown-divider></b-dropdown-divider>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b-dropdown-item @click="onDelete(id)">Delete</b-dropdown-item>&nbsp; &nbsp; &nbsp; &nbsp; </b-dropdown>&nbsp; &nbsp; &nbsp; </template>&nbsp; </b-table></div>如果您没有每行的唯一标识符，或者希望能够一次编辑多行，您可以向您的项目添加一个标志（在示例中），这将切换isEditing当前是否正在编辑该行或不。实施例2new Vue({&nbsp; el: "#app",&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; employees: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; employeeName: "Jane",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; joinDate: "11-11-1111",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedDepartment: "IT",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jobDescription: "Nerd"&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; employeeName: "Peter",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; joinDate: "12-12-1212",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedDepartment: "Accounting",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jobDescription: "Moneier"&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; fields: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: 'employeeName',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Employee Name',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sortable: true&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: 'joinDate',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Join Date',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sortable: true&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: 'selectedDepartment',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Selected Department',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sortable: true&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: 'jobDescription',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Job Description',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sortable: true&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: 'actions',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Actions'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; },&nbsp; computed: {&nbsp; &nbsp; rows() {&nbsp; &nbsp; &nbsp; return this.employees.length&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; onEdit(item) {&nbsp; &nbsp; &nbsp; if (item.isEditing)&nbsp; &nbsp; &nbsp; &nbsp; item.isEditing = false;&nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; this.$set(item, 'isEditing', true)&nbsp; &nbsp; }&nbsp; }})<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" /><script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script><div id="app">&nbsp; <b-table striped hover :items="employees" :fields="fields">&nbsp; &nbsp; <template v-slot:cell()="{ value, item, field: { key }}">&nbsp; &nbsp; &nbsp; <template v-if="!item.isEditing">{{ value }}</template>&nbsp; &nbsp; <b-form-input v-else v-model="item[key]" />&nbsp; &nbsp; </template>&nbsp; &nbsp; <template v-slot:cell(actions)="{ item }">&nbsp; &nbsp; &nbsp; &nbsp; <b-dropdown variant="primary" text="Actions">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b-dropdown-item @click="onEdit(item)">{{ item.isEditing ? 'Save' : 'Edit' }}</b-dropdown-item>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b-dropdown-divider></b-dropdown-divider>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b-dropdown-item>Delete</b-dropdown-item>&nbsp; &nbsp; &nbsp; &nbsp; </b-dropdown>&nbsp; &nbsp; &nbsp; </template>&nbsp; </b-table></div>