Vue merge cell merge – multiple columns

A. Multiple column merge

1. Add: spAN-method =”objectSpanMethod” to the el-table to control merging cells, as shown below

2. Merge code, each column must set a different key, this can prevent the same contents in the merge cause error problems

objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (this.myObj[row.channel_type].start === rowIndex) { return { rowspan: this.myObj[row.channel_type].step, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; } } if (columnIndex === 1) { if ( this.myObj_two[row.channel_name_chinese + row.channel_type].start === rowIndex ) { return { rowspan: this.myObj_two[row.channel_name_chinese + row.channel_type] .step, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; ResolveData (arr) {var obj = {}; arr.forEach((val, key) => { if (! obj[val.channel_type]) { obj[val.channel_type] = { start: key, step: 1 }; } else { obj[val.channel_type].step++; }}); this.myObj = obj; console.log(obj); ResolveData_two (arr) {var obj = {}; arr.forEach((val, key) => { if (! obj[val.channel_name_chinese + val.channel_type]) { obj[val.channel_name_chinese + val.channel_type] = { start: key, step: 1 }; } else { obj[val.channel_name_chinese + val.channel_type].step++; }}); this.myObj_two = obj; console.log(this.myObj_two, "this.myObj"); },Copy the code

3. You need to call the following two functions, data is all the data you get

	 this.resolveData_two(data);
         this.resolveData(data);
Copy the code

4. The following figure shows the merge result