el-table 选择回显 分页保存已选数据

针对表格数据多选,回显,分页还要保存已选数据
在这里插入图片描述
给el-table 添加属性

ref="tableRef"
@selection-change="handleSelectionChange"

属性说明
selectList 初始数据
otherSelect 非当前页选中的数据
tableList 当前页表格数据

setSelectRow() {
   let arr = []
   this.otherSelect = []
   this.selectList.map((item) => {
       let obj = this.tableList.find((val) => item.id == val.id)
       console.log(obj);
       if (obj) arr.push(obj)
       else this.otherSelect.push(item)
   })
   this.$nextTick(() => {
       for (let item of arr) {
           this.$refs.tableRef.toggleRowSelection(item, true)
       }
   })
}
handleSelectionChange(val) {
   this.selectList = this.otherSelect.concat(val);
}

selectList 就是最终选中的数据
每次请求都执行一次setSelectRow方法
非常简单

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-04 02:16:05       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-04 02:16:05       100 阅读
  3. 在Django里面运行非项目文件

    2024-02-04 02:16:05       82 阅读
  4. Python语言-面向对象

    2024-02-04 02:16:05       91 阅读

热门阅读

  1. C语言stderr、errno、strerror、perror

    2024-02-04 02:16:05       49 阅读
  2. Linux命令-arpd命令(收集免费ARP信息)

    2024-02-04 02:16:05       53 阅读
  3. 开发实践9_OnlinePlatform笔记

    2024-02-04 02:16:05       50 阅读
  4. 作业2024/2/2

    2024-02-04 02:16:05       52 阅读
  5. 开源社区的力量:共同构建数字时代的未来(AI)

    2024-02-04 02:16:05       45 阅读
  6. MYSQL 查询数据库,表使用情况

    2024-02-04 02:16:05       51 阅读
  7. Centos7安装Nginx-1.21

    2024-02-04 02:16:05       52 阅读
  8. PHP字符串面试题

    2024-02-04 02:16:05       54 阅读
  9. 【HarmonyOS】鸿蒙开发之自定义组件——第3.7章

    2024-02-04 02:16:05       54 阅读
  10. 从编程中理解:大脑的无意识与有意识状态

    2024-02-04 02:16:05       54 阅读