思路:
1、点击选中项保存在一个对象或者数组中(这里保存在一个对象里)this.selectObj
2、el-table添加两个事件单选和多选(此组件是调用项目已经封装的tableview,不过性质一样啦),再添加一个ref="table"
@select-row="handleselectRow" @select-all="handleselectAll"
//行选中函数 若有删除,若无添加 handleselectRow(selection, row) { if (this.selectObj[row.id]) { delete this.selectObj[row.id] } else { this.selectObj[row.id] = row.id } },
//全选函数 点击全选遍历当页数据若无添加,若是反选则删除(判断是否是全选还是反选) handleselectAll(selection) { this.columnData.forEach((row, index) => { if (this.selectObj.hasOwnProperty(row.id)) { selection.length ? null : delete this.selectObj[row.id] } else { this.selectObj[row.id] = row.id } }); },
//记忆选中函数:每次请求数据遍历当页数据,显示已经被选中的数据 memoryChecked() { this.columnData.forEach((row, index) => { if (this.selectObj.hasOwnProperty(row.id)) { this.$refs.table.$refs.eltable.toggleRowSelection(row, true); //(由于是调用的封装组件所以这样写,一般情况下 this.$refs.table.toggleRowSelection(row, true);) } else { this.$refs.table.$refs.eltable.toggleRowSelection(row, false); } }); },
//列表数据请求函数中调用选中当页数据方法(成功回调里)
//this.$nextTick详见https://www.jianshu.com/p/a7550c0e164f
this.$nextTick(function () { this.memoryChecked(); })