element表格动态行合并

浅浅的花香味﹌ 2022-12-07 11:38 353阅读 0赞

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代码如下：

new Vue({
                el: '#page',
                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
                            }
                        }
                       
                    },
                }
            })

效果如下：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70][]

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70]: /images/20221123/b215ed23edd343ffbfa91837b5074a2e.png