前言：

寫(xiě)這個(gè)是因?yàn)閹团笥研薷捻?xiàng)目中的bug
我也是第一次寫(xiě)這個(gè)功能，有不對(duì)的希望大家指正，如果看完有幫助點(diǎn)個(gè)贊！
代碼中關(guān)鍵是js中Tree的路徑查找這個(gè)核心，有不懂的自行百度
多了不說(shuō)了，有需要的可以私信找我要代碼，來(lái)看下我怎么實(shí)現(xiàn)的

思路：

從頭開(kāi)始看這個(gè)需求，我們需要知道用到哪寫(xiě)東西

1、表格Table
2、多選&全選
3、嵌套數(shù)據(jù)（下拉操作）

正好我們可以找下ElementUI官方文檔

找到了我們需要用到的API

• 在嵌套數(shù)據(jù)的時(shí)候需要使用tree-props
• 選中數(shù)據(jù)的時(shí)候使用toggleRowSelection

基本就以上這些能用到的可以開(kāi)搞了

實(shí)現(xiàn)：

基于以上我們可以寫(xiě)出HTML結(jié)構(gòu)

<template>
 <div>
  <el-table
   ref="multipleTable"
   :data="tableData"
   style="width: 100%; margin-bottom: 20px"
   row-key="id"
   border
   default-expand-all
   :select-on-indeterminate="true"
   :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
   @select="rowSelect"
   @select-all="selectAll"
  >
   <el-table-column type="selection" width="55"> </el-table-column>
   <el-table-column prop="date" label="日期" width="180"> </el-table-column>
   <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
   <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
 </div>
</template>

表格的多選我可以分為2項(xiàng)目，1個(gè)是正向選中，意思就是checkout為true的時(shí)候，2是反向取消就是checkout為false的時(shí)候，那下面我就來(lái)分析下這個(gè)正向選中和反向取消如何實(shí)現(xiàn)

一、正向選中

假設(shè)我有這樣的數(shù)據(jù)
以下面圖1片為例：
    在點(diǎn)擊子節(jié)點(diǎn)的時(shí)候我們需要把子節(jié)點(diǎn)的父節(jié)點(diǎn)和跟節(jié)點(diǎn)同時(shí)進(jìn)行選中處理
    跟節(jié)點(diǎn)-父節(jié)點(diǎn)-子節(jié)點(diǎn)
    圖2是我data中聲明的數(shù)據(jù)，數(shù)據(jù)中包含isChecked是否被選中和children是否有子節(jié)點(diǎn)

現(xiàn)在我們正向選中思路明確了那我們?cè)趺磥?lái)實(shí)現(xiàn)？

當(dāng)我點(diǎn)擊子節(jié)點(diǎn)時(shí)候需要記錄子節(jié)點(diǎn)的父節(jié)點(diǎn)一直到跟節(jié)點(diǎn)，那我們就用到了Tree樹(shù)的概念

下面代碼用到了樹(shù)的回溯的思想，查找路徑使用先序遍歷，因?yàn)槟悴淮_定你點(diǎn)擊的是子節(jié)點(diǎn)是在哪個(gè)子樹(shù)上，
具體的Tree方法思想請(qǐng)百度一下；

treeFindPath(tree, func, path = []) {
   if (!tree) return [];
   for (const data of tree) {
    path.push(data);
    if (func(data)) return path;
    if (data.children) {
     const findChildren = this.treeFindPath(data.children, func, path);
     if (findChildren.length) return findChildren;
    }
    path.pop();
   }
   return [];
  },

通過(guò)上面這段代碼我們調(diào)用的時(shí)候傳節(jié)點(diǎn)的id會(huì)返回一個(gè)數(shù)組，數(shù)組包含它所在路徑上的對(duì)象，這樣我們就可以通過(guò)循環(huán)遍歷這個(gè)數(shù)組通過(guò)toggleRowSelection反法來(lái)實(shí)現(xiàn)頁(yè)面狀態(tài)樣式的改變。

二、反向取消

反向取消正好和選中相反
在點(diǎn)擊子節(jié)點(diǎn)取消的時(shí)候我們需要判斷同級(jí)的節(jié)點(diǎn)是不是都取消了，如果都取消了需要把這個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)改為取消狀態(tài)，之后再查其父節(jié)點(diǎn)同級(jí)是否都是取消狀態(tài)，如果還有取消狀態(tài)，同理跟剛才方式一樣接著向其上級(jí)節(jié)點(diǎn)查找直到不滿(mǎn)足條件為止，跳出循環(huán)。

簡(jiǎn)單的來(lái)個(gè)示意圖

在點(diǎn)擊4節(jié)點(diǎn)時(shí)，會(huì)查看同級(jí)節(jié)點(diǎn)5和6是否是取消狀態(tài)，如果都是取消狀態(tài)，查他們的上一級(jí)2，把2改為false，在查2的同級(jí)3是否是取消如果是取消在查1
如果同級(jí)有選中狀態(tài)會(huì)直接跳出循環(huán)不進(jìn)行下一步操作

下面是取消選中代碼

還是用Tree的代碼，把獲取的數(shù)組reverse()進(jìn)行了翻轉(zhuǎn)
第一次循環(huán)從點(diǎn)擊那個(gè)節(jié)點(diǎn)網(wǎng)上查找
這里使用for循環(huán)如果不滿(mǎn)足直接終止后面循環(huán)

三、全選

這里我感覺(jué)寫(xiě)的比較啰嗦，
全選時(shí)候我會(huì)先通過(guò)數(shù)據(jù)中isChecked來(lái)遞歸判斷是否有沒(méi)有選中的
如果有沒(méi)有選中會(huì)遞歸執(zhí)行把所有數(shù)據(jù)中的isChecked變?yōu)閠rue，如果都選中了，會(huì)遞歸修改為false，

下面是全選的所有代碼

  /**
   * @describe 全選
   */
  selectAll(selection) {
   console.log(selection);
   let isAllCheck = this.selectAllRecursion(this.tableData);
   // 是否有aa為false代表是有沒(méi)選中
   this.checkoutAll(this.tableData, !isAllCheck);
  },
  /**
   * @describe 遞歸判斷isChecked是否都是true,false代表是有沒(méi)選中
   */
  selectAllRecursion(arr) {
   let isCheck = true;
   function isRecursion(arr) {
    arr.forEach((item) => {
     if (!item.isChecked) {
      isCheck = false;
      if (item.children) {
       isRecursion(item.children);
      }
     }
    });
   }
   isRecursion(arr);
   return isCheck;
  },
  /**
   * @describe 把所有的夠改為true或者false
   */
  checkoutAll(arr, boole) {
   var _this = this;
   function allCheck(arr, boole) {
    arr.forEach((item) => {
     item.isChecked = boole;
     _this.$refs.multipleTable.toggleRowSelection(item, boole);
     if (item.children) {
      allCheck(item.children, boole);
     }
    });
   }
   allCheck(arr, boole);
  },

END：

基本代碼就以上這些，不包含表格分頁(yè)功能

到此這篇關(guān)于基于ElementUI中Table嵌套實(shí)現(xiàn)多選的示例代碼的文章就介紹到這了,更多相關(guān)ElementUI Table嵌套多選內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論