java单元格合并多列_ElementUI表格列相同值自动合并单元格( 多列 )

上篇文章写了如何在处理单列相同数据时让相同的项进行自动合并, 如果有多列合并的需求我们也应该可以从容应对...

(产品: 你们看我干嘛?)

废话不多说 上代码

HTML

JS

var Main = {

data() {

return {

tableData6: [{

name: '部门1',

type: 0,

amount1: '跟单员1',

amount2: '成衣工厂1',

amount3: 10

}, {

name: '部门1',

type: 0,

amount1: '跟单员1',

amount2: '成衣工厂2',

amount3: 12

}, {

name: '部门1',

type: 0,

amount1: '跟单员1',

amount2: '成衣工厂3',

amount3: 9

}, {

name: '部门1',

type: 0,

amount1: '跟单员2',

amount2: '成衣工厂1',

amount3: 17

}, {

name: '部门1',

type: 0,

amount1: '跟单员2',

amount2: '成衣工厂2',

amount3: 15

},{

name: '部门1',

type: 0,

amount1: '跟单员2',

amount2: '成衣工厂3',

amount3: 10

}, {

name: '部门1总计',

type: 1,

amount1: '部门1跟单员',

amount2: '',

amount3: 12

},{

name: '部门2',

type: 0,

amount1: '跟单员3',

amount2: '成衣工厂1',

amount3: 10

}, {

name: '部门2',

type: 0,

amount1: '跟单员3',

amount2: '成衣工厂2',

amount3: 12

}, {

name: '部门2',

type: 0,

amount1: '跟单员3',

amount2: '成衣工厂3',

amount3: 9

}, {

name: '部门2',

type: 0,

amount1: '跟单员3',

amount2: '成衣工厂1',

amount3: 17

}, {

name: '部门2',

type: 0,

amount1: '跟单员4',

amount2: '成衣工厂2',

amount3: 15

},{

name: '部门2',

type: 0,

amount1: '跟单员4',

amount2: '成衣工厂3',

amount3: 10

}, {

name: '部门2总计',

type: 1,

amount1: '部门2跟单员',

amount2: '',

amount3: 12

}],

arr1:[],

arr2:[]

};

},

created() {

this.setdates(this.tableData6)

},

methods: {

setdates(arr) {

var obj = {},

k, arr1 = [];

for(var i = 0, len = arr.length; i < len; i++) {

k = arr[i].name;

if(obj[k])

obj[k]++;

else

obj[k] = 1;

}

console.log(obj)

//保存结果{el-'元素'，count-出现次数}

for(var o in obj) {

for(let i=0;i

if(i===0){

this.arr1.push(obj[o])

}else{

this.arr1.push(0)

}

}

}

console.log(this.arr1);

var obj2 = {},

j,arr2=[];

for(var i = 0, len = arr.length; i < len; i++) {

k = arr[i].amount1;

if(obj2[k])

obj2[k]++;

else

obj2[k] = 1;

}

console.log(obj2)

//保存结果{el-'元素'，count-出现次数}

for(var o in obj2) {

for(let i=0;i

if(i===0){

this.arr2.push(obj2[o])

}else{

this.arr2.push(0)

}

}

}

console.log(this.arr2);

},

arraySpanMethod({ row, column, rowIndex, columnIndex }) {

if (rowIndex % 2 === 0) {

if (columnIndex === 0) {

return [1, 2];

} else if (columnIndex === 1) {

return [0, 0];

}

}

},

objectSpanMethod({ row, column, rowIndex, columnIndex }) {

if (columnIndex === 0 && this.tableData6[rowIndex].type == 0) {

let _row = this.arr1[rowIndex]

let _col = this.arr1[rowIndex] > 0 ? 1 : 0

return [_row,_col]

}else if(columnIndex === 0 && this.tableData6[rowIndex].type == 1){

return [1,3]

}else if (columnIndex === 1 && this.tableData6[rowIndex].type == 1){

return [0,0]

}else if (columnIndex === 2 && this.tableData6[rowIndex].type == 1){

return [0,0]

}else if (columnIndex === 1 && this.tableData6[rowIndex].type == 0){

let _row = this.arr2[rowIndex]

let _col = this.arr2[rowIndex] > 0 ? 1 : 0

return [_row,_col]

}

}

}

};

var Ctor = Vue.extend(Main)

new Ctor().$mount('#app')

最终效果