记录vue使用element-ui实现多选表格分页后记录选中数据并展示勾选

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

最近做公司vue项目，有一个需求是实现多选表格跨分页记录选中数据，完成功能后将此记录下来，以便学习

---

一、整体思路？

使用el-table组件封装的select-all和select事件实现
思路如下：
1.点击单独选择某一项时，如果当前是全选，则记录取消的数据，如果当前非全选，则记录选中的数据
2.全选时，如果当前非全选状态，则将全选状态置为true，如果当前是全选状态，则将全选状态置为false，并清空全选数组数据（防止上一次数据产生影响）
3，调取分页数据时，先默认让当前页面全选，如果当前是全选状态，则根绝全选时记录的取消选中数据，取消勾选；如果当前非全选状态，则根据全选时记录的选中数据勾选当前项

二、使用步骤

1.标签结构

代码如下：

<el-table
  ref="MyTable"
  :data="gridData"
   border
   tooltip-effect="dark"
   style="width: 100%"
   @select-all="handleSelectionAll"
   @select="selectARow"
 >
  ...

2.初始化数据

代码如下：

data () {
  return {
   	gridData: [],
    // 记录全选时的数组长度
    allSelectLength: 0,
    // 全选状态
    allSelectFlag: false,
    // 选择时数据
    multipleTableData: []
  }

gridData使用的url网络请求的数据。

3.js部分

3.1全选时

// 全选时
handleSelectionAll (val) {
   if (val.length === this.allSelectLength) {
     this.allSelectFlag = true
     this.multipleTableData = []
   } else if (val.length = 0) {
     this.allSelectFlag = false
     this.multipleTableData = []
   }
 },

3.2单独选择某一条数据时

// 单独选择某一条数据
selectARow(val, row) {
 //当前点击数据，是勾选还是取消
 let selecteBool = val.length && val.indexOf(row) !== -1;
 //若全选，则记录取消的数据；非全选，则记录选中的数据；
 if (this.allSelectFlag) {
   if (!selecteBool) {
     this.multipleTableData.push(row)
   } else {
     if (this.multipleTableData.length > 0) {
       for (let i = 0; i < this.multipleTableData.length; i++) {
         if (row.caseId == this.multipleTableData[i].caseId) {
           this.multipleTableData.splice(i, 1);//删除勾选的取消列表
         }
       }
     }
   }
 } else {
   if (selecteBool) {
     this.multipleTableData.push(row)
   } else {
     if (this.multipleTableData.length > 0) {
       for (let i = 0; i < this.multipleTableData.length; i++) {
         if (row.caseId == this.multipleTableData[i].caseId) {
           this.multipleTableData.splice(i, 1);//删除已勾选列表中，再次取消的项；
         }
       }
     }
   }
 }
},

3.3获取分页数据时

// 接口请求
exeAllot(param).then(res => {
 this.gridData = res.data.data
  this.total = res.data.total * 1
  
  this.allSelectLength = this.gridData.length
  // 这里做数据回显
  this.$nextTick(() => {
    // 全选状态
    if (this.allSelectFlag) {
      this.gridData.forEach((row) => {
        this.$refs.MyTable.toggleRowSelection(row, true)
      })
      // 如果存在有之前取消的数据 进行取消展示
      if (this.multipleTableData.length > 0) {
        this.gridData.forEach((item, i) => {
          this.multipleTableData.forEach((multItem, j) => {
            if (this.gridData[i].caseId == this.multipleTableData[j].caseId) {
              //展示已取消的数据
              this.$refs.MyTable.toggleRowSelection(this.gridData[i], false) 
            }
          })
        })
      }
    } else {
      // 非全选状态 
      // 如果存在有之前选中的数据  进行勾选展示
      if (this.multipleTableData.length > 0) {
        this.gridData.forEach((item, i) => {
          this.multipleTableData.forEach((multItem, j) => {
            if (this.gridData[i].caseId == this.multipleTableData[j].caseId) {
           		//展示已勾选的数据
               this.$refs.MyTable.toggleRowSelection(this.gridData[i], true);
            }
          })
        })
      }
    }
    this.is_loading_allot = false
  })
})
.catch(err => {
  console.log(err)
  this.is_loading_allot = false
})

---

总结

此方法，参考了其他作者所写文章，本人将原作者思路整理根据自己理解记录下来，以供参考，原文链接：https://blog.csdn.net/clearjj/article/details/113503025