java单元格合并多列_ElementUI表格列相同值自动合并单元格( 多列 )
上篇文章寫(xiě)了如何在處理單列相同數(shù)據(jù)時(shí)讓相同的項(xiàng)進(jìn)行自動(dòng)合并, 如果有多列合并的需求我們也應(yīng)該可以從容應(yīng)對(duì)...
(產(chǎn)品: 你們看我干嘛?)
廢話不多說(shuō) 上代碼
HTML
JS
var Main = {
data() {
return {
tableData6: [{
name: '部門(mén)1',
type: 0,
amount1: '跟單員1',
amount2: '成衣工廠1',
amount3: 10
}, {
name: '部門(mén)1',
type: 0,
amount1: '跟單員1',
amount2: '成衣工廠2',
amount3: 12
}, {
name: '部門(mén)1',
type: 0,
amount1: '跟單員1',
amount2: '成衣工廠3',
amount3: 9
}, {
name: '部門(mén)1',
type: 0,
amount1: '跟單員2',
amount2: '成衣工廠1',
amount3: 17
}, {
name: '部門(mén)1',
type: 0,
amount1: '跟單員2',
amount2: '成衣工廠2',
amount3: 15
},{
name: '部門(mén)1',
type: 0,
amount1: '跟單員2',
amount2: '成衣工廠3',
amount3: 10
}, {
name: '部門(mén)1總計(jì)',
type: 1,
amount1: '部門(mén)1跟單員',
amount2: '',
amount3: 12
},{
name: '部門(mén)2',
type: 0,
amount1: '跟單員3',
amount2: '成衣工廠1',
amount3: 10
}, {
name: '部門(mén)2',
type: 0,
amount1: '跟單員3',
amount2: '成衣工廠2',
amount3: 12
}, {
name: '部門(mén)2',
type: 0,
amount1: '跟單員3',
amount2: '成衣工廠3',
amount3: 9
}, {
name: '部門(mén)2',
type: 0,
amount1: '跟單員3',
amount2: '成衣工廠1',
amount3: 17
}, {
name: '部門(mén)2',
type: 0,
amount1: '跟單員4',
amount2: '成衣工廠2',
amount3: 15
},{
name: '部門(mén)2',
type: 0,
amount1: '跟單員4',
amount2: '成衣工廠3',
amount3: 10
}, {
name: '部門(mén)2總計(jì)',
type: 1,
amount1: '部門(mén)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èn)題。
- 上一篇： 卧龙吟游戏服务器不显示,卧龙吟你必须知道
- 下一篇： 光华科技光刻胶_光刻胶领衔国产替代，20