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

效果如图所

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

直接上代码

 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     },

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

原文地址：https://www.cnblogs.com/ImmortalWang/p/11351080.html