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组件,点击翻页后之前选中的数据仍保留,勾选中的样式也会回显

相关推荐
kill5225 分钟前
interface vs type:到底该用哪个
前端
敲代码的嘎仔13 分钟前
从零实现视频续播 + 学习进度统计:前端心跳、条件更新、GROUP BY 统计全链路拆解
java·前端·数据库·学习·面试·职场和发展·音视频
做萤石二次开发的哈哈15 分钟前
海康移动交通四款设备技能接入实战:布控球+取证终端+测速仪+出入口终端,Web/App/小程序移动交通应用快速生成
前端·物联网·萤石开放平台·蓝海aiot一站式工作台·aiot开发·移动交通
HwJack2016 分钟前
用 HML + CSS + JS 三段式写鸿蒙界面
javascript·css·harmonyos
IT_陈寒29 分钟前
我TM竟然被Java的空指针坑了第三次!
前端·人工智能·后端
xcLeigh32 分钟前
AI 编程学习路线图:一份覆盖前端、后端、全栈的系统学习计划
前端·人工智能·学习
linux_cfan37 分钟前
HTML5 视频交互标注实践:用开源播放器 ZWPlayer 实现热区、测验与分支节点(附接入代码)
前端·javascript·音视频
小羊没烦恼!44 分钟前
Office文件的奥秘——.NET平台下不借助Office实现Word、Powerpoint等文件的解析(完)
java·大数据·前端·网络·word·powerpoint·.net
风骏时光牛马1 小时前
AI提示词工程:高效构建精准指令的方法论
前端
YHHLAI1 小时前
基于 Next.js 16 + Redis 的全栈笔记博客系统
javascript·redis·笔记