Vue Element框架的table进行多行合并

一、表格中只合并一处

 

 

 

 

 

 

 如上图所示，这里根据“仓库”进行合并，相同仓库的数据合并到一个仓库列中。

实现代码

tempelate：

 1  <el-table
 2       :data="dataList"
 3       :span-method="objectSpanMethod"
 4       size="mini"
 5       border
 6       highlight-current-row
 7       style="width: 100%; margin-top: 20px"
 8       @current-change="handleCurrentChange"
 9     >
10 </el-table>

ts:

 1   @Watch("dataList", { immediate: true })
 2   private onOrderOutLineIdChanged() {
 3     if (this.dataList.length > 0) {
 4       this.getSpanArr(this.dataList)
 5     }
 6   }
 7 
 8   private getSpanArr(data: any) {
 9     let pos = 0
10     for (let i = 0; i < data.length; i++) {
11       if (i === 0) {
12         this.spanArr.push(1)
13       } else {
14         // 判断当前元素与上一个元素是否相同
15         if (
16           data[i].storeId === data[i - 1].storeId &&
17           data[i].store.type === data[i - 1].store.type
18         ) {
19           this.spanArr[pos] += 1
20           this.spanArr.push(0)
21         } else {
22           this.spanArr.push(1)
23           pos = i
24         }
25       }
26     }
27   }
28 
29   private objectSpanMethod(data: any) {
30     if (this.dataList.length > 0) {
31       if (data.columnIndex === 0 || data.columnIndex === 1) {
32         const _row = this.spanArr[data.rowIndex]
33         const _col = _row > 0 ? 1 : 0
34         return {
35           rowspan: _row,
36           colspan: _col,
37         }
38       }
39     }
40   }

二、多处合并

 

 

 实现原理为再次写一个方法去判断第二处合并的信息，再在 “objectSpanMethod” 方法体内，通过判断在当前需要合并的列中进行ruturn即可。

代码为：

tempelate：

1 <el-table
2       :data="dataList"
3       :span-method="objectSpanMethod"
4       size="mini"
5       border
6       style="width: 100%; margin-top: 20px"
7     >
8 </el-table>

ts:

 1 private spanArr = new Array<number>()
 2  private storeTypespanArr = new Array<number>()
 3    
 4 
 5   @Watch("dataList", { immediate: true })
 6   private onOrderOutLineIdChanged() {
 7     if (this.dataList.length > 0) {
 8       this.getSpanArr(this.dataList)
 9       this.getSpanArrStoreType(this.dataList)
10     }
11   }
12 
13   private getSpanArr(data: any) {
14     let pos = 0
15     for (let i = 0; i < data.length; i++) {
16       if (i === 0) {
17         this.spanArr.push(1)
18       } else {
19         // 判断当前元素与上一个元素是否相同
20         if (
21           data[i].stockId === data[i - 1].stockId ||
22           data[i].stock.productName === data[i - 1].stock.productName ||
23           data[i].stock.description === data[i - 1].stock.description
24         ) {
25           this.spanArr[pos] += 1
26           this.spanArr.push(0)
27         } else {
28           this.spanArr.push(1)
29           pos = i
30         }
31       }
32     }
33   }
34 
35   private getSpanArrStoreType(data: any) {
36     let pos = 0
37     for (let i = 0; i < data.length; i++) {
38       if (i === 0) {
39         this.storeTypespanArr.push(1)
40       } else {
41         // 判断当前元素与上一个元素是否相同
42         if (
43           data[i].store.type === data[i - 1].store.type &&
44           (data[i].stockId === data[i - 1].stockId ||
45             data[i].stock.productName === data[i - 1].stock.productName ||
46             data[i].stock.description === data[i - 1].stock.description)
47         ) {
48           this.storeTypespanArr[pos] += 1
49           this.storeTypespanArr.push(0)
50         } else {
51           this.storeTypespanArr.push(1)
52           pos = i
53         }
54       }
55     }
56   }
57 
58   private objectSpanMethod(data: any) {
59     if (this.dataList.length > 0) {
60       if (data.columnIndex === 0 || data.columnIndex === 1) {
61         const _row = this.spanArr[data.rowIndex]
62         const _col = _row > 0 ? 1 : 0
63         return {
64           rowspan: _row,
65           colspan: _col,
66         }
67       }
68       if (data.columnIndex == 2) {
69         const _row = this.storeTypespanArr[data.rowIndex]
70         const _col = _row > 0 ? 1 : 0
71         return {
72           rowspan: _row,
73           colspan: _col,
74         }
75       }
76     }
77   }

注意：我这里控制两处合并的方法分开写了，自己写的时候可以合并到一个方法里写。懒得改了。

标签：Vue,spanArr,dataList,pos,private,Element,table,data,row
来源： https://www.cnblogs.com/wukankan/p/14413040.html