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

相关推荐
满栀58516 分钟前
vue3动态路由详细效果
前端·javascript·vue.js·typescript·前端框架
使用小功能大师18 分钟前
从零搭建高可用Web应用:全栈架构实战与成本优化完全指南
前端·阿里云·架构·服务搭建
IT_陈寒29 分钟前
SpringBoot这个特性差点让我加班到凌晨
前端·人工智能·后端
qq_2676128932 分钟前
Gitee DevOps的度量驱动持续改进:从构建数据到交付效率的量化管理与优化路径
前端·gitee·自动化
meilindehuzi_a36 分钟前
从 Vite 到 Axios 与 Mock:React Todos 全栈项目架构及请求链路详解
前端·react.js·架构
亿元程序员38 分钟前
项目经理让我在 2D 项目里做 3D 音乐球球,我只好做了个“假的”
前端
糖果店的幽灵41 分钟前
Codex官网前端可抄吗?从模仿到创新的技术实践指南
前端·人工智能
youqingyike42 分钟前
【无标题】
前端·qt
恋猫de小郭1 小时前
Jetpack Compose 8 月版正式发布,核心模块 1.12
android·前端·flutter
纵道软件1 小时前
使用 Docker 构建自定义 SeaTunnel Web 服务镜像
前端·docker·容器