<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' }, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄' }, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄' }, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄' }]
}
}
flitterData(arr){
let spanOneArr = [],
spanTwoArr = [],
spanThreeArr = [],
concatOne = 0,
concatTwo = 0,
concatThree =0;
arr.forEach((item,index)=>{
if(index === 0){
spanOneArr.push(1);
spanTwoArr.push(1);
spanThreeArr.push(1);
}else{
if(item.name === arr[index - 1].name){ //第一列根据相同name合并
spanOneArr[concatOne] += 1;
spanOneArr.push(0);
}else{
spanOneArr.push(1);
concatOne = index;
};
if(item.date === arr[index - 1].date){//第二列根据相同日期合并 spanTwoArr[concatTwo] += 1;
spanTwoArr.push(0);
}else{
spanTwoArr.push(1);
concatTwo = index;
};
if(item.name === arr[index - 1].name&&item.address === arr[index - 1].address){ //第三列根据相同name和相同地址合并
spanThreeArr[concatThree] += 1;
spanThreeArr.push(0);
}else{
spanThreeArr.push(1);
concatThree = index;
};
}
});
return {
one: spanOneArr,
two: spanTwoArr,
three: spanThreeArr
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if(columnIndex === 0 ) { //第一列
const _row = (this.flitterData(this.tableData).one)[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if(columnIndex === 2) {//第二列
const _row = (this.flitterData(this.tableData).two)[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if(columnIndex === 1) {//第三列
const _row = (this.setTable(this.tableData).three)[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
网友评论