el-tableテーブルのページをめくっても、選択したものを覚えています.

el-tableは多く選択して、現在のページの多選については分かりやすくユーザーに表示しますが、どのページを分けた後にどのページがどれだけ多く選択されたかを覚えておいて、正確にユーザーに表示するのはちょっと難しいです.具体的な実現:まず第一に、ここで運んできた人は、この人の文章の詳細スタンプから来ています.

  
  
  
  
  


    

      
        
        
        
      
      
      
    
  
  
  
    new Vue({
      el: '#app',
      data: {
        checkData: [],
        tableData: [],
        total: 11,
      },
      methods: {
        /** 
        *       
        *            ，   
        */
        addDataItem(val, len) {
          this.tableData = Array.from({length: len}, (v, i) => v = {
            index: i,
            id: `${val}${i}`,
          });
          if (this.checkData.length) {
            this.toggleSelection(this.checkData);
          }
        },
        handleCurrentChange(page) {
          if (page === 1) {
            this.addDataItem(1, 10);
          } else {
            this.addDataItem(2, 1);
          }
        },
        /** 
        *   
        */ 
        handleSelect(selection, row) {
          let allRows = selection.filter((item) => !!item);
          if (allRows.find(item => item.id === row.id)) {
            this.addRows([row]);
          } else {
            this.removeRows([row]);
          }
        },
        /** 
        *   
        */ 
        handleSelectAll(selection) {
          if (selection.length > 1) {
            this.addRows(this.tableData);
          } else {
            this.removeRows(this.tableData);
          }
        },
        addRows(rows) {
          for (const key of rows) {
            if (!this.checkData.find((item) => item.id === key.id)) {
              this.checkData.push(key);
            }
          }
        },
        removeRows(rows) {
          if (this.checkData.length > 0) {
            for (const key of rows) {
              this.checkData = this.checkData.filter((item) => item.id !== key.id);
            }
          }
        },
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$nextTick(() => {
                const checked = this.tableData.find(tableRow => tableRow.id === row.id);
                this.$refs.multipleTable.toggleRowSelection(checked, true);
              });
            });
          } else {
            this.$refs.multipleTable.toggleRowSelection(this.tableData, false);
            this.removeRows(this.tableData);
          }
        }
      },
      created() {
        this.addDataItem(1, 10);
      },
    });
  

二つ目は、element-ui公式文書を見てみると、もう実現する方法があります.とても簡単です.

  
  
  
  
  


    

      
        
        
        
      
      
      
    
  
  
  
    new Vue({
      el: '#app',
      data: {
        checkData: [],
        tableData: [],
        total: 13,
        currentPage: 1,
      },
      methods: {
        /** 
        *       
        */
        addDataItem(val, len) {
          this.tableData = Array.from({length: len}, (v, i) => v = {
            index: i,
            id: `${val}${i}`,
          });
        },
        handleCurrentChange(page) {
          this.currentPage = page;
          if (page === 1) {
            this.addDataItem(1, 10);
          } else {
            this.addDataItem(2, 3);
          }
        },
        handleSelectionChange(val) {
          this.checkData = val;
        },
        getRowKeys(row) {
          return row.id;
        },
      },
      created() {
        this.addDataItem(1, 10);
      },
    });