elementui table 第一列内容相同 自动合并单元格 el-table第一列内容相同自动合并

template( :span-method=“objectSpanMethod”)

<!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 80%; margin: 20px"
      :header-cell-style="{background: '#F8F8F8', height: '40px', padding: '0', color: '#333333'}"
      border
      :span-method="objectSpanMethod"

  >
      <el-table-column align="center" header-align="center" :show-overflow-tooltip="true" width="100" >
        <template slot-scope="scope">
          {{ scope.row.index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="subjects" label="费用科目" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="classType" label="分类" align="center" header-align="center" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column prop="price" label="金额" align="center" header-align="center" :show-overflow-tooltip="true" ></el-table-column>
  </el-table>

data数据结构

return{
      tableData:[{
        index:0,
        subjects:'一次性就废',
        price:'1,200.00元'
      },{
        index:1,
        subjects:'医疗备用金',
        price:'1,200.00元'
      },{
        index:2,
        subjects:'试住费',
        price:'1,200.00元'
      },{
        index:3,
        subjects:'餐费',
        classType: '餐费（长者+保姆）',
        price:'1,200.00元'
      },{
        index:4,
        subjects:'餐费',
        classType: '餐费（长者）',
        price:'1,200.00元'
      }]
    }

methods方法

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