element-ui table 合并列

效果：点击第一列的某一项，展开第二列；点击第二列的某一项，展开第三四列

<template>
  <div>
    <h1>动态表格</h1>
    <div class="two-table">
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="id" label="ID" width="180">
          <template slot-scope="scope">
            <a href="#" @click="cancelDialog(scope.row)" style="color:blue;cursor:pointer">{{scope.row.id}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名">
          <template slot-scope="scope">
            <a v-if="scope.row.nameFlag == 1" href="#" @click="addSecondDialog(scope.row)" style="color:blue;cursor:pointer">{{scope.row.name}}</a>
            <div v-if="scope.row.nameFlag != 1" >{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="amount1" label="数值 1（元）"></el-table-column>
        <el-table-column prop="amount2" label="数值 2（元）"></el-table-column>
        <el-table-column prop="amount3" label="数值 3（元）"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>export default {
  data() {
    return {
      // 当前行是否已展开
      containsId: [],
      containsIdAndName: [],
      addData: [
        {
          id: "12987122",
          name: "王大虎第二级1",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987122",
          name: "王大虎第二级2",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
      ],
      addSecondData: [
        {
          id: "12987122",
          name: "王大虎111111111",
          amount1: "111",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987122",
          name: "王大虎1",
          amount1: "222",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987122",
          name: "王大虎1",
          amount1: "333",
          amount2: "3.2",
          amount3: 10,
        }
      ],

      // 模拟后台返回数据
      tableData: [
        {
          id: "12987122",
          name: "王大虎1",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "129871221",
          name: "王大虎2",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "129871222",
          name: "王二虎3",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987123",
          name: "王二虎4",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987124",
          name: "王小虎5",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987125",
          name: "王小虎6",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
      ],
      // 需要合并项的列
      needMergeArr: [
        {
          colName: "id",
          mergeCheckNames: ["id"],
        },
        {
          colName: "name",
          // mergeCheckNames: ["id", "name"],
          mergeCheckNames: ["id", "name"],
        },
      ],
      rowMergeArrs: {}, // 包含需要一个或多个合并项信息的对象
    };
  },
  methods: {
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      let needMerge = this.needMergeArr.some((item) => {
        return item.colName === column.property;
      });
      if (needMerge === true) {
        return this.mergeAction(column.property, rowIndex, column);
      }
    },
    mergeAction(val, rowIndex, colData) {
      let _row = this.rowMergeArrs[val].rowArr[rowIndex];
      let _col = _row > 0 ? 1 : 0;
      return [_row, _col];
    },
    rowMergeHandle(arr, data) {
      if (!Array.isArray(arr) && !arr.length) return false;
      if (!Array.isArray(data) && !data.length) return false;
      let needMerge = {};

      arr.forEach((mergeItem) => {
        // 创建合并管理对象
        needMerge[mergeItem.colName] = {
          rowArr: [],
          rowMergeNum: 0,
        };
        let currentMergeItemData = needMerge[mergeItem.colName];

        // 进行合并管理对象数据的遍历整理
        data.forEach((item, index) => {
          if (index === 0) {
            currentMergeItemData.rowArr.push(1);
            currentMergeItemData.rowMergeNum = 0;
          } else {
            let currentRowData = data[index];
            let preRowData = data[index - 1];

            if (this.colMergeCheck(currentRowData, preRowData, mergeItem.mergeCheckNames)) {
              currentMergeItemData.rowArr[currentMergeItemData.rowMergeNum] += 1;
              currentMergeItemData.rowArr.push(0);
            } else {
              currentMergeItemData.rowArr.push(1);
              currentMergeItemData.rowMergeNum = index;
            }
          }
        });
      });
      return needMerge;
    },
    colMergeCheck(currentRowData, preRowData, mergeCheckNames) {
      if (!Array.isArray(mergeCheckNames) && !mergeCheckNames.length) return false;
      let result = true;
      for (let index = 0; index < mergeCheckNames.length; index++) {
        const mergeCheckName = mergeCheckNames[index];
        if (currentRowData[mergeCheckName] !== preRowData[mergeCheckName]) {
          result = false;
          break;
        }
      }
      return result;
    },
    //单元格整行点击事件
    cancelDialog (row) {
      debugger

      // 当前行已展开,不在执行
      if (this.containsId.includes(row.id)) {
        return;
      }
      // 模拟后端接口返回数据
      // this.addData
      for (let i = 0; i < this.tableData.length; i++) {
        if (row.id == this.tableData[i].id) {
          for (let j = 0; j < this.addData.length; j++) {
            var data = {};
            Object.assign(data, this.addData[j])
            data.id = row.id;
            data.nameFlag = 1;
            this.tableData.splice(i+1, 0,
              data);
          }
          this.containsId.push(row.id);
          break;
        }
      }
      // 处理数据,如有分页需要，此行放在加载数据成功之后
      this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);
    },
    // 第二级点击
    addSecondDialog (row) {
      debugger

      // 当前行已展开,不在执行
      if (this.containsIdAndName.includes(row.id + row.name + "")) {
        return;
      }

      // 模拟后端接口返回数据
      // this.addData
      for (let i = 0; i < this.tableData.length; i++) {
        if (row.id == this.tableData[i].id && row.name == this.tableData[i].name) {
          for (let j = 0; j < this.addSecondData.length; j++) {
            var data = {};
            Object.assign(data, this.addSecondData[j])
            data.name = row.name;
            this.tableData.splice(i+1, 0,
              data);
          }
          this.containsIdAndName.push(row.id + row.name + "");
          break;
        }
      }
      // 处理数据,如有分页需要，此行放在加载数据成功之后
      this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);
    },
  },
  mounted() {
    // 处理数据,如有分页需要，此行放在加载数据成功之后
    this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);
  },
};
</script>