element table 多选分页回显实现时遇到的问题

简介

在实现element table多选分页回显功能时遇到了很多问题，这里主要记录与分享一下改功能遇到的问题和解决方法。

完成的效果

已完成的element table多选分页回显功能

https://blog.csdn.net/xuelong5201314/article/details/132730937

问题

一些小的问题这里不做记录（单词错误、大小写等）
这里注意问题部分只讲遇到问题的代码，不贴全部代码，完整的代码请参考已完成的element table多选分页回显功能

问题一：全选与取消权限后数据被覆盖

问题代码：

    // 是否全选
    selectAll(arr) {
      this.selectUsers = arr
    },

问题原因：

因为是分页回显，所有不能使用直接覆盖，应该判断是否为全选或取消全选，并且根据判断写对应的逻辑

正确代码：

    // 是否全选
    selectAll(arr) {
      if (arr.length !== 0) {
        // 全选
        arr.forEach(item => {
          // some() 方法用于判断数组中是否存在某元素，参数是function，返回值是true或false，存在返回true 否则返回false
          const bool = this.selectUsers.some(user => user.id === item.id)
          if (!bool) {
            // 不存在添加
            this.selectUsers.push(item)
          }
        })
      } else {
        // 取消全选
        this.allUsers.forEach(item => {
          this.selectUsers = this.selectUsers.filter(user => user.id !== item.id)
        })
      }
    },

问题二：选中后切换分页后不回显

选中数据时正常，切换分页后数据不回显

问题代码：

	// 分页按钮
    handleCurrentChange(val) {
      ...
      this.allUsers = res.data
      this.echoSelected()
      ...
    },
    // 回显选中
    echoSelected() {
      if (this.selectUsers.length > 0) {
        this.allUsers.forEach(item => {
          if (this.selectUsers.some(user => user.id === item.id)) {
            // 存在添加
            this.$refs.multipleTable.toggleRowSelection(item)
          }
        })
      }
    },

问题原因：

代码执行太快，数据还未刷新就设置选中，导致无法回显问题
使用this.$nextTick（）方法，在下次 DOM 更新循环结束之后执行延迟回调。

正确代码：

    // 回显选中
    echoSelected() {
      if (this.selectUsers.length > 0) {
        this.$nextTick(() => {
          this.allUsers.forEach(item => {
            if (this.selectUsers.some(user => user.id === item.id)) {
              // 存在添加
              this.$refs.multipleTable.toggleRowSelection(item)
            }
          })
        })
      }
    },

问题三：移除时，左侧选中的数据全部变为未选中

选中第一页数据，切换其他页面时回显正常

点击移除右侧数据时，左侧变异常

问题代码：

    // 移除
    deleteUser(node) {
      this.selectUsers = this.selectUsers.filter(user => user.id !== node.id)
      this.toggleSelection(this.selectUsers)
    },
    toggleSelection(arr) {
      // 先清空
      this.$refs.multipleTable.clearSelection()
      if (arr.length > 0) {
        arr.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      }
    },

解决方法看问题四

问题四：移除选中时，左侧未取消选中

选中第一页前三条数据后，选择第二页在回到第一页，这时是正常回显的

当点击移除右侧选中的数据时左侧数据未删除

问题代码：

// 移除
    deleteUser(node) {
      this.selectUsers = this.selectUsers.filter(user => user.id !== node.id)
      this.$refs.multipleTable.toggleRowSelection(node, false)
    },

问题原因：

这里主要原因是 this.$refs.multipleTable.toggleRowSelection(node, false) 中的node指向，
上面代码中的node是指向this.selectUsers的，也就是说node是属于this.selectUsers的，
这时将node传给this.$refs.multipleTable，this.$refs.multipleTable也想选中对应的数据，奈何他找不到啊。

解决方法
先移除this.selectUsers中的元素，在遍历this.allUsers判断this.selectUsers与this.allUsers中的id是否相同，
相同选中（这里选中的参数是传this.allUsers的！！！！！！）

正确代码：

// 移除
    deleteUser(node) {
      // filter方法不懂的可以百度一下哈
      this.selectUsers = this.selectUsers.filter(user => user.id !== node.id) // 这时返回删除后的数组
      // 遍历this.allUsers，这时item是指向this.allUsers， node是指向this.selectUsers的
      this.allUsers.forEach(item => {
        if (node.id === item.id) {
          // 存在添加
          // toggleRowSelection方法两个参数，第一个参数必填，第二个参数选填
          // 只填第一个参数时，如果第一个参数未选中，则选中；如果是选中的，则取消选中
          // 第二个参数：false是取消选中，true是选中
          // 注意第一个参数一定是item，是指向你要操作的表格数据，如果是指向其他数据是无效的
          this.$refs.multipleTable.toggleRowSelection(item, false) 
        }
      })
    },

其他问题

其他大的问题不记得了，如果想起来在加