element 复合表格 el-table多行合并

关于工作中用到el-table表格中，相同数据合并得问题，在此记录一下，造个轮子

业务需求

1. 有重复得数据把表格合并起来

例如

表格代码

:data=“tableData” //data数据
:span-method=“objectSpanMethod” //表格合并得方法
:header-cell-style="{
‘background-color’: ‘#003F98’,
‘color’:’#FFF’,
‘opacity’: 0.7
}" //表头得样式

 <el-table
  :data="tableData"
    :span-method="objectSpanMethod"
    border=""
    stripe
    :header-cell-style="{
      'background-color': '#003F98',
      'color':'#FFF',
      'opacity': 0.7
    }"
    style="width: 100%; margin-top: 20px"
  >
    <el-table-column prop="id" label="类型" width="180"></el-table-column>
    <el-table-column prop="amount1" label="序号"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="amount2" label="状态"></el-table-column>
  </el-table>

表格得date数据

tableData: [
        {
          id: "女朋友",
          name: "王小虎",
          amount1: "1",
          amount2: "哈哈哈"
        },
        {
          id: "大朋友",
          name: "王小虎",
          amount1: "1",
          amount2: "哈哈哈"
        },
        {
          id: "大朋友",
          name: "王小虎",
          amount1: "2",
          amount2: "哈哈哈"
        },
        {
          id: "小朋友",
          name: "王小虎",
          amount1: "1",
          amount2: "哈哈哈"
        },
        {
          id: "小朋友",
          name: "王小虎",
          amount1: "2",
          amount2: "哈哈哈"
        },
      ],

表格的合并方法

getTableData() {
        let spanOneArr = [],
          spanTwoArr = [],
          concatOne = 0,
          concatTwo = 0;
        this.tableData.forEach((item, index) => {
          if (index === 0) {
            spanOneArr.push(1);
            spanTwoArr.push(1);
          } else {
            if (item.id === this.tableData[index - 1].id) { //第一列需合并相同内容的判断条件
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            } else {
              spanOneArr.push(1);
              concatOne = index;
            };
          }
        });
        return {
          one: spanOneArr,
          two: spanTwoArr
        }
      },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log( row, column, rowIndex, columnIndex )
      if (columnIndex === 0) {
       const _row = (this.getTableData(this.JZPFData).one)[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
      }
    },