ElementUI表格列相同值自动合并单元格(单列)

本文会对平常中遇到对于element-ui处理相同列自动合并的问题进行代码展示,以供为大家提供思路.

HTML

JS

var Main = {
data() {
return {
tableData6: [{
name: '王小虎',
type: 0,
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
name: '王小虎',
type: 0,
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
name: '王小虎',
type: 0,
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
name: '王小虎',
type: 0,
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
name: '王小虎总计',
type: 1,
amount1: '539',
amount2: '4.1',
amount3: 15
},{
name: '王小虎1',
type: 0,
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
name: '王小虎1',
type: 0,
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
name: '王小虎1',
type: 0,
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
name: '王小虎1',
type: 0,
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
name: '王小虎1总计',
type: 1,
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
name: '王小虎2',
type: 0,
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
name: '王小虎2',
type: 0,
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
name: '王小虎3',
type: 0,
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
name: '王小虎4',
type: 0,
amount1: '539',
amount2: '4.1',
amount3: 15
}],
arr1:[]
};
},
created() {
this.setdates(this.tableData6)
},
methods: {
setdates(arr) {
var obj = {},
k, arr1 = [];
for(var i = 0, len = arr.length; 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);
},
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 {
rowspan: _row,
colspan: _col
};
}else if(columnIndex === 0 && this.tableData6[rowIndex].type == 1){
return {
rowspan: 1,
colspan: 2
};
}else if(columnIndex === 1 && this.tableData6[rowIndex].type == 1){
return {
rowspan: 0,
colspan: 0
};
}
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

最终效果

Fiddle代码预览地址https://jsfiddle.net/Tomatoro&＃8230;
可能需要翻(程序员必备)