elementui表格自定义合并单元格根据相同值合并单元格；指定列合并；解决自定义合并后单元格样式错乱

elementui表格根据指定相同属性值合并单元格

 josn数据，id相同的单元格合并，前3column和后7column合并

1.  
   let arr = [
2.  
   {"op":"Susan","marketingID":"US","stockQty":208,"id":"1","labelSKU":"VPH-B0EA"},
3.  
   {"op":"Leon","marketingID":"IDWUS","stockQty":32,"id":"1","labelSKU":"VPH--OG"},
4.  
   {"op":"Amber","marketingID":"AMZ","stockQty":270,"id":"1","labelSKU":"BBT--00-GWFBA-1"},
5.  
   {"op":"Ginger","marketingID":"AMZ","stockQty":125,"id":"2","labelSKU":"CWB--RD-GWFBA-1"},
6.  
   {"op":"Emily","marketingID":"AMZ","stockQty":532,"id":"2","labelSKU":"FBT--US--1"},
7.  
   {"op":"Leon","marketingID":"IDWUS","stockQty":32,"id":"3","labelSKU":"VPH--OG"},
8.  
   {"op":"Susan","marketingID":"US","stockQty":208,"id":"4","labelSKU":"VPH--OG"},
9.  
   {"op":"Emily","marketingID":"AMZ","stockQty":508,"id":"5","labelSKU":"FBT---BNFBA-1"},
10.  
    {"op":"Chloe","marketingID":"US","stockQty":30,"id":"5","labelSKU":"SGO--00"},
11.  
    {"op":"Susan","marketingID":"US","stockQty":208,"id":"6","labelSKU":"VPH--OG"}
12.  
     
13.  
    ]

1.  
   // :span-method = "objectSpanMethod" 关键
2.  
   <el-table :span-method="objectSpanMethod"
3.  
   highlight-current-row
4.  
   :height="tableHeight"
5.  
   :data="PageListsData"
6.  
   ref="PageListstable">
7.  
   </el-table>
8.  
    
9.  
    
10.  
    data（） {
11.  
    spanArr:[]
12.  
    }
13.  
     
14.  
    // 方法 获取列表数据 根据id相同的合并单元格
15.  
    getDataList（）{
16.  
     
17.  
    // table 合并数据处理: id相同的合并单元格
18.  
    if (this.arr.length !== 0) {
19.  
    this.spanArr = [];
20.  
    let pos = 0;
21.  
    this.arr.forEach((item, index) => {
22.  
    if (index === 0) {
23.  
    this.spanArr.push(1);
24.  
    } else {
25.  
    if (item.id === this.arr[index - 1].id) {
26.  
    this.spanArr[pos] = 1;
27.  
    this.spanArr.push(0);
28.  
    } else {
29.  
    pos = index;
30.  
    this.spanArr.push(1);
31.  
    }
32.  
    }
33.  
    });
34.  
    }
35.  
     
36.  
    }
37.  
    // table 合并数据方法处理
38.  
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
39.  
    // id相同的合并单元格 前3行和7行之后
40.  
    if (!(columnIndex > 3 && columnIndex < 7)) {
41.  
    if(this.spanArr[rowIndex]) {
42.  
    return {
43.  
    rowspan: this.spanArr[rowIndex],
44.  
    colspan: 1
45.  
    };
46.  
    } else {
47.  
    // 解决合并单元格后样式错乱的关键！！！！
48.  
    return {
49.  
    rowspan: 0,
50.  
    colspan: 0
51.  
    };
52.  
    }
53.  
    }
54.  
    }

// 解决合并单元格后样式错乱的关键！！！！
                    return {
                        rowspan: 0,
                        colspan: 0
                    };

这篇好文章是转载于：学新通技术网