上篇文章寫了如何在處理單列相同數(shù)據(jù)時(shí)讓相同的項(xiàng)進(jìn)行自動(dòng)合并, 如果有多列合并的需求我們也應(yīng)該可以從容應(yīng)對(duì)...

(產(chǎn)品: 你們看我干嘛?)

廢話不多說 上代碼

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總計(jì)',

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總計(jì)',

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)

//保存結(jié)果{el-'元素'，count-出現(xiàn)次數(shù)}

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)

//保存結(jié)果{el-'元素'，count-出現(xiàn)次數(shù)}

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

最終效果

總結(jié)

以上是生活随笔為你收集整理的java单元格合并多列_ElementUI表格列相同值自动合并单元格( 多列 )的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。