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

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

仔细想一想后，以为也是有道理的，就着手实现这一方案，可是这一方案须要跟后端开发人员提早约定好传参方面的问题。

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

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

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

二、定义一个数组存储取消的数据：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])
        }
      }
    }
  }
},
allCheckEvent () {
  if (this.allCheck) {
    this.testList.forEach(row => {
      this.$refs.recordTable.toggleRowSelection(row, true)
    })
  }
 else {
    this.$refs.recordTable.clearSelection()
    this.falseList = []
    this.indeterminate = false
  }
}
selectionChange (rows) {
  this.checkList = rows
}复制代码

监听本页数据数组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)
          }
        }
      }复制代码