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 },
需要注意的是，每次添加都要重新计算需要合并的行数
