elementUI的el-table多頁(yè)面選checkbox回顯，拿到既可以使用

關(guān)于el-table的多選，相信只要做過項(xiàng)目的朋友都會(huì)用過，這其中有一個(gè)坑，是很大概率會(huì)踩到的，就是第一頁(yè)選中了之后，切到第二頁(yè)選擇完之后，切換回第一頁(yè)發(fā)現(xiàn)第一頁(yè)選擇的不見了，怎么辦？？？
這個(gè)坑，老實(shí)說不難，但由于經(jīng)常碰到，我總結(jié)了一下

1. 利用 reserve-selection與row-key結(jié)合
   使用方法：
   1）在表格加上屬性 :row-key="(row) => { return row.id }"
   row-key綁定一個(gè)函數(shù)，該函數(shù)返回每行數(shù)據(jù)的唯一標(biāo)識(shí)
   2）在多選的column標(biāo)簽加上 :reserve-selection=“true” 開啟
   大功告成！是不是很快？
   優(yōu)點(diǎn)：快捷簡(jiǎn)單方便
   缺點(diǎn)：1. elementUI的版本不能太低
   2.某些需求無法滿足，比如先給你一組選中的數(shù)據(jù)

2.選中數(shù)據(jù)后臺(tái)獲取回顯
1.獲取后臺(tái)數(shù)據(jù)

 // 調(diào)用列表表格
    getList (val) {
      this.loading = true
      api
        .quotedPriceAgentList({
          pageSize: this.size,
          pageNum: this.page,
          order: this.order,
          sort: this.sort,
          currencyName: this.formSearch.currencyName,
          name: this.formSearch.name,
          remark: this.formSearch.remark,
          id: val.rolesId,
          agentId: val.uid
        })
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.list
            this.total = res.data.total
            this.loading = false
            // 多選框回顯
            this.rowMultipleChecked(res.data.list)
          } else {
            this.$message({ type: 'error', message: res.msg })
          }
        })
    },

2.多選框回顯方法

rowMultipleChecked (data) {
      if (data.length) {
        this.$nextTick(function () {
          data.forEach(item => {
            // 如果數(shù)據(jù)中的bindingStatus === true的話 讓這一列選中
            if (item.bindingStatus === true) {
              // multipleTable 是這個(gè)表格的ref屬性 true為選中狀態(tài)
              this.$refs.multipleTable.toggleRowSelection(item, true)
            } else {
              this.$refs.multipleTable.toggleRowSelection(item, false)
            }
          })
        })
      }
    },

3.分頁(yè)調(diào)用回顯方法

    // 列表頁(yè)數(shù)事件
    handleChange (val) {
      this.size = val
      this.getList(this.row)
      // 多選框回顯
      this.rowMultipleChecked(this.tableData)
    },

大坑:

elementUI中el-table多選表格數(shù)據(jù)刪除后，再次刪除時(shí)復(fù)選框依舊是選中狀態(tài)
解決:查了文檔得出在清空之后所選數(shù)據(jù)之后要另外添加一句。dataTable是table用ref添加的名字。clearSelection()是elementUI內(nèi)部的方法
在刪除方法的最后添加一段代碼

 this.$refs.dataTable.clearSelection(); //清除之前的選中狀態(tài)