element中表格合并单元格

最近要写一个如下图的项目,需要合并单元格

 

1
2
3
4
5
<el-table :data="list" border style="width: 1000px;"  :span-method="objectSpanMethod">
   <el-table-column align="center" prop="frist_name" :label="list[0].specName" ></el-table-column>
   <el-table-column align="center" prop="second_name" :label="list[0].specName1"></el-table-column>
   <el-table-column align="center" prop="price" label="价格"></el-table-column>              
</el-table>

  其中  objectSpanMethod方法是合并单元格的关键,以下代码需要赋值

    mergeObj:{},
              mergeCol:['frist_name'],
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
33
getSpanArr(list){
    this.mergeCol.forEach(key=>{
      let count=0//记了了起始位置
      this.mergeObj[key]=[];//记录每-列的合并信息
      list.forEach((item,index)=>{// index == 0表示数据为第一行,直接 push 一个 1
            if(index === 0){
                this.mergeObj[key].push(1)
            } else {
                // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1
                if(item[key]=== list[index-1][key]){
                    this.mergeObj[key][count] += 1;
                    this.mergeObj[key].push(0);
                } else {
                    // 如果当前行和上一行其值不相等
                    count = index;//记录当前位置
                    this.mergeObj[key].push(1);//重新push一个1
                }
            }
        })
    })
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if(this.specsList.length!=1){
            if(this.mergeCol.indexOf(column.property)!==-1){
                // 判断其值是否为0
                if(this.mergeObj[column.property][rowIndex]){
                    return[this.mergeObj[column.property][rowIndex],1]
                }else{
                    return[0,0]
                }
            }
        }
},

  

posted @   冰晨之露  阅读(9)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示