save(key) { Object.assign(this.dataSource.filter((item) => key === item.key)[0], this.editableData[key]) this.$set(this.editableData, key, null) // console.log(this.dataSource); },实现保存全部
时间: 2024-03-06 19:51:27 浏览: 52
如果你想实现保存全部的功能,可以考虑遍历 `this.editableData` 对象,将其中的每个 key 和 value 都更新到 `this.dataSource` 数组中对应的对象中。代码示例:
```
saveAll() {
for (let key in this.editableData) {
const item = this.dataSource.filter((item) => key === item.key)[0];
Object.assign(item, this.editableData[key]);
this.$set(this.editableData, key, null);
}
}
```
这个方法会遍历 `this.editableData` 对象中的每个键值对,找到对应的 `this.dataSource` 数组中的对象,并将其更新为 `this.editableData[key]` 对应的值。最后需要将 `this.editableData` 对象中的每个 key 对应的 value 都设置为 `null`,以清空编辑状态。
相关问题
saveAll() { for (let key in this.editableData) { const item = this.dataSource.filter((item) => key === item.key)[0]; Object.assign(item, this.editableData[key]); this.$set(this.editableData, key, null); }}这个代码报错这个
如果这段代码报错,很可能是因为 `this.dataSource` 数组中没有包含 `key` 对应的对象,导致 `filter` 方法返回一个空数组,进而访问了一个不存在的元素。
你可以在使用 `filter` 方法之前,先检查一下数组中是否包含了 `key` 对应的对象。如果数组中不存在该对象,可以考虑抛出一个错误或者进行其他的处理。
代码示例:
```
saveAll() {
for (let key in this.editableData) {
const item = this.dataSource.filter((item) => key === item.key)[0];
if (!item) {
throw new Error(`Object with key ${key} not found in this.dataSource`);
}
Object.assign(item, this.editableData[key]);
this.$set(this.editableData, key, null);
}
}
```
这段代码在访问数组前,先使用 `if (!item)` 检查了数组中是否包含了 `key` 对应的对象。如果不存在,将会抛出一个错误,以提示开发者进行修复。你也可以在这里进行其他的处理,例如添加一个新的对象,或者忽略这个错误。
<template> <div> <a-table :pagination="false" :columns="columns" :dataSource="dataSource"> //循环展示数据或input输入框 <template v-for="col in ['abbreviation', 'fullName', 'nodes']" :slot="col" slot-scope="text, record, index" > <div :key="col"> <a-input v-if="editableData[record.key]" v-model="editableData[record.key][col]" /> <template v-else>{{ text }}</template> </div> </template> //操作 <template slot="operation" slot-scope="text, record, index"> <span v-if="editableData[record.key]"> <a-icon type="check" @click="save(record.key)" /> </span> <span v-else> <a-icon type="delete" @click="deleteItem(record.key)" /> <a-icon type="edit" @click="edit(record.key)" /> <a-icon type="plus" v-if="index==dataSource.length-1" @click="addItem(record.key)" /> </span> </template> </a-table> </div> </template> <script> import { cloneDeep } from "lodash"; export default { data() { return { editableData: [], //正在编辑的数组 columns: [ { title: "简称", dataIndex: "abbreviation", scopedSlots: { customRender: "abbreviation" } }, { title: "全称", dataIndex: "fullName", scopedSlots: { customRender: "fullName" } }, { title: "来源", dataIndex: "nodes", scopedSlots: { customRender: "nodes" } }, { title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" } } ], //表格数据 dataSource: [ { key: 0, abbreviation: "简称1", fullName: "全称1", nodes: "来源1" }, { key: 1, abbreviation: "简称2", fullName: "全称2", nodes: "来源2" }, { key: 2, abbreviation: "简称3", fullName: "全称3", nodes: "来源3" }, { key: 3, abbreviation: "简称14", fullName: "全称14", nodes: "来源14" } ] }; }, components: {}, props: ["tableDatas"], watch: {}, updated() {}, created() {}, methods: { addItem(key) { let item = { key: key + 1, abbreviation: "", fullName: "", nodes: "" }; this.dataSource.splice(key + 1, 0, item); this.$set(this.editableData, key + 1, item); }, deleteItem(key) { this.dataSource = this.dataSource.filter(item => item.key !== key); }, edit(key) { let editItem = cloneDeep( this.dataSource.filter(item => key === item.key)[0] ); this.$set(this.editableData, key, editItem); }, save(key) { Object.assign( this.dataSource.filter(item => key === item.key)[0], this.editableData[key] ); this.$set(this.editableData, key, null); } } }; </script>怎么实现编辑全部
要实现编辑全部,你需要对每一行数据都进行编辑。可以通过在方法 `edit` 中使用循环,将 `editableData` 数组中的每一项都设置为当前行的深拷贝,实现全部编辑的效果。
具体实现代码如下:
```
editAll() {
this.dataSource.forEach(item => {
let editItem = cloneDeep(item);
this.$set(this.editableData, item.key, editItem);
});
}
```
然后在模板中添加一个编辑全部的按钮,点击按钮时调用 `editAll` 方法即可。
```
<a-button @click="editAll">编辑全部</a-button>
```
阅读全文