html table相同值合并单元格,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 < 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);

},

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')

最终效果