ElementUI之表格toggleRowSelection選中踩坑記錄

更新時(shí)間：2024年03月11日 10:38:06 作者：JACHJJ

這篇文章主要介紹了ElementUI之表格toggleRowSelection選中踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

ElementUI表格toggleRowSelection選中踩坑

問(wèn)題

toggleRowSelection選中不了

解決方法

this.$nextTick( ()=> {
})

問(wèn)題原因分析

在選中的時(shí)候，DOM渲染不及，導(dǎo)致無(wú)法選中；

el-table中使用toggleRowSelection方法注意點(diǎn)

1.UI界面

產(chǎn)品設(shè)計(jì)想實(shí)現(xiàn)左側(cè)選中的企微號(hào)列表數(shù)據(jù)在右側(cè)展示已選的企微號(hào)，這里分頁(yè)是記住分頁(yè)選中的(使用了row-key和reserve-selection屬性，這里就不多贅述了)。

在右側(cè)列表有清空按鈕就是清空右側(cè)已選的企微號(hào)，并且還原左側(cè)為未選狀態(tài)，這里方便實(shí)現(xiàn)使用了el-table組件中的clearSelection方法。
在右側(cè)列表的下面有一個(gè) x號(hào) 出掉這條數(shù)據(jù)的選中狀態(tài)，左側(cè)對(duì)應(yīng)的狀態(tài)為未選。使用了toggleRowSelection方法，操作看也沒(méi)用問(wèn)題，但若左側(cè)切換分頁(yè)再切換到對(duì)應(yīng)的選中的頁(yè)面，再操作右側(cè)的刪除按鈕，這里就出現(xiàn)了bug，對(duì)應(yīng)的數(shù)據(jù)不但沒(méi)有清除已選而且還追加一條數(shù)據(jù)。

2.代碼示例

附錄：在線(xiàn)代碼截圖，展示效果yyds 在線(xiàn)代碼截圖

3.代碼塊

代碼塊放上來(lái)，感覺(jué)也沒(méi)有什么用

	//選擇企微員工號(hào)
    handelOperationClick(val) {
      // this.selectOpeArr = val; // 選擇回調(diào)函數(shù)直接賦值給變量，不要watch監(jiān)聽(tīng)再存儲(chǔ)數(shù)據(jù)
      this.operationArrId = [];
      this.operationArrName = [];

      // console.log(val, val.length);
      this.chosenList = val;
      // this.chosenList = JSON.parse(JSON.stringify(val))
      this.chosenTotal = val.length;
    },

	//單個(gè)刪除
    handleByDel(row) {
      // this.chosenList.forEach((item, i) => {
      //   // if (item.mobile == row.mobile) {
      //   //   // return console.log(item);
      //   //   this.chosenList.splice(i, 1); //刪除下標(biāo)為i的元素
      //   //   return this.chosenList;
      //   // }

      //   if (item.id == row.id) {
      //     // return console.log(item);
      //     this.chosenList.splice(i, 1); //刪除下標(biāo)為i的元素
      //     this.$refs.moreTable.toggleRowSelection(row);
      //     return this.chosenList;
      //   }
      // });

      this.$refs.moreTable.selection.forEach((item, i) => {
        if (item.id == row.id) {
          this.$refs.moreTable.toggleRowSelection(item);
        }
      });
      /**
       * 使用el-table表格ref屬性調(diào)用selection獲取表格已選的,再操作toggleRowSelection方法
       * 這樣分頁(yè)再操作toggleRowSelection方法就不會(huì)出現(xiàn)多追加一條
       */
    },

4.解決辦法

使用el-table表格ref屬性調(diào)用selection獲取表格已選的,再操作toggleRowSelection方法，這樣分頁(yè)再操作toggleRowSelection方法就不會(huì)出現(xiàn)多追加一條。

代碼示例中開(kāi)始使用@selection-change監(jiān)聽(tīng)已選的數(shù)據(jù)，將其存儲(chǔ)變量this.chosenList，再操作toggleRowSelection方法出現(xiàn)左側(cè)分頁(yè)右側(cè)出現(xiàn)多追加一條數(shù)據(jù)。這里是分頁(yè)選中的數(shù)據(jù)和@selection-change監(jiān)聽(tīng)已選的數(shù)據(jù)指針地址不一致導(dǎo)致了。

也是看到網(wǎng)友博客里面這段方法寫(xiě)的，想試試的

console.info(this.$refs.multipleTable.tableData);
console.info(this.$refs.multipleTable);

打印了這個(gè)屬性發(fā)現(xiàn)了selection這個(gè)方法正是已經(jīng)選擇的左側(cè)列表，就想在這個(gè)屬性獲取的已選列表數(shù)據(jù)操作toggleRowSelection方法，試了看可以了，開(kāi)始看網(wǎng)上文檔找解決方法也沒(méi)有說(shuō)的，就記錄一篇文檔吧，今天上班有時(shí)間整理一下，哈哈。

這個(gè)方法實(shí)質(zhì)是分頁(yè)之后也獲取已選的列表數(shù)據(jù)，之前的那種方式是在左側(cè)已選的數(shù)據(jù)賦值給一個(gè)變量，當(dāng)在分頁(yè)這個(gè)地址和賦值變量this.chosenList的地址不一致了，這樣分頁(yè)再操作toggleRowSelection方法就出現(xiàn)多追加一條的問(wèn)題。