实现批量编辑的步骤如下：
1. 在表格中添加一个列，用来显示
复选框。
2. 在
数据源中为每一行添加一个属性，表示该行是否被
选中。
3. 在表头中添加一个
复选框，用来全
选或取消全
选。
4. 在
复选框的
change事件中，修改
数据源中所有行的
选中状态。
5. 在编辑按钮的click事件中，遍历
数据源中所有
选中的行，将它们的edit
able属性设置为true，使它们变为可编辑状态。
6. 在表格中添加一个template列，用来显示编辑按钮和保存按钮。
7. 在template列中根据每行的edit
able属性显示编辑按钮或保存按钮。
8. 在编辑按钮或保存按钮的click事件中，将该行的edit
able属性设置为false，使它变为
不可编辑状态。
9. 在保存按钮的click事件中，将该行的
数据保存到后台，或者更新
数据源中的该行
数据。
下面是一个示例代码：
```html
<el-t
able :data="t
ableData" style="width: 100%">
<el-t
able-column type="
selection" width="55"></el-t
able-column>
<el-t
able-column prop="name" label="姓名"></el-t
able-column>
<el-t
able-column prop="age" label="年龄"></el-t
able-column>
<el-t
able-column prop="address" label="地址"></el-t
able-column>
<el-t
able-column label="操作">
<template slot-scope="scope">
<div v-if="!scope.row.edit
able">
<el-button @click="editRow(scope.row)">编辑</el-button>
</div>
<div v-else>
<el-button @click="saveRow(scope.row)">保存</el-button>
</div>
</template>
</el-t
able-column>
</el-t
able>
<el-button @click="batchEdit">批量编辑</el-button>
```
```js
export default {
data() {
return {
t
ableData: [
{ name: '张三', age: 20, address: '北京', edit
able: false },
{ name: '李四', age: 25, address: '上海', edit
able: false },
{ name: '王五', age: 30, address: '广州', edit
able: false },
],
allChecked: false,
};
},
methods: {
batchEdit() {
this.t
ableData.forEach((item) => {
item.checked = this.allChecked;
if (item.checked) {
item.edit
able = true;
}
});
},
editRow(row) {
row.edit
able = true;
},
saveRow(row) {
row.edit
able = false;
},
},
computed: {
checkedRows() {
return this.t
ableData.filter((item) => item.checked);
},
},
watch: {
checkedRows(val) {
if (val.length === this.t
ableData.length) {
this.allChecked = true;
} else {
this.allChecked = false;
}
},
},
};
```
2834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
