el-table动态合并行

span-method        合并行或列的计算方法

row-class-name    行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的                               className

table表格合并列，表头还是正常的书写，只是表格中的内容根据第一列相同的再进行合并，使得表格数据内容看起来更加清晰

第一步：HTML页面编写

第二步：下面是编写合并行的主要逻辑代码

data(){
    let count: any = 0 || null;
    let cellList: any = [];
    return{
        tableList:[{},{},{},...],
        cellList,
        count, // 计数
    }
},

mounted:{
    
},
methods: {
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
//上面是获取点击的当前行的数据的索引，以下才是合并行的主要方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // let cindexList = [0];
      // if (cindexList[0]=== 0) {
      if (columnIndex === 0) {
        const rowCell = this.cellList[rowIndex];
        const colCell = rowCell > 0 ? 1 : 0;
        if (rowCell > 0) {
          return {
            rowspan: rowCell,
            colspan: colCell,
          };
        } else {
          // 清除原有的单元格，必须要加，否则就会出现单元格会被横着挤到后面了！！！
          // 本例中数据是写死的不会出现，数据若是动态后端获取的，就会出现了！！！
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    getSummaries(param) {
      this.cellList = [];
      for (let i = 0; i < param.length; i++) {
        if (i == 0) {
          // 先设置第一项
          this.cellList.push(1); // 初为1，若下一项和此项相同，就往cellList数组中追加0
          this.count = 0; // 初始计数为0
          // console.log("索引", 0, this.count);
        } else {
          // 判断当前项与上项的class是否相同，如果是，合并这一列的单元格
          if (param[i].class=== param[i - 1].class) {
            // 如果相等
            this.cellList[this.count] += 1; // 增加计数
            this.cellList.push(0); // 相等就往cellList数组中追加0
            // console.log("索引", i, this.count);
          } else {
            this.cellList.push(1); // 不等就往cellList数组中追加1
            this.count = i; // 将索引赋值为计数
            // console.log("索引", i, this.count);
          }
        }
      }
    },
}