vue+element table 合并单元格(根据相同id)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
getData() {
    // 先给所有的数据都加一个v.rowspan = 1
    this_.yulanList.forEach((item) => {
        item.rowspan = 1;
    });
    // 双层循环
    for (let i = 0; i < this_.yulanList.length; i++) {
        // 内层循环,上面已经给所有的行都加了item.rowspan = 1
        // 这里进行判断
        // 如果当前行的CCOITEM_ID和下一行的CCOITEM_ID相等
        // 就把当前item.rowspan + 1
        // 下一行的item.rowspan - 1
        for (let j = i + 1; j < this_.yulanList.length; j++) {
            //此处可根据相同字段进行合并,此处是根据的id
            if (this_.yulanList[i].CCOITEM_ID === this_.yulanList[j].CCOITEM_ID) {
                this_.yulanList[i].rowspan++;
                this_.yulanList[j].rowspan--;
            }
        }
        // 这里跳过已经重复的数据
        i = i + this_.yulanList[i].rowspan - 1;
    }
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //第一列
    if (columnIndex === 0) {
        return {
            rowspan: row.rowspan,
            colspan: 1,
        };
    }
},
1
2
<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
</el-table>

官方文档:https://element.eleme.cn/#/zh-CN/component/table

   

 

 

 

 span-method

 

posted @   蓝色精灵jah  阅读(1241)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
点击右上角即可分享
微信分享提示