最近做了一个需求, 就是 element 的 el-table, 分页和多选都是element组件的功能, ，但是如果要实现，当前页面勾选了数据之后，切换页码的时候，当前勾选的数据要保留，切换回来要回显，element自带的组件是没有这个功能的，自己实现这个功能, 我想过用本地保存的方式去做, 那就需要保存一个当前页码和当前页码用户勾选的数据, 那这样岂不是很复杂? 没必要, 复杂的代码反而会产生更多的bug.
实现思路:
- 在 el-table 中定义一个 select 事件, 该事件当用户手动勾选数据行的 Checkbox 时触发的事件, 我需要拿到用户勾选这一行的数据 row , 在定义一个 selectTuiId 对象, 当用户勾选时进行判断,该对象是否包含该数据, 如果包含说明用户是第二次点击该行数据, 则为取消勾选,就从对象中删除该行数据, 如果没有, 反之则反.
onSelect(selection, row) {
if (this.selectTuiId[row.labelId]) {
delete this.selectTuiId[row.labelId];
} else {
this.selectTuiId[row.labelId] = row;
}
},
- 定义一个 checkRows 方法, 用object.keys把selectTuiId这个对象的key取出来生成一个数组 keys , 在用后台返回的数据数组进行过滤, 看看每一条数据中的 id 是否在keys中存在, 存在则返回该对应的对象, 生成数组对象 rows. 再去遍历rows这个数组对象 ,调用 toggleRowSelection 方法进行选中.
checkRows() {
var that = this;
const keys = Object.keys(this.selectTuiId);
const rows = this.productList.filter((row) => {
return keys.includes(String(row.labelId));
});
rows.forEach((row) => {
that.$nextTick(function () {
that.$refs.multipleTable.toggleRowSelection(row, true);
});
});
},
这里this.$nextTick可以理解为当数据更新了,在dom中渲染后, 自动执行该函数.
