記錄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 }