element中的table表格动态合并单元格

 现在table标签 添加   :span-method="arraySpanMethod"

data() {
    return {
      tableData: [],
      spanArr: [], //合并一级
      pos: 0, //合并一级索引
      dateArr: [], //合并二级
      dateIndex: 0, //合并二级索引
      deptArr: [], //合并三级
      deptIndex: 0, //合并三级索引
    };
  },

 methods: {
    getList() {
      var param = {
        avtId: this.$route.query.avtId,
      };
      getPropertyInfo(param).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
          this.merge(this.tableData);//初始化table表格
        }
      });
    },
    // 合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      const len = this.tableData.length;
      if (columnIndex === 0) {
        //第一列 一级
        const _row_1 = this.spanArr[rowIndex];
        const _col_1 = _row_1 > 0 ? 1 : 0;
        return {
          rowspan: _row_1,
          colspan: _col_1,
        };
      } else if (columnIndex === 1) {
        // 第二列 二级
        const _row_2 = this.dateArr[rowIndex];
        const _col_2 = _row_2 > 0 ? 1 : 0;
        return {
          rowspan: _row_2,
          colspan: _col_2,
        };
        // 第三列 三级
      } else if (columnIndex === 2) {
        const _row_3 = this.deptArr[rowIndex];
        const _col_3 = _row_3 > 0 ? 1 : 0;
        return {
          rowspan: _row_3,
          colspan: _col_3,
        };
      } else if (rowIndex === len) {
        return {
          rowspan: 1,
          colspan: 1,
        };
      }
    },
    // 初始化合并行数组
    mergeInit() {
      this.spanArr = []; //合并一级
      this.pos = 0; //合并一级索引
      this.dateArr = []; //合并二级
      this.dateIndex = 0; //合并二级索引
      this.deptArr = []; //合并三级
      this.deptIndex = 0; //合并三级索引
    },
    //  合并表格
    merge(data) {
      this.mergeInit();
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            //第一行必须存在，以第一行为基准
            this.spanArr.push(1); //合并一级
            this.pos = 0;

            this.dateArr.push(1); //合并二级
            this.dateIndex = 0;

            this.deptArr.push(1); //合并三级
            this.deptIndex = 0;
          } else {
            // 判断当前元素与上一元素是否相同
            // 合并一级
            if (data[i].pgiOneName == data[i - 1].pgiOneName) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }

            // 合并二级
            if (
              data[i].pgiTowName == data[i - 1].pgiTowName &&
              data[i].pgiOneName == data[i - 1].pgiOneName
            ) {
              this.dateArr[this.dateIndex] += 1;
              this.dateArr.push(0);
            } else {
              this.dateArr.push(1);
              this.dateIndex = i;
            }

            // 合并三级
            if (
              data[i].pgiName == data[i - 1].pgiName &&
              data[i].pgiTowName == data[i - 1].pgiTowName
            ) {
              this.deptArr[this.deptIndex] += 1;
              this.deptArr.push(0);
            } else {
              this.deptArr.push(1);
              this.deptIndex = i;
            }
          }
        }
      }
    },
  },

 根据element ui 的table单元格合并_核心代码div的博客-CSDN博客_element table 合并单元格elementUI的table表格实现单元格合并https://blog.csdn.net/weixin_46103180/article/details/124129010

这篇文章改编   如有侵权 联系我删除  谢谢