element表格合并

html代码如下：

  <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="amount1" label="数值 1（元）">
            </el-table-column>
            <el-table-column prop="amount2" label="数值 2（元）">
            </el-table-column>
            <el-table-column prop="amount3" label="数值 3（元）">
            </el-table-column>
</el-table>

js代码如下：

export default {
            data() {
                return {
                    tableData: [{
                        id: '12987122',
                        name: '王小虎',
                        amount1: '234',
                        amount2: '3.2',
                        amount3: 10
                    }, {
                        id: '12987124',
                        name: '王小虎',
                        amount1: '324',
                        amount2: '1.9',
                        amount3: 9
                    }, {
                        id: '12987124',
                        name: '王小虎',
                        amount1: '165',
                        amount2: '4.43',
                        amount3: 12
                    }, {
                        id: '12987125',
                        name: '王小虎',
                        amount1: '621',
                        amount2: '2.2',
                        amount3: 17
                    }, {
                        id: '12987126',
                        name: '王小虎1',
                        amount1: '539',
                        amount2: '4.1',
                        amount3: 15
                    }],
                    spanArr: []
                }
            },
            mounted() {
                this.rowspan();
            },
            methods: {
                rowspan() {
                    //每次调用清空数据
                    this.spanArr = [];
                    this.position = 0
                    this.tableData.forEach((item, index) => {
                        if (index === 0) {
                            this.spanArr.push(1);
                            this.position = 0;
                        } else {
                            // id 为需要合并查询的项
                            if (this.tableData[index].id === this.tableData[index - 1].id) {
                                this.spanArr[this.position] += 1;
                                this.spanArr.push(0);
                            } else {
                                this.spanArr.push(1);
                                this.position = index;
                            }
                        }
                    })
                },
                //合并
                objectSpanMethod({
                    row,
                    column,
                    rowIndex,
                    columnIndex
                }) { //表格合并行
                    // 添加合并行判断
                    if (columnIndex === 0) {
                        const _row = this.spanArr[rowIndex];
                        const _col = _row > 0 ? 1 : 0;
                        return {
                            rowspan: _row,
                            colspan: _col
                        }
                    }
                   
                },
            }
        }
        

修改objectSpanMethod下的columnIndex 判断，可以指定列来进行合并

ps：数据需要将需要处理的那一列进行排序，相同的放在一起