element table 翻页选中回显

使用element table 多选翻页时选中的数据没保留,查看文档以及资料发现得进行以下设置

1、在table上设置row-key,以及 @selection-change="handleSelectionChange"

2、在type="selection"这一行上设置reserve-selection,我就是把这个放在table上导致翻页没有保留之前选中的数据

javascript 复制代码
<el-table-column  reserve-selection  type="selection" width="55" />

3、处理handleSelectionChange

javascript 复制代码
handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection .length > 0) { // 判断是否存在勾选过的数据
        this.tableData.forEach( row => {  // 获取数据列表接口请求到的数据
            this.multipleSelection .forEach( item => {  // 勾选到的数据
             if(row.code === item.code){
                 this.$refs.multipleTable.toggleRowSelection(item, true); // 若有重合,则回显该条数据
               }
             });
          })
      }
    },

参考:【解决】Element UI表格Table组件,点击翻页后之前选中的数据仍保留,勾选中的样式也会回显

相关推荐
lichenyang45311 分钟前
Socket.IO 原理与技术选型
前端
qq210846295313 分钟前
在python中什么是 self 和 cls?
开发语言·前端·python
我会冲击波13 分钟前
vibe coding 一个多月,我把 Claude Code + Pi 做成了桌面 IDE,还给它移植了 VS Code 的编辑体验
前端·javascript·后端
kyson_20 分钟前
前端性能优化全链路实践指南:从网络、缓存到渲染与监测
前端
前端fighter22 分钟前
线上崩溃?使用 TRAE Work 5分钟把混淆日志翻译成人话并输出复盘报告
前端·vue.js·程序员
网安蟹佬霸29 分钟前
CTF Web方向解题全攻略:从信息收集到getshell(附实战payload与脚本)
android·前端·网络·安全·web安全·网络安全·网安
JimmtButler33 分钟前
从 Java 到 JS:我终于把闭包想明白了
javascript·后端
前端玩坑坑34 分钟前
CSS Container Queries 容器查询入门教程
前端
带多刺的玫瑰39 分钟前
Leecode#4刷题之寻找两个正序数组的中位数
java·前端·算法
qq_2676128940 分钟前
项目集、里程碑与迭代联动:Gitee项目管理如何支撑多团队规模化交付与进度风险治理
前端·gitee