element-ui table跨頁全選


element-ui table里的全選功能只會全選當前頁的所有數據

當table有分頁功能的時候實現跨頁全選

  ①為table添加select方法(當用戶手動勾選數據行的 Checkbox 時觸發的事件)

    兩個參數 selection,row 選中的數據   最后一個選中的數據

    定義一個變量用來保存選中的數據 將selection賦值給變量

    checkAdmittance(selection, row) {

      this.selectedList = selection;

       },

  ②為table添加select-all方法(當用戶手動勾選全選 Checkbox 時觸發的事件)

    this.allCheck為true時

     if (!this.allCheck) {
                   // 全選選中時當前頁所有數據選中,使用后台所有數據進行遍歷.
      // 把所有數據賦值給當前選中變量,遍歷所有數據
                   this.selectedList = this.pointData;
                   this.pointData.forEach((row) => {
                          if (row) {
           //為table添加ref屬性 table
                               this.$refs.table.toggleRowSelection(row, true);this.selectedList = [];
                          }
                   });
      this.allCheck = true;
     }else{ 
        this.$refs.table.clearSelection();
                             this.allCheck = false;
        this.selectedList = [];
        }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM