el-table 合并单元格

1.dom el-table添加方法

:span-method="objectSpanMethod"

2.data数据

//合并表格
columnArr: ['sheetCode', 'sheetName', 'sheetUnit', 'sheetAmout', 'sheetUnitPriceWithRax', 'sheetTotalPriceWithRax', 'sheetTotalPrice', 'relateStatus'],
spanData: []

3.实现方法

 1 getList () {
 2       this.loading = true;
 3       listData(this.queryParams).then(res => {
 4         const list = res
 5         //对数据分组,先根据第一列分组,在对每一组中的数据根据第二列分组,将分组后的数据在按顺序放到一个新的数组中
 6         let result = [];
 7         const xhGroupData = orderBy(map(groupBy(list, "indexNum"), (item, key) => {
 8           return {
 9             indexNum: key,
10             index: item[0].index,
11             value: item
12           };
13         }), 'index');
14         // console.log('111', xhGroupData)
15 
16         for (const data of xhGroupData) {
17           const gcxmGroupData = groupBy(data.value, 'projectName');
18           for (const gcxm in gcxmGroupData) {
19             const item = gcxmGroupData[gcxm];
20             result = [...result, ...item]
21           }
22         }
23         this.getSpanData(result);
24 
25         this.pdbListOfBiddingInfoList = result;
26         this.loading = false;
27       });
28     },
29     // 计算需要合并的单元格
30     getSpanData (data) {
31       if (!data || data.length === 0 || !this.columnArr || this.columnArr.length === 0) {
32         return;
33       }
34       this.spanData = [];
35       for (let i = 0; i < this.columnArr.length; i++) {
36         let contactDot = 0;
37         const spanArr = [];
38         data.forEach((item, index) => {
39           // console.log(item)
40           if (index === 0) {
41             spanArr.push(1);
42           } else {
43             const isMergeRow = this.isMerge(data[index - 1], item, i);
44             if (isMergeRow) {
45               spanArr[contactDot] += 1;
46               spanArr.push(0);
47             } else {
48               contactDot = index;
49               spanArr.push(1);
50             }
51           }
52         });
53         this.spanData.push(spanArr);
54       }
55 
56       // console.log(this.spanData)
57     },
58     // 是否合并
59     isMerge (prevItem, item, index) {
60       let ret = true;
61       for (let i = 0; i <= index; i++) {
62         const element = this.columnArr[i];
63         if (item[element] !== prevItem[element]) {
64           ret = false;
65           break;
66         }
67       }
68       return ret;
69     },
70     // 合并单元格
71     objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
72       if (this.columnArr.includes(column.property)) {
73         const index = this.columnArr.findIndex((item) => { return item == column.property })
74         if (this.spanData[index]) {
75           if (this.spanData[index][rowIndex]) {
76             return {
77               rowspan: this.spanData[index][rowIndex],
78               colspan: 1,
79             };
80           } else {
81             return {
82               rowspan: 0,
83               colspan: 0,
84             };
85           }
86         }
87       }
88     },