Element Table 动态合并 添加整行数据

Posted 2022-07-12 immortalwang

效果如图所

添加整行数据，前面几列还是合并状态

直接上代码

 1 // 获取列表， 
 2     getTableDataList() 
 3       this.tableData3 = [
 4         
 5           all: "a1",
 6           name: "名字1",
 7           value1: "b1",
 8           value2: 1,
 9           value3: "2017年-10月"
10         ,
11         
12           all: "a1",
13           name: "名字2",
14           value1: "b2",
15           value2: "2",
16           value3: "2017年-10月"
17         ,
18       ]
19       this.getSpanArr(this.tableData3);
20       this.getSpanArrOne(this.tableData3);
21     ,
22     //前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性
23     cellMerge( row, column, rowIndex, columnIndex ) 
24       let length = this.tableData3.length;
25       //第0列比较特殊，单独合并
26       if (columnIndex === 0) 
27         const _row = this.spanArrOne[rowIndex];
28         const _col = _row > 0 ? 1 : 0;
29         return 
30           rowspan: _row,
31           colspan: _col
32         ;
33       
34       //1 2列进行合并
35       if (columnIndex === 1 || columnIndex === 2) 
36         const _row = this.spanArr[rowIndex];
37         const _col = _row > 0 ? 1 : 0;
38         return 
39           rowspan: _row,
40           colspan: _col
41         ;
42       
43     ,
44     //1 2 列合并的数据
45     getSpanArr(data) 
46       this.spanArr = []
47       for (var i = 0; i < data.length; i++) 
48         if (i === 0) 
49           this.spanArr.push(1);
50           this.pos = 0;
51          else 
52           // 判断当前元素与上一个元素是否相同
53           if (data[i].name === data[i - 1].name) 
54             this.spanArr[this.pos] += 1; //需要合并的行数
55             this.spanArr.push(0); //新增被合并的行
56            else 
57             this.spanArr.push(1);
58             this.pos = i; //新的需要合并的第几行数
59           
60         
61       
62     ,
63     //0列合并的数据
64     getSpanArrOne(data) 
65       this.spanArrOne = []
66       for (var i = 0; i < data.length; i++) 
67         if (i === 0) 
68           this.spanArrOne.push(1);
69           this.posOne = 0;
70          else 
71           this.spanArrOne[this.posOne] += 1; //需要合并的行数
72           this.spanArrOne.push(0); //新增被合并的行
73         
74       
75     ,
76     // 添加整行
77     addRow(index,row)
78       this.tableData3.splice(index+1,0,row)
79       this.getSpanArr(this.tableData3);
80       this.getSpanArrOne(this.tableData3);
81     ,

需要注意的是，每次添加都要重新计算需要合并的行数