解决elementui分页时，el-table选择框不显示问题
el-table分页时选择框不显示问题，例如：第一页选择了数据，点击分页到第二页，然后再返回第一页时，第一页选择的数据丢失了，想破了脑袋相处了下面的方法，求大神求教
核心方法：
// 表格单选事件
selectRole(selection, row) {
// 因为翻页点选后selection会出现为undefined的元素，需要进行是否存在判断
if (selection && selection.find(item => item && item.permissionId === row.permissionId)) {
// 选中新增一行
this.addRows([row]);
} else {
// 取消删除一行
this.removeRows([row]);
}
},
// 表格全选事件
selectRoleAll(selection) {
// 如果有则是全选否则就是全取消
if (selection.length > 0) {
this.addRows(this.tableList);
} else {
this.removeRows(this.tableList);
}
},
// 添加选中行
addRows(rows) {
for (const item of rows) {
// 如果选中的数据中没有这条就添加进去
if (!this.selectedRow.find(i => i.id === item.id)) {
this.selectedRow.push(item);
}
}
},
// 取消选中行
removeRows(rows) {
if (this.selectedRow && this.selectedRow.length) {
for (const item of rows) {
this.selectedRow = this.selectedRow.filter(i => i.id !== item.id);
}
}
},
// 前端实现分页 以及翻页记忆勾选
setPagination(no, size, data) {
// this.tableList = data;
this.toggleSelection(this.selectedRow);
},
// 选中table已有数据
toggleSelection(rows) {
if (rows && rows.length) {
rows.forEach(row => {
this.$nextTick(() => {
const checked = this.tableList.find(tableRow => tableRow.id === row.id);
this.$refs.roleData.toggleRowSelection(checked);
});
});
} else {
if (this.$refs.roleData !== undefined) {
this.$refs.roleData.clearSelection();
}
}
},完整代码：
{{ scope.row[scope.column.property] }}
推荐阅读
- parallels|parallels desktop 解决网络初始化失败问题
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- SpringBoot调用公共模块的自定义注解失效的解决
- 解决SpringBoot引用别的模块无法注入的问题
- Spark|Spark 数据倾斜及其解决方案
- 解决SyntaxError:|解决SyntaxError: invalid syntax
- Spectrum|Spectrum 区块偶尔停止同步问题排查与解决笔记
- 一劳永逸地解决词汇量不够的问题
- Hexo代码块前后空白行问题