表格再编辑状态,需要获取到哪一行数据被修改了,面对这样一个场景,我们可以结合element的row-click事件以及动态的监听$watch来实现。
tableList,代表表格的数据, rowIds代表需要记录的id数组的集合, isUpdateTableList为true代表表格进入编辑状态了
import { cloneDeep } from ‘lodash-es’; //cloneDeep是进行深拷贝的插件
/** 编辑状态下,监听行数据是否变化 */
rowClick(row, column, event) {
// 编辑状态下对修改过得行数据的id进行保存
if (this.isUpdateTableList) {
const rowPre = cloneDeep(row);
this.$watch(
() => {
return row;
},
{
handler(newVal, oldVal) {
let that = this;
// console.log(newVal, oldVal, cloneDeep(newVal) == cloneDeep(oldVal))
if (newVal !== rowPre) { // 如果行数据发生变化,则记录其id
that.rowIds.push(row.id);
that.rowIds = [...new Set(that.rowIds)];
console.log(that.rowIds);
}
},
deep: true,
},
);
}
},
上面的方法只是获取到了具体修改过行的id,如果需要得到修改过的行的具体数据,可以过滤
/** 筛选编辑过的行数据公共方法 */
filterUpdateRow() {
return this.tableList.filter((item, index) => {
//函数本身返回布尔值,只有当返回值为true时,当前项存入新数组。
return this.rowIds.indexOf(item.id)>-1
})
},