解决el-table组件中，分页后数据的勾选、回显问题？

问题描述：

        1、记录一个弹窗点击确定按钮后，table列表所有勾选的数据信息

        2、再次打开弹窗，回显勾选所有保存的数据信息

        3、遇到的bug：切换分页，其他页面勾选的数据丢失；点击确认只保存当前页的数据；勾选数据保存后但并未回显......

解决方法：

      
      
        

          
            
          
          

            重 置
            查 询
          
        
        
          
          
            
          
          
        
        
        

          确 定
        
      

在data中定义暂存勾选的人员Id和人员姓名：

data () {
    return {
        personsList: [], // 人员列表list
        echoList: [],// 人员选中的所有id
        echoListName: []// 人员选中的所有名字
    }

首先需要通过接口获取所有待勾选的人员信息，回显之前暂存的数据信息：

// 获取参会人员列表  获取全部人员名单
    getpersonsList (pageNo, pageSize) {
      //调用接口
      personsList(this.personsForm).then((response) => {
        this.personTotal = response.page.total
        this.personsList = response.data  //暂存所有的人员信息
        this.$nextTick(() => {
          this.personsList.forEach(item => {
            //查询当前列表并回显
            if (this.echoList.includes(item.user_id)) {
              //设置当前行数据为选中状态
              this.$refs.personsTable.toggleRowSelection(item, true); 
            }
          })
        })
      })
    }

其中“ @on-cancel="onClose3" ”表示关闭modal弹窗后进行的操作：保存勾选数据、清空勾选效果、清空form表单、重置分页信息

    // 关闭人员列表弹框
    onClose3 () {
      this.showPersons = false  //关闭modal弹窗
      this.echoList = []  //置空暂存的勾选人员Id
      this.echoListName = []  //置空暂存的勾选人员姓名
      this.$refs.personsTable.clearSelection();  //清空未保存勾选
      this.personsForm.pageSize = 10
      this.personsForm.pageNo = 1
      this.personsForm.userName = null
    }

" @select "，“ @select-all ”官网解释如下：

【el-table官网链接地址：Element - The world's most popular Vue UI framework】

 具体实现代码及解释如下：

    // 选择参会人员（已经存在的数据就取消勾选、未存在过的数据就加入勾选）
    handleSelectionChange(selecteds, row) {
      if (!this.echoList.includes(row.user_id)) {
        this.echoList.push(row.user_id);  //暂存新勾选的人员Id
        this.echoListName.push(row.user_name);  //暂存新勾选的人员姓名
      } else {
        this.echoList.forEach((id, index) => {
          if (id == row.user_id) {
            this.echoList.splice(index, 1);  //删除暂存的需要取消勾选的人员Id
            this.echoListName.splice(index, 1);  //删除暂存的需要取消勾选的人员姓名
          }
        });
      }
    },
    // 全选、取消全选
    handleAllChange(selecteds) {
      if (selecteds.length > 0) {
        selecteds.forEach(item => {
          if (!this.echoList.includes(item.user_id)) {
            this.echoList.push(item.user_id);  //暂存新勾选的人员Id
            this.echoListName.push(item.user_name);  //暂存新勾选的人员姓名
          }
        });
      } else {
        this.personsList.forEach(item => {
          this.echoList.forEach((id, index) => {
            if (id === item.user_id) {
              this.echoList.splice(index, 1);  //删除暂存的需要取消勾选的人员Id
              this.echoListName.splice(index, 1);  //删除暂存的需要取消勾选的人员姓名
            }
          });
        });
      }
    }

最后，记得在关闭弹窗时清空勾选及表单：

      this.echoList = []
      this.echoListName = []
      this.$refs.personsTable.clearSelection();
      this.personsForm.userName = null;

前端小白积累经验篇~~