1. 程式人生 > 實用技巧 >element ui 分頁記憶checked

element ui 分頁記憶checked

<el-table
            :data="tableData"
            border
            ref="multipleTableChannel"
            @selection-change="selectChannel"
            style="width: 100%">
            <el-table-column
                type="selection"
                width="55">
             </el-table-column>
             <el-table-column
              type
="index" width="50" align="center" label="序號"/> <el-table-column prop="date" align="center" label="商戶名稱"> </el-table-column> <el-table-column prop="name
" align="center" label="聯絡人"> </el-table-column> <el-table-column prop="address" align="center" label="聯絡電話"> </el-table-column> </el-table> <pagination v
-show="total>0" :total="total" layout="total,prev, pager, next" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
multipleSelectionAll: [],   // 所有選中的資料包含跨頁資料
multipleSelection: [],   // 當前頁選中的資料
idKey: 'id', // 標識列表資料中每一行的唯一鍵的名稱(需要按自己的資料改一下)

 

// 設定選中的方法
     setSelectRow() {
          if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
              return;
          }
          // 標識當前行的唯一鍵的名稱
          let idKey = this.idKey;
          let selectAllIds = [];
          let that = this;
          this.multipleSelectionAll.forEach(row=>{
              selectAllIds.push(row[idKey]);
          })
          this.$refs.table.clearSelection();
          for(var i = 0; i < this.tableData.length; i++) {                    
              if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
                  // 設定選中,記住table元件需要使用ref="table"
                  console.log(this.tableData[i])
                  this.$refs.table.toggleRowSelection(this.tableData[i], true);
              }
          }
      } ,
      // 記憶選擇核心方法
      changePageCoreRecordData () {
          // 標識當前行的唯一鍵的名稱
          let idKey = this.idKey;
          let that = this;
          // 如果總記憶中還沒有選擇的資料,那麼就直接取當前頁選中的資料,不需要後面一系列計算
          if (this.multipleSelectionAll.length <= 0) {
              this.multipleSelectionAll = this.multipleSelection;
              return;
          }
          // 總選擇裡面的key集合
          let selectAllIds = [];
          this.multipleSelectionAll.forEach(row=>{
              selectAllIds.push(row[idKey]);
          })
          let selectIds = []
          // 獲取當前頁選中的id
          this.multipleSelection.forEach(row=>{
              selectIds.push(row[idKey]);
              // 如果總選擇裡面不包含當前頁選中的資料,那麼就加入到總選擇集合裡
              if (selectAllIds.indexOf(row[idKey]) < 0) {
                  that.multipleSelectionAll.push(row);
              }
          })
          let noSelectIds = [];
          // 得到當前頁沒有選中的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;
                      }
                  }
              }
          })
          console.log(that.multipleSelectionAll)
      },
      handleCurrentChange(val){
          // 改變頁的時候呼叫一次
         this.page.currentPage = val;
          this.changePageCoreRecordData();
         this.query();
      },
      handleSelectionChange1 (val) {
          // table元件選中事件,記得加上@selection-change="handleSelectionChange"
          this.multipleSelection = val;
      },
      query () {
            // 分頁查詢資料方法,在成功返回資料方法裡呼叫setSelectRow方法,使每次分頁查詢都能勾選中
         if(this.page.currentPage==1){
            this.tableData=this.tableDatsa
        }else{
          this.tableData=this.datass
        }
          setTimeout(()=>{
                      this.setSelectRow();
                  }, 200)
      },