一、如图所示
二、实现方式
表格用提供的span-method属性
<template>
<Table ref="table" border :span-method="handleSpan" :row-key="true" :columns="tableColumns" :data="tableData"
no-data-text="暂无数据">
</Table>
</template>
<script>
export default {
data() {
return {
tableColumns: [
{
title: '姓名',
key: 'name',
align: 'center',
minWidth: 85,
},
{
title: '年龄',
key: 'age',
align: 'center',
minWidth: 85,
},
{
title: '爱好',
key: 'hobby',
align: 'center',
minWidth: 85,
},
{
title: '等级',
key: 'level',
align: 'center',
minWidth: 85,
},
{
title: '年份',
key: 'year',
align: 'center',
minWidth: 85,
},
{
title: '地址',
key: 'address',
align: 'center',
minWidth: 85,
},
{
title: '电话',
key: 'phone',
align: 'center',
minWidth: 85,
},
],
tableData: [],
};
},
methods: {
handleSpan({ row, column, rowIndex, columnIndex }) {
// 爱好 【序号2】、等级【序号3】、年份【序号4】 是多行的
if (columnIndex < 2 || columnIndex > 4) {
// 其余的 保留并合并成一行
if (row._columnStatus == 'first') {
return {
rowspan: row.hobbyList.length, // 爱好数量
colspan: 1
};
} else if (row._columnStatus == 'next') {
return {
rowspan: 0,
colspan: 0
};
}
}
},
getData() {
let origin = [
{
id: 1,
name: 'lili',
age: 18,
hobbyList: [
{
hobby: '篮球',
level: 'A',
year: 1
},
{
hobby: '足球',
level: 'B',
year: 2
},
{
hobby: '羽毛球',
level: 'C',
year: 1.5
}
],
address: '山东',
phone: '1978977767'
},
{
id: 2,
name: 'aazzz',
age: 16,
hobbyList: [],
address: '新疆',
phone: '13456444355'
},
{
id: 3,
name: 'ouz',
age: 17,
hobbyList: [{
hobby: '唱歌',
level: 'A',
year: 3
}],
address: '新疆',
phone: '13456444355'
},
{
id: 4,
name: 'eva',
age: 19,
hobbyList: [{
hobby: '跳舞',
level: 'B',
year: 2
},
{
hobby: '弹琴',
level: 'A',
year: 1
}],
address: '新疆',
phone: '13456444355'
}
];
this.setData(origin);
},
setData(origin) {
let tableData = [];
origin.forEach(item => {
if (item.hobbyList && item.hobbyList.length) {
// 将爱好列表展开成多行
item.hobbyList.forEach((it, i) => {
tableData.push({
...item,
...it,
_columnStatus: i == 0 ? 'first' : 'next',
_rowIndex: i
});
});
} else {
tableData.push({
...item,
_columnStatus: '',
_rowIndex: 0
});
}
});
this.tableData = tableData;
}
},
mounted() {
this.getData();
}
};
</script>
<style scoped>
</style>