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

相关推荐
兰亭妙微UI设计公司4 小时前
兰亭妙微软件界面设计公司的解锁按钮设计10大密码
开发语言·前端·javascript
迪幻4 小时前
封装自己的 npm 依赖并存储到个人 GitHub
前端·npm·github
u0111026755 小时前
WebP 转成 PNG 后为什么更大?图片格式转换不等于压缩
前端·javascript·vue.js
万少5 小时前
Qoder sonus模型 20分钟,复刻 马斯克 飞天汽车
前端·后端·算法
seconp5 小时前
基于Spring Boot和Vue 3的智慧旅游网站:住宿预订、行程规划与千问接入
vue.js·spring boot·毕业设计·软件工程·课程设计·旅游·毕设
java1234_小锋5 小时前
【技术专题】HTML5 网页技术 - HTML5 列表标签
前端·html·html5
强二小哥帅5 小时前
Kotlin 协程复习笔记
前端
不可能片场5 小时前
工程实践 原子替换改了 ctime 怎么修
前端·electron
暧暧内含光5 小时前
HTTP 文件传输体系全解:从协议标头、OSS 架构到流媒体分片
前端
静默回滚5 小时前
浏览器能显示AVIF,却导不出一张AVIF
前端