element ui表格相同数据合并单元格，通过cell-style、header-cell-style修改表格样式

效果

相同数据合并单元格

//1.给table传入span-method方法
   
       
       
       
       
       
      
        
      
    
//2.methods中定义objectSpanMethod和filterData用于合并单元格和处理数据
//filterData根据是否有相同数据返回一个如[2,0,3,0,0]格式的数组
    filterData(data, value) {
      let spanOneArr = [];
      let concatOne = 0;
      data.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          if (item[value] === data[index - 1][value]) {
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return spanOneArr;
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      // data ：需要修改的列数和列的属性 第一列从0开始
      const data = [
        { columnIndex: 0, value: "id" },
        { columnIndex: 1, value: "name" },
      ];
      for (let index = 0; index < data.length; index++) {
        if (columnIndex === data[index].columnIndex) {
          const _row = this.filterData(this.tableData, data[index].value)[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col,
          };
        }
      }
    },

 通过cell-style、header-cell-style修改表格样式

cell-style和header-cell-style都需要返回一个对象

//1.在标签中传入cell-style、header-cell-style
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
//2.在methods中定义cellStyle、headerCellStyle方法，返回一个对象
    // 设置表头列样式
    headerCellStyle({ row, rowIndex, columnIndex }) {
      if (columnIndex === 4) {
        return { borderRight: "0px" };
      }
    },
    // 设置除表头以外的列的样式
    cellStyle({ row, rowIndex, columnIndex }) {
      if (columnIndex === 4) {
        return { borderRight: "0px" };
      }
    },

完整代码实现

参考文章element ui表格相同内容自动合并 - 走看看