是简书里一个大神写的,我根据自己的数据稍微改了下
效果图:
dom:
<el-table
:data="data"
style="width: 100%"
:span-method="objectSpanMethod"
border
>
<el-table-column prop="hotelPurpose" label="酒店用途">
</el-table-column>
<el-table-column prop="hotel_name" label="酒店名称"> </el-table-column>
<el-table-column prop="personSum" width="100" label="总数">
</el-table-column>
<el-table-column prop="availableRoom" label="剩余可用房间">
</el-table-column>
<el-table-column prop="personDetail" label="人员情况">
</el-table-column>
</el-table>
javascript:
data() {
return {
data: [
{
hotelPurpose: '医学观察',
hotel_name: '华安酒店',
personSum: '132',
availableRoom: '120',
personDetail: '黄码20人',
},
{
hotelPurpose: '中高风险',
hotel_name: '烟台酒店',
personSum: '132',
availableRoom: '120',
personDetail: '北京20人',
},
{
hotelPurpose: '中高风险',
hotel_name: '美丽酒店',
personSum: '132',
availableRoom: '120',
personDetail: '南京20人',
},
{
hotelPurpose: '入境类',
hotel_name: '华安酒店',
personSum: '132',
availableRoom: '120',
personDetail: '韩国20人',
},
],
dataSum: {
hotelSum: '30',
personSum: '1908',
availableRoom: '203',
personDetail: '黄码20人,北京20人,南京20人,韩国20人',
},
arr: [],
};
},
getCountsList() {
// this.$http({
// url: '',
// method: 'get',
// }).then((res) => {
// if (res.data.code * 1 === 1) {
// this.tableData = res.data.data;
// }
// });
let tempArr = {};
tempArr.hotelPurpose = '合计';
tempArr.hotel_name = this.dataSum.hotelSum;
tempArr.personSum = this.dataSum.personSum;
tempArr.availableRoom = this.dataSum.availableRoom;
tempArr.personDetail = this.dataSum.personDetail;
this.data.push(tempArr);
},
setTable(data, c) {
let spanOneArr = [];
let concatOne = 0;
data.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1);
} else {
if (item[c] && item[c] === data[index - 1][c]) {
//当前项和前一项比较
spanOneArr[concatOne] += 1; //相同值第一个出现的位置,统计需要合并多少行
spanOneArr.push(0); //新增一个被合并行
} else {
spanOneArr.push(1); //否则不合并
concatOne = index; //指向位移
}
}
});
var obj = {};
obj[c] = spanOneArr;
this.arr.push(obj);
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// console.log(row, column);
if (columnIndex === 0) {
const _row = this.arr[0].hotelPurpose[rowIndex]; //因为rowIndex出现会从1到结尾
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
created() {
this.getCountsList();
//合并表格初始化 根据酒店用途字段合并
this.setTable(this.data, 'hotelPurpose');
},