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)
          }
        }
      }複製代碼