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

相关推荐
我是Superman丶2 小时前
【技巧】前端VUE用中文方法名调用没效果的问题
前端·javascript·vue.js
斯~内克2 小时前
Vue 3 中 watch 的使用与深入理解
前端·javascript·vue.js
蜡笔小柯南3 小时前
解决:npm install报错,reason: certificate has expired
前端·npm·node.js
lqj_本人4 小时前
鸿蒙OS&UniApp制作多选框与单选框组件#三方框架 #Uniapp
前端·javascript·uni-app
@PHARAOH5 小时前
WHAT - 前端开发流程 SOP(标准操作流程)参考
前端·领导力
松树戈6 小时前
plus-ui&RuoYi-Vue-Plus 基于pgSql本地运行实践
前端·vue.js·spring boot·ui
new6669996 小时前
css画图形
前端·css
Yvonne爱编码7 小时前
CSS- 1.1 css选择器
前端·css·状态模式·html5·hbuilder
SHIPKING3937 小时前
【HTML】个人博客页面
javascript·css·html
山河故人1637 小时前
uniapp使用npm下载
前端·npm·uni-app