需求：

1.表格多選
2.支持翻頁(yè)
3.支持當(dāng)前頁(yè)全選

效果如下：

IMG.jpeg

思路：

1.將每頁(yè)全部選中的數(shù)據(jù)存放到一個(gè)數(shù)組中
2.將當(dāng)前頁(yè)碼選中的數(shù)據(jù)存到一個(gè)數(shù)組中
3.獲取一個(gè)鍵值，標(biāo)識(shí)當(dāng)前行的唯一鍵的名稱

實(shí)現(xiàn)：

1.初始化數(shù)據(jù)

                driver_id:[],
                multipleSelectionAll:[],//所有選中的數(shù)據(jù)包含跨頁(yè)數(shù)據(jù)
                multipleSelection:[],// 當(dāng)前頁(yè)選中的數(shù)據(jù)
                idKey: 'driver_id', // 標(biāo)識(shí)列表數(shù)據(jù)中每一行的唯一鍵的名稱
            

2.復(fù)選框改變時(shí)的事件

  //復(fù)選框
        handleSelectionChange(val){
            let driver_ids =[];
            val.map(item =>{
              driver_ids.push(item.driver_id);
            })
            this.form.sels = driver_ids.join(',');
            this.driver_id = driver_ids
            this.multipleSelection = val;
            this.multipleSelectionAll = Array.from(new Set(this.multipleSelectionAll.concat(driver_ids)));  // 去重
            //實(shí)時(shí)記錄選中的數(shù)據(jù)
            setTimeout(()=>{
                this.changePageCoreRecordData();
            }, 50)
          },

3.翻頁(yè)記憶核心部分：

// 記憶選擇核心方法
          changePageCoreRecordData () {
              // 標(biāo)識(shí)當(dāng)前行的唯一鍵的名稱
             let idKey = this.idKey;
              let that = this;
              
              // 如果總記憶中還沒(méi)有選擇的數(shù)據(jù)，那么就直接取當(dāng)前頁(yè)選中的數(shù)據(jù)，不需要后面一系列計(jì)算
              if (this.multipleSelectionAll.length < 0) {
                  this.multipleSelectionAll = this.multipleSelection;
                  return;
              }
             
              // 總選擇里面的key集合
              let selectAllIds = [];
              this.multipleSelectionAll.forEach((row,index)=>{
                  selectAllIds.push(row[idKey]);
              })
              
              let selectIds = []
              // 獲取當(dāng)前頁(yè)選中的id
              this.multipleSelection.forEach(row=>{
                  selectIds.push(row[idKey]);
                  // 如果總選擇里面不包含當(dāng)前頁(yè)選中的數(shù)據(jù)，那么就加入到總選擇集合里
                  if (selectAllIds.indexOf(row[idKey]) < 0) {
                      that.multipleSelectionAll.push(row);
                  }
              })
              
              let noSelectIds = [];
              // 得到當(dāng)前頁(yè)沒(méi)有選中的id
              this.tableData.forEach(row=>{
                  if (selectIds.indexOf(row[idKey]) < 0) {
                      noSelectIds.push(row[idKey]);
                  }
              })
              noSelectIds.forEach(id=>{
                  if (selectAllIds.indexOf(id) >= 0) {
                      for(let i = 0; i< that.multipleSelectionAll.length; i ++) {
                          if (that.multipleSelectionAll[i][idKey] == id) {
                              // 如果總選擇中有未被選中的，那么就刪除這條
                              that.multipleSelectionAll.splice(i, 1);
                              break;
                          }
                      }
                  }
              })
              let driver_id =[];
              this.multipleSelectionAll.map(item => {
                driver_id.push(item.driver_id);
              })
              this.form.sels = driver_id.join(',');
              if(this.multipleSelectionAll.length > this.total) {
                let ID = this.multipleSelectionAll[this.multipleSelectionAll.length - 1].driver_id
                
                this.tableData.forEach(row=>{
                  if(row.driver_id == ID) {
               this.$refs.multipleTable.toggleRowSelection(row);  //實(shí)現(xiàn)打鉤
                  }
                })
              }   
          },

4.請(qǐng)求翻頁(yè)重新取得數(shù)據(jù)時(shí)再次勾選上記憶中的選項(xiàng)

       setSelectRow() {
            if (!this.multipleSelectionAll || this.multipleSelectionAll.length < 0) {
                return;
            }
            // 標(biāo)識(shí)當(dāng)前行的唯一鍵的名稱
            let idKey = this.idKey;
            let that = this;
            if(this.selectAllIds!=null){
            this.$refs.multipleTable.clearSelection();
            for(var i = 0; i < this.tableData.length; i++) {                    
                if (this.selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
                    // 設(shè)置選中，記住table組件需要使用ref="multipleTable"
                    this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true);
                }
            }
          }
        },

前端小白一枚，希望能夠幫到你，歡迎留言評(píng)論！
喜歡的點(diǎn)贊和關(guān)注哦?。?/p>