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

相关推荐
计算机魔术师13 分钟前
黄仁勋台上接特朗普电话开免提,全场听到一句话:AI 不会减速
前端
yivifu35 分钟前
HTML元素的textContent和innerText两个属性的差别
前端·html
Bs_MoneyMagnet1 小时前
基于springboot+vue的会议室预约管理系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·spring·毕业设计·计算机毕业设计
天若有情6731 小时前
开源轻量双语工具|一键批量查询 NPM 包历史下载量,支持按作者批量统计
javascript·npm·github pages·开源工具·netlify·前端开源·npm克隆量
咸鱼老弟1 小时前
Speculative Decoding(投机采样):大模型"先猜后验",生成速度翻倍
前端·算法·ai编程
Bs_MoneyMagnet1 小时前
基于springboot+vue的茶铺管理系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·spring·毕业设计·计算机毕业设计
a1117761 小时前
网页版「MATLAB」开源
前端·开源
JianZhen✓1 小时前
解决SPA发版旧版本残留+动态路由打包失效的完整方案(附落地代码)
前端·状态模式
计算机魔术师1 小时前
Dario Amodei 发文呼吁放缓前沿 AI 开发后各方表态汇总
前端
anyup2 小时前
仍然是简单一句话,uView Pro Starter 一键清理 Skill 发布
前端·人工智能·uni-app