element table 多选 翻页 选中记忆

select(selection, row) {
  let existence = false; // 选中数组中是否存在该row
  for (let i = 0; i < selection.length; i++) {
    if (selection[i].id === row.id) {
      existence = true
    }
  }
  if (existence) {
    this.checkAllRows.push(row) // 存在，意味着选中，将row添加到数组选中数组中
  } else { //  不存在，意味着未选中，循环选中数组中是否存在该row，存在就移除
    for (let i = 0; i < this.checkAllRows.length; i++) {
      if (this.checkAllRows[i].id === row.id) {
        this.checkAllRows.splice(i, 1)
      }
    }
  }
},
selectAll(selection) {
  if (selection.length > 0) { //  全选，循环添加到选中数组中
    selection.forEach((item) => {
      this.checkAllRows.push(item)
    })
  } else { //  取消全选，移除选中数组中的本页的数据。
    this.checkAllRows.splice((this.where.pageNumber * this.where.pageSize - this.where.pageSize), this.where.pageSize)
  }
},
toggleSelection() {
  //  翻页时，双重循环判断选中值，并传入page.rows的值，注意：选中数组中的值传入后不会选中行
  this.checkAllRows.forEach(item1 => {
    this.page.rows.forEach(item2 => {
      if (item1.id === item2.id) {
        this.$refs.elTable.toggleRowSelection(item2, true)    // 注意：此处如果按照下面所写，传入item1，页面是没有选中状态的
      }
    })
  })

  // const index = this.page.rows.indexOf(this.checkAllRows[0]) 判断是否存在
  // console.log('index==', index)
  //  错误写法
  // this.checkAllRows.forEach((item) => {
  //   // console.log('-----------------------this.$refs------------------------------')
  //   // console.log(this.$refs.elTable)
  //   this.$refs.elTable.toggleRowSelection(item, true);
  // })
  // console.log('---------------------toggleSelection--------------------------')
  // console.log(this.checkAllRows)
},

 

查询数据的方法中调用toggleSelection()

转载于:https://my.oschina.net/u/3358860/blog/3093034