Element表格分页数据选择+全选所有完善批量操作-方案二

列表中实现全选所有数据后（上一篇文章），将思路讲解给同事听，他提出一个问题：全选所有后，取消一条数据的勾选，为什么数据是已翻页的数据减去取消的这条数据，而不是所有数据减去这条数据！

仔细想想后，觉得也是有道理的，就着手实现这一方案，但是这一方案需要跟后端开发人员提前约定好传参方面的问题。

1、这里需要用到多选框的一个属性：indeterminate

<el-checkbox :indeterminate="indeterminate " v-model="allCheck" @change="allCheckEvent">全选所有</el-checkbox>复制代码

控制多选框的样式，当勾选全部所有，取消一条数据，全部所有框的样式如下图所示

2、定义一个数组存储取消的数据：falseList

// 当用户手动勾选数据行的 Checkbox 时触发的事件
selectOne (rows, row) {
  if (this.allCheck) {
    // 多选框样式改变
    this.indeterminate = true
    // 判断勾选数据行是选中还是取消
    let selected = rows.length && rows.indexOf(row) !== -1
    let lenFalse = this.falseList.length
    if (selected) {
      // 选中
      if (lenFalse !== 0) {
        for (let i = 0; i < lenFalse; i++) {
          if (this.falseList[i].execId === row.execId) {
            this.falseList.splice(i, 1)
            break
          }
        }
      }
    } else {
      // 取消
      this.falseList.push(row)
    }
  }
},
// 当用户手动勾选全选 Checkbox 时触发的事件(全选本页)
selectAll (rows) {
  if (this.allCheck) {
    let that = this
    that.indeterminate = true
    let lenNow = that.testList.length
    // 判断勾选全选本页是选中还是取消
    if (rows.indexOf(that.testList[0]) !== -1) {
      // 选中
      for (let i = 0; i < lenNow; i++) {
        for (let n = 0; n < that.falseList.length; n++) {
          if (that.falseList[n].execId === that.testList[i].execId) {
            that.falseList.splice(n, 1)
          }
        }
      }
    } else {
      // 取消
      for (let j = 0; j < lenNow; j++) {
        if (that.falseList.length !== 0) {
          if (that.falseList.indexOf(that.testList[j]) === -1) {
            that.falseList.push(that.testList[j])
          }
        } else {
          that.falseList.push(that.testList[j])
        }
      }
    }
  }
}
复制代码

监听本页数据数组testList和取消的数据数组falseList

watch: {
  testList: {
    handler (value) {
      if (this.allCheck) {
        let that = this
        let len = that.falseList.length
        let lenCheck = that.checkList.length
        if (that.checkList.length === 0) {
          value.forEach(row => {
            that.$refs.recordTable.toggleRowSelection(row, true)
          })
        } else {
          value.forEach(row => {
            for (let i = 0; i < lenCheck; i++) {
              if (row.execId === that.checkList[i].execId) {
                that.$refs.recordTable.toggleRowSelection(row, false)
                break
              } else {
                that.$refs.recordTable.toggleRowSelection(row, true)
              }
            }
            if (len !== 0) {
              for (let j = 0; j < len; j++) {
                if (row.execId === that.falseList[j].execId) {
                  that.$refs.recordTable.toggleRowSelection(row, false)
                  break
                }
              }
            }
          })
        }
      }
    },
    deep: true  },
  falseList: {
    handler (value) {
      if (value.length === 20) {
        this.allCheck = false
        this.indeterminate = false
      }
      if (value.length === 0) {
        this.indeterminate = false
      }
      console.log(value)
    },
    deep: true
  }
}复制代码

出现的问题：

• 我在用for循环的时候，会提前将数组的length保存给一个变量，这样在for循环的时候，不会一遍一遍的去计算数组的length，但是在实现这个功能的时候，会报错，例如下面一段代码，如果提前将第二个for中的length取出来再用，会报execId不存在，那是因为我在for循环的时候对数组进行了操作，所以继续用that.falseList.length

for (let i = 0; i < lenNow; i++) {
        for (let n = 0; n < that.falseList.length; n++) {
          if (that.falseList[n].execId === that.testList[i].execId) {
            that.falseList.splice(n, 1)
          }
        }
      }复制代码

转载于:https://juejin.im/post/5d0091236fb9a07eec59c265