#javascript #vuejs2 #bootstrap-vue
#javascript #vuejs2 #bootstrap-vue
Вопрос:
Я пытаюсь реализовать таблицу, которая позволяет пользователям редактировать строку, переключаясь с помощью кнопки редактирования.
Мне удалось реализовать функцию переключения, но я столкнулся с проблемой, когда она переключает все строки вместо одной строки.
Я считаю, что мне нужно выбрать строку по индексу, и с моей реализацией я могу это сделать, но, похоже, я не могу найти для этого никакого применения.
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,
perPage: 3,
currentPage: 1,
fields: [
{
key: 'employeeName',
label: 'Employee Name',
sortable: true
},
{
key: 'joinDate',
label: 'Join Date',
sortable: true
},
{
key: 'selectedDepartment',
label: 'Selected Department',
sortable: true,
},
{
key: 'jobDescription',
label: 'Job Description',
sortable: true,
},
{
key: 'actions',
label: 'Actions',
sortable: false,
}
]
}
},
computed: {
rows() {
return this.employees.length
}
},
methods: {
toggleEdit(index){
this.edit = !this.edit
}
}
})
Редактировать:
Вот JSFiddle, показывающий проблему
Ответ №1:
Если у вас есть уникальный идентификатор (например, id) и вы хотите разрешить редактирование только одной строки за раз, вы можете установить для своей edit переменной id значение редактируемой в данный момент строки.
Вы также можете использовать общий слот v-slot:cell() , чтобы уменьшить количество шаблонов, которые вы пишете.
Пример
new Vue({
el: "#app",
data() {
return {
edit: null,
employees: [{
id: 0,
employeeName: "Jane",
joinDate: "11-11-1111",
selectedDepartment: "IT",
jobDescription: "Nerd"
},
{
id: 1,
employeeName: "Peter",
joinDate: "12-12-1212",
selectedDepartment: "Accounting",
jobDescription: "Moneier"
}
],
fields: [{
key: 'employeeName',
label: 'Employee Name',
sortable: true
},
{
key: 'joinDate',
label: 'Join Date',
sortable: true
},
{
key: 'selectedDepartment',
label: 'Selected Department',
sortable: true
},
{
key: 'jobDescription',
label: 'Job Description',
sortable: true
},
{
key: 'actions',
label: 'Actions'
}
]
}
},
computed: {
rows() {
return this.employees.length
}
},
methods: {
onEdit(id) {
this.edit = this.edit !== id ? id : null;
}
}
}) <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">
<b-table striped hover :items="employees" :fields="fields">
<template v-slot:cell()="{ value, item, field: { key }}">
<template v-if="edit != item.id">{{ value }}</template>
<b-form-input v-else v-model="item[key]" />
</template>
<template v-slot:cell(actions)="{ item: { id }}">
<b-dropdown variant="primary" text="Actions">
<b-dropdown-item @click="onEdit(id)">{{ edit === id ? 'Save' : 'Edit' }}</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item @click="onDelete(id)">Delete</b-dropdown-item>
</b-dropdown>
</template>
</b-table>
</div> Если у вас нет уникального идентификатора для каждой строки или вы хотите иметь возможность редактировать несколько строк одновременно, вы можете добавить флаг к своему элементу ( isEditing в примере), который будет указывать, редактируется строка в данный момент или нет.
Пример 2
new Vue({
el: "#app",
data() {
return {
employees: [{
id: 0,
employeeName: "Jane",
joinDate: "11-11-1111",
selectedDepartment: "IT",
jobDescription: "Nerd"
},
{
id: 1,
employeeName: "Peter",
joinDate: "12-12-1212",
selectedDepartment: "Accounting",
jobDescription: "Moneier"
}
],
fields: [{
key: 'employeeName',
label: 'Employee Name',
sortable: true
},
{
key: 'joinDate',
label: 'Join Date',
sortable: true
},
{
key: 'selectedDepartment',
label: 'Selected Department',
sortable: true
},
{
key: 'jobDescription',
label: 'Job Description',
sortable: true
},
{
key: 'actions',
label: 'Actions'
}
]
}
},
computed: {
rows() {
return this.employees.length
}
},
methods: {
onEdit(item) {
if (item.isEditing)
item.isEditing = false;
else
this.$set(item, 'isEditing', true)
}
}
}) <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">
<b-table striped hover :items="employees" :fields="fields">
<template v-slot:cell()="{ value, item, field: { key }}">
<template v-if="!item.isEditing">{{ value }}</template>
<b-form-input v-else v-model="item[key]" />
</template>
<template v-slot:cell(actions)="{ item }">
<b-dropdown variant="primary" text="Actions">
<b-dropdown-item @click="onEdit(item)">{{ item.isEditing ? 'Save' : 'Edit' }}</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>Delete</b-dropdown-item>
</b-dropdown>
</template>
</b-table>
</div> Комментарии:
1. Отлично! Спасибо!