vue,对table组件进行修改,实现随意合并列的效果
<template>
<div class="app-container">
<el-table :data="testTable" border :span-method="objectSpanMethod">
<el-table-column prop="name" align="center" label="商品名称"> </el-table-column>
<el-table-column prop="classSecondName" align="center" label="商品小类名称">
</el-table-column>
<el-table-column prop="DW" align="center" label="单位"> </el-table-column>
<el-table-column prop="lastYear" align="center" label="上年度结余"> </el-table-column>
<el-table-column prop="plan" align="center" label="计划发放量"> </el-table-column>
<el-table-column prop="currentLQ" align="center" label="本年度领取"> </el-table-column>
<el-table-column prop="cardYE" align="center" label="卡内余额"> </el-table-column>
<el-table-column prop="cardKY" align="center" label="卡内可用余额"> </el-table-column>
<el-table-column prop="currentKC" align="center" label="当前库存"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// 表格数据
testTable: [
{
index: 1,
name: '白面',
classSecondName: '白面(20斤/袋)',
DW: '斤',
lastYear: 0,
plan: 18,
currentLQ: 6,
cardYE: 12,
cardKY: 0,
currentKC: 75
},
{
index: 2,
name: '小杂粮',
classSecondName: '小米',
DW: '斤',
lastYear: 0,
plan: 18,
currentLQ: 6,
cardYE: 12,
cardKY: 0,
currentKC: 75
},
{
index: 3,
name: '小杂粮',
classSecondName: '荞面',
DW: '斤',
lastYear: 0,
plan: 18,
currentLQ: 6,
cardYE: 12,
cardKY: 0,
currentKC: 85
},
{
index: 4,
name: '小杂粮',
classSecondName: '糕面',
DW: '斤',
lastYear: 0,
plan: 18,
currentLQ: 6,
cardYE: 12,
cardKY: 0,
currentKC: 86
},
{
index: 5,
name: '大米',
classSecondName: '大米(20斤/袋)',
DW: '斤',
lastYear: 0,
plan: 18,
currentLQ: 6,
cardYE: 12,
cardKY: 0,
currentKC: 75
},
{
index: 6,
name: '大米',
classSecondName: '大小米(20斤/袋)',
DW: '斤',
lastYear: 0,
plan: 18,
currentLQ: 6,
cardYE: 12,
cardKY: 0,
currentKC: 75
},
{
index: 7,
name: '小杂粮',
classSecondName: '荞面',
DW: '斤',
lastYear: 0,
plan: 18,
currentLQ: 6,
cardYE: 12,
cardKY: 0,
currentKC: 85
},
{
index: 8,
name: '小杂粮',
classSecondName: '糕面',
DW: '斤',
lastYear: 0,
plan: 18,
currentLQ: 6,
cardYE: 12,
cardKY: 0,
currentKC: 86
}
],
// 合并源对象
mergeObj: {},
mergeList: [
'name',
'classSecondName',
'DW',
'result',
'lastYear',
'plan',
'currentLQ',
'cardYE',
'cardKY'
]
};
},
mounted() {
this.mergeRowSpan();
},
methods: {
mergeRowSpan () {
for (let key of this.mergeList) {
//count 用来记录要合并数据第一行的索引,this.mergeObj[key][count] ==>this.mergeObj["name"][1]==>name:[1,2,0,0,0]中的2
let count = 0;
this.mergeObj[key] = [];
this.testTable.forEach((item, index) => {
if (index === 0) {
this.mergeObj[key].push(1);
} else {
if (
item[key] === this.testTable[index - 1][key] &&
item.name === this.testTable[index - 1].name
) {
this.mergeObj[key][count] += 1;
this.mergeObj[key].push(0);
} else {
count = index;
this.mergeObj[key].push(1);
}
}
});
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (this.mergeList.indexOf(column.property) !== -1) {
if (this.mergeObj[column.property][rowIndex]) {
return {
rowspan: this.mergeObj[column.property][rowIndex],
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
} else {
return {
rowspan: 1,
colspan: 1
};
}
}
}
};
</script>
转载自:https://blog.csdn.net/qq_41580802/article/details/127314734