动态合并table单元格

// 获取数据
data(){
  return{
    tableDataList:[],
    total:0,
    spanArr:[], // 用于存放合并单元格的二维数组
    position:0 // 初始单元格的index
  }
},
methods:{
  getDemoData() {
    getDemoData(this.parmas).then(res => {
      if (res.code == 200) {
        this.tableDataList = res.data.records;
        this.total = res.data.total;
        this.rowspan(4, 'campsegSubTheme'); // 这里需要写明需要合并列的属性名，便于后面遍历数据
        this.rowspan(5, 'startMon');
      }
    })
  },
  rowspan(idx, prop) {
    this.spanArr[idx] = []; 
    this.position = 0;
    this.tableDataList.forEach((item, index) => {
      if (index === 0) { // 第一行数据一定是合并单元格的起始
        this.spanArr[idx].push(1);
        this.position = 0;
      } else { // 如果不是第一行的数据则判断是否和上一行相同
        // 如果表格下一行的数据与上一行相同
        if (this.tableDataList[index][prop] === this.tableDataList[index - 1][prop]) {
          this.spanArr[idx][this.position] += 1; // 合并单元格的数量+1
          this.spanArr[idx].push(0); 
        } else { // 如果表格下一行的数据与上一行不同
          this.spanArr[idx].push(1); // 则该位置不合并，单独为一个单元格
          this.position = index; // 记录当前位置
        }
      }
    })
  },
  //表格单元格合并
  getSpanMethod({ row, column, rowIndex, columnIndex }) {
    for (let i = 4; i < 6; i++) { 
      // 遍历spanArr数组，找到需要合并的列的属性名，此处两列为连续的两列，如果不连续，比如是第三列和第六列，则写为[2,5]，用foreach遍历即可
      if (columnIndex === i) {
        const spanRow = this.spanArr[i][rowIndex]; // 找到当前行需要合并的单元格的数量
        const spanCol = spanRow > 0 ? 1 : 0; // 如果需要合并，则为1，否则为0
        return {
          rowspan: spanRow, // 合并的单元格的数量
          colspan: spanCol // 合并的单元格的宽度
        }
      }
    }
  },
}