element-ui table的合并行/列

element-ui 官方文档：http://element-cn.eleme.io/#/zh-CN/component/table

官方给的文档是根据单双数来合并的，在实际调用数据的情况下，需要自己写方法

个人写法

table结构

<el-table :data="tableData" :span-method="objectSpanMethod">
  <el-table-column prop="name" label="name" ></el-table-column>
  <el-table-column prop="type" label="type" ></el-table-column>            
  <el-table-column prop="score" label="score" ></el-table-column>            
</el-table>   

table数据

根据name进行合并的话，最好相同数据相邻

tableData: [
  {name: '小王',type: '数学',score: 100},
  {name: '小王',type: '英语',score: 90},
  {name: '小王',type: '语文',score: 80},
  {name: '小钱',type: '数学',score: 70},
  {name: '小钱',type: '英语',score: 75},
  {name: '小李',type: '数学',score: 100},
]

table操作

methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //row 当前行数据、 column 当前列数据、 rowIndex 当前行号、 columnIndex 当前列号
      if (columnIndex === 0) {
      //需要合并第一列所以 columnIndex === 0 第二列 === 1 第三列 === 2 以此类推
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                rowspan: _row,
                colspan: _col
            }
      }
    },

    getSpanArr(data) {　
        for (var i = 0; i < data.length; i++) {
            if (i === 0) {
                this.spanArr.push(1);
                this.pos = 0
            } else {
            // 判断当前元素与上一个元素是否相同
                if (data[i].merchantId === data[i - 1].merchantId) {
                    this.spanArr[this.pos] += 1;
                    this.spanArr.push(0);
                } else {
                    this.spanArr.push(1);
                    this.pos = i;
                }
            }
        }
    }
}

watch: {
    tableData() {
        this.spanArr = [];
        this.getSpanArr(this.tableData);

    }
}