element合并树状表格

需求：element合并树状表格，相同区域id合并，展开还有下一级

返回数据结构

[{id:'0',name:'项目',children:[
{id:'1',name:'项目1'children:[……]},
{id:'2',name:'项目2'，code:'5'
children:[{id:'23',name:'项目2.1',code:'4'}]}
{id:'2',name:'项目2',code:'2'},
{id:'2',name:'项目3',code:'2'}]}]

为了让项目2合并并能展开，项目2的下一级children应放在最后一条合并的单元格下面

{id:'2',name:'项目2'，code:'5'}
{id:'2',name:'项目2',code:'2'，children:[{id:'23',name:'项目2.1',code:'4'}]},//children放在这里
{id:'2',name:'项目3',code:'2'}

处理

  getData(data) {
      for (let i in data) {
        let j = Number(i) + 1;
        if (data[j]) {
          if (data[i].children && data[i].children.length) {
            if (data[i].name== data[j].name) {//判断name是否相同
              let arr = JSON.parse(JSON.stringify(data[i]));
              let arr2 = JSON.parse(JSON.stringify(data[j]));
              data[i] = arr2;
              data[i].hasChild = true; //用于展开标识，合并数组的第一个可以展开
              data[j] = arr;//交换位置
            }
            this.getData(data[i].children);
          }
        }
      }
      return data;
    },

表格合并方法

 /** 合并方法 */
    SpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let _row = this.spanArr[rowIndex] ? this.spanArr[rowIndex] : 0;
        return {
          rowspan: _row,
          colspan: 1,
        };
      }
    },
//spanArr合并数组
 /** 合并列数的方法 */
    setdates(arr) {
      this.spanArr = [];
      var obj = {},
        k;
      for (var i = 0, len = arr.length; i < len; i++) {
        k = arr[i].name;
        if (obj[k]) obj[k]++;
        else obj[k] = 1;
      }
      //保存结果{el-'元素'，count-出现次数}
      for (var o in obj) {
        if (o == "undefined") {
          this.spanArr.push(0); // 0代表不合并
        } else {
          for (let i = 0; i < obj[o]; i++) {
            if (i === 0) {
              this.spanArr.push(obj[o]);
            } else {
              this.spanArr.push(0); // 0代表不合并
            }
          }
        }
      }
    },
   //arr获取，data为原始数组，遍历转成一维数组
     setArr(data, arr) {
      data.forEach((item, index) => {
        arr.push(item);
        if (item.children) {
          this.setArr(item.children, arr);
        }
      });
      return arr;
    },

在template里单独设置第一列样式

       <el-table-column label="区域" key="name" prop="name" show-overflow-tooltip>
            <template v-slot="{ row }"><div v-if="row.hasChild" style="text-align: left; padding-left: 10px" >
            <span  v-if="row.hasChild"  class="arrow-icon" @click="toggleRowExpansion(row)" >//加一个自带的切换方法，否则不能展开
         <i :class="row.isExpand ? 'el-icon-arrow-down': 'el-icon-arrow-right' "/> </span>
             <span>{{ row.name }}</span> </div>
             <span v-else>{{ row.name }}</span></template>
          </el-table-column>

自带表格切换/展开方法

  toggleRowExpansion(row) {
      row.isExpand = !row.isExpand;
      let rowList = this.getRowList(row, this.tableData);
      const expansionRow = rowList[rowList.length - 1];
      this.$refs.detailTable &&
        this.$refs.detailTable.toggleRowExpansion(expansionRow, row.isExpand);
    },
    // 获取点击层级同编码name所有数据数组
    getRowList(row, list) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].id === row.id)
          return list.filter(
            (item) => item.name === row.name
          );
        if (list[i].children && list[i].children.length) {
          let res = this.getRowList(row, list[i].children);
          if (res) return res;
        }
      }
      return false;
    },

需要多加一些处理，确实有点麻烦，希望有更方便可以直接实现的组件