【實戰總結】elementUI的el-table多頁面選checkbox回顯問題

關於el-table的多選，相信只要作過項目的朋友都會用過，這其中有一個坑，是很大機率會踩到的，就是第一頁選中了以後，切到第二頁選擇完以後，切換回第一頁發現第一頁選擇的不見了，怎麼辦？？？

這個坑，老實說不難，但因爲常常碰到，我總結了一下，大概由兩種方法。

1. 利用 reserve-selection與row-key結合

使用方法：

1）在表格加上屬性 :row-key="(row) => { return row.id }" row-key綁定一個函數，該函數返回每行數據的惟一標識

2）在多選的column標籤加上 :reserve-selection="true" 開啓

大功告成！是否是很快？

優勢：快捷簡單方便

缺點：1. elementUI的版本不能過低 2.某些需求沒法知足，好比先給你一組選中的數據

2. 萬能方法（本身手動實現）

實現思路：咱們將 已選中的數組 和 當前頁面的table數據 進行匹配，使用toggleSelection將選中的項變成選中狀態。

• 首先看看咱們須要什麼：

1.一個數組selected，用於存儲選中的項

2.咱們的操做分爲 單選中一個 / 取消選中一個 / 所有選中 / 全不選 四種狀況來改變selected數組

3.切換頁面時，經過調用某個函數，將selected數組和當前頁面數據對比，進行回顯

• 實現步驟

  

  1）綁定ref，@select方法，@select-all方法

/**
     * @description: 單選
     * @param row 行數據
     */
    handleSelect(selection, row) {
      // isExited判斷selected是否已經存在當前項
      let isExited = false 
      this.selected.forEach(item => {
        if(item.id === row.id) {
          isExited = true
        }
      })
      if (isExited) {
        // 若存在，表明操做是 取消選中
        this.handleDelItem(row)
      } else {
        // 反之，選中某項
        this.selected.push(row)
      }
    }
    
    /**
     * @description: 全選 or 全不選
     * @param selection 選中數據
     */
    handleSelectionAll(selection) {
      if (selection.length === 0) {
        // 如果全不選，則循環刪除selected數組中存在的項
        this.curTableData.forEach(item => {
          this.handleDelItem(item)
        })
      } else {
        // 全選，將selected和當前table數據合起來，注意去重！
        this.selected = this.unique(
          this.selected.concat(this.curTableData)
        )
      }
    }
    
    /**
     * @description: 刪除selected數組中某項數據
     * @param row 行數據
     */
    handleDelItem(row){
      let index = -1
      this.selected.forEach((item, idx) => {
        if(item.id === row.id) {
          index = idx
        }
      })
      if (index >= 0) {
        this.selected.splice(index, 1)
      }
    }
複製代碼

2.切換頁面時，調用 回顯 函數

// 當前頁面切換觸發回顯
    handleCurrentChange() {
      this.echo()
    }

    // 回顯
    echo() {
      let rows = []
      this.curTableData.forEach(row => {
        this.selected.forEach(item => {
          if (row.id === item.id) {
            rows.push(row)
          }
        })
      })
      this.toggleSelection(rows)
    }

    // el-table自帶方法
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable2.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable2.clearSelection();
      }
    }
複製代碼

大功告成！該方法： 優勢：適用於低版本element，能知足多選的任何需求。 缺點：代碼量增長不少，較第一種方法複雜。 .

.

.

若是還不懂能夠評論或私信我。

這篇文章對你有幫助，歡迎點贊，或者收藏！感謝閱讀，謝謝！