记录vue中 el-table toggleRowSelection实现分页全选、反选功能

HTML部分

<div>
　<el-button size="small" @click="checkedAllBtn">全选</el-button>
  <el-button size="small" @click="checkedInvertBtn">反选</el-button>
</div>
<el-table
    ref="table"
    :data="tableData"
    v-loading="loading"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
 >
   <el-table-column type="selection" width="55"></el-table-column>
</el-table>

定义data

data() {
    return {
      loading: true,
　　　 id: 'id',
      tableData: [],
      checkedDataAll: [], // 所有选中的数据
      multipleChecked: [], // 当前页选中的数据
    }
},

页面初始化

mounted() {
   this.init()
}

init() {
    axios({ ... }).then((res) => {
      this.setSelectRow(this.id, this.checkedDataAll, this.tableData, 'table')
    });
}

 

 

实现方法

handleSelectionChange(rows) {
   if (rows) {
      this.multipleChecked = rows
   }
   this.$nextTick(() => {
      this.changePageData(this.id)
   })
},

changePageData(id) {  // 记录翻页后的数据
      if (this.checkedDataAll.length <= 0) {
        this.checkedDataAll = this.multipleChecked
        return
      }

      let selectAllIds = [] // 所有页选中的ids
      let selectIds = [] // 当前页选中的ids
      let noSelectIds = [] // 当前页没有选中的ids

      this.checkedDataAll.map(item => {
        selectAllIds.push(item[id])
      })
      this.multipleChecked.map(item => {
        selectIds.push(item[id])
        if (selectAllIds.indexOf(item[id]) < 0) {
          this.checkedDataAll.push(item)
        }
      })
      this.tableData.map(item => {
        if (selectIds.indexOf(item[id]) < 0) {
          noSelectIds.push(item[id])
        }
      })
      noSelectIds.map(item => {
        if (selectAllIds.indexOf(item) >= 0) {
          for (let i = 0; i < this.checkedDataAll.length; i++) {
            if (this.checkedDataAll[i][id] === item) {
              this.checkedDataAll.splice(i, 1)
              break
            }
          }
        }
      })
    },

// 设置选中项
    setSelectRow(id, checkedAllData, tableData, tableName) {
      this.$nextTick(() => {
        if (!checkedAllData || checkedAllData.length <= 0) {
          this.$refs[tableName].clearSelection()
          return
        }

        let selectAllIds = []
        checkedAllData.map(item => {
          selectAllIds.push(item[id])
        })
        this.$refs[tableName].clearSelection()
        for (let i = 0; i < tableData.length; i++) {
          if (selectAllIds.indexOf(tableData[i][id]) >= 0) {
            this.$refs[tableName].toggleRowSelection(tableData[i], true) // 设置勾选
          } else {
            this.$refs[tableName].toggleRowSelection(tableData[i], false) // 取消勾选
          }
        }
      })
    },

全选按钮 请求拿到所有的数据

checkedAllBtn() {
  axios({ ... }).then((res) => {
   this.checkedDataAll = res.data.records
　　this.setSelectRow(this.id, this.checkedDataAll, this.tableData, 'table')
　})
}

反选按钮 遍历所有的数据进行反向选择

checkedInvertBtn() {
  let selectAllIds = []
  this.checkedDataAll.map(item => {
   　selectAllIds.push(item['id'])
  })
  axios({ ... })
  .then((res) => {
  　　this.checkedDataAll = []
    　res.data.records.map(item => {
      if (selectAllIds.indexOf(item['id']) < 0) {
         this.checkedDataAll.push(item)
      }
   })
   this.setSelectRow(this.id, this.checkedDataAll, this.tableData, 'table') 
　})

17 }