element-ui 樹形表格多選

如題element-ui 2.13.2版本支持樹形結構tabel，多層級折疊顯示

但是沒有多選 + 樹形tabel， 業務需求的情況下必須要實現，操作勾選數據編輯

這里我們可以用兩個事件來實現：

　　@select：用戶勾選某行觸發事件，第一個參數selection：所有選中的數據， 第二參數row：勾選的這行數據）

　　@select-all ： 表頭的全選、反選觸發事件，只有一個參數selection：所有選中的數據

1、多選的處理函數（文檔實例）：

toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
　　　　　　// toggleRowSelection有兩個參數，第一個是每個選中數據，第二個是點擊勾選的這行是否選中，樹形結構需要，不然子集選中，本身不給選中
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

2、現在再來處理多選和單選，調用 toggleSelection 即可

因為樹形結構的數據結構不符合選中數據格式，因此需要進行過濾處理

// 采用普通表格，然后進行樣式和交互處理
<el-table 
:data="tableData" 
ref="multipleTable" 
:row-class-name="tabelStyle"   // 處理折疊樣式 或者使用 ：row-style 注意函數返回的必須是Object
@select="rowSelect" 
@select-all="selectAll" 
align="center" 
border>
　  <el-table-column type="selection" width="55"></el-table-column>
　　<el-table-column prop="id" width="55">
　　　　<template slot-scope="scope">
　　　　　　<span @click="togglerShow(scope.row.id)>  // 折疊圖標和點擊控制
　　　　　　　　<i v-if="scope.row.children && scope.row.children.length" class="el-icon-arrow-right"></i>
　　　　　　　　<i v-else class="el-icon-arrow-down"></i>
　　　　　　</span>
　　　　　　<span>{{scope.row.id}}</span>
　　　　</template>
　　</el-table-column>

　　... 
</el-talbe>

// js
methods: {

　　 tabelStyle({row, rowIndex}) {

　　　　const show = row.show ? true : false

　　　　return show ? 'tr-show' : 'tr-hide'

　　},

 togglerShow(val) {
      this.tableData.map(item => { if (item.id=== val) { item.country= item.country+ ' ' // 預發不重新渲染數據 if (item.children && item.children.length) { item.expanded = !item.expanded } else { item.show = !item.show } } }) }

 }

 

　 // scss

　<style lang="scss">

　　.tr-show {

　　　　animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;

　　}

　　.tr-hide {

　　　　display:none;

　　}

　</style>

// 模擬數據源 
data = {
  list: [
    {
      "id": "11",
      "country": "Australia",
      "enable": "1",
　　　 "region_id": '11',
      "children": [
        {
          "id": "151",
          "country": "Capital",
　　　　　　"region_id": '11',
          "enable": "1"
        },
        {
          "id": "152",
          "country": "Territory",
　　　　　　"region_id": "11",
          "enable": "0",
        },
        {
          "id": "153",
          "country": "Northern Territory",
　　　　　　"region_id": "11",
          "enable": "0"
        },
        {
          "id": "154",
          "country": "Queensland",
　　　　　　"region_id": "11",
          "enable": "1"
        },
        {
          "id": "155",
          "country": "South Australia",
　　　　　　"region_id": '11',
          "enable": "1"
        }
      ]
    },
    {
      "id": "58",
      "country": "Austria",
　　　 "region_id": "12",
      "enable": "1"
    },
    {
      "id": "331",
      "country": "Azores",
　　　 "region_id": "13",
      "enable": "0"
    }
  ],
  message: "success",
  status: 200
}

 

簡單的template 結構和模擬的數據源差不多，如上所示，children 包裹分層級

3、過濾函數 filterSelect， 選中的多層級需要處理數據才能實現正確的交互，即將層級里面children的數據依次取出來，組成數組 tableData， 即渲染的數據源

data() {
    return {
        tableData: [],
        level: 1
    }
}
// methods 中獲取到的數據源要經過這層過濾處理
filterSelect(data) {
  data.forEach(item => {
    item.level = String(this.level)  // 層級
    item.show = this.level === 1 ? true : false  // 判斷是否折疊
    item.isChecked = false;  // 判斷是否勾選重要參數

    this.tableData.push(item)  // 收集過濾后的數據，將children數據全部取出來
    if (item.children && item.children.length > 0) {
      item.expanded = true // 頂層下有折疊
      item.show = true  // 頂層顯示
      this.level++
      this.recursionArr(item.children)
    }
  });
}

 

4、實現符合邏輯的勾選交互

表頭全選函數:

selectAll(selection) {  // selection 是選中的數據集合

　　this.tableData.map(item => {

　　　　item.isChecked = !item.isChecked  // 處理每條數據isChecked 選擇狀態

　　})

}

單行（多層級，目前只做了二級）全選、單選：

rowSelect(selection, row) {
      let changeArr = []
      if (row.level === '1') {
        if (row.isChecked) {
          selection.map(item => {
            if (row.region_id !== item.region_id) {
              changeArr.push(item)
            } else {
              this.$refs.multipleTable.toggleRowSelection(item)
            }
          })
        } else {
          this.tableData.map((item,index) => {
            if (row.region_id === item.region_id) {
              changeArr.push(item)
            }
          })
          changeArr = changeArr.concat(selection)
        }

      } else if (row.level === '2') {
        changeArr = selection
        if (!row.isChecked) {
          this.tableData.map(item => {
            if (row.region_id === item.region_id && item.level === '1') {
              changeArr.push(item)
            }
          })
        }
      }

      changeArr = [...new Set(changeArr)]   // 去重
       
      // 更新isChecked 狀態
      this.tableData.map(item => {
        if (item.id === row.id) {
          item.isChecked = !item.isChecked
        }
      })

      // 正反選
      if (changeArr.length) {
        this.toggleSelection(changeArr)
      } else {
        // 清除所有
        this.$refs.multipleTable.clearSelection();
      }
    }    

 

以上就可以實現多選樹形結構的操控

注： 如有需要參考的，請注意源數據模型和template結構中的參數配置，全選（多層級）、單選、過濾這三個函數，注意里面的數據源變量名this.tableData，目前多選、單選只做了兩層級，有興趣的同學可以補充完整