效果图如下:
表格是要分页显示的,所以进行了分页处理
<template>
<div class="process-table-wrapper">
<div class="page" v-for="(tableData, idx) in tableList" :key="idx">
<el-table :data="tableData" border :span-method="(params) => onMergeRow(params, idx)">
<el-table-column prop="category" label="测试列" align="center" />
<el-table-column prop="name" label="姓名" align="center" />
<el-table-column prop="volume" label="年龄" align="center" />
</el-table>
</div>
</div>
</template>
相关的js代码
import _ from 'lodash';
export default {
name: 'Table',
data() {
return {
rowIndexList: [],
tableData: [
{
category: 'test',
name: 'Marco',
},
{
category: 'test',
name: 'Bob',
},
{
category: 'test',
name: 'Alice',
},
{
category: 'test',
name: 'Alisa',
},
{
category: 'test',
name: 'Jorge',
},
{
category: 'test',
name: 'William',
},
{
category: 'other',
name: 'Cynthia',
},
{
category: 'other',
name: 'Jeff',
},
{
category: 'other',
name: 'Drew',
},
],
tableList: [],
}
},
created() {
this.tableList = _.chunk(this.tableData, 35);
this.tableList.forEach((tableItem, index) => {
const groupList = Object.values(_.groupBy(tableItem, 'category') || []);
const indexArr = _.fill(Array(tableItem?.length), 0);
groupList.forEach((item, idx) => {
if (idx > 0) {
const arr = _.cloneDeep(groupList).splice(0, idx).map((item) => item.length);
const sum = arr.reduce((prev, curr) => prev + curr);
indexArr[sum] = item.length;
} else {
indexArr[idx] = item.length;
}
});
this.rowIndexList[index] = indexArr;
});
},
methods: {
onMergeRow({ columnIndex, rowIndex }, idx) {
if (columnIndex === 0) {
if (this.rowIndexList[idx][rowIndex]) {
return {
rowspan: this.rowIndexList[idx][rowIndex],
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
}
},
},
};