一、如图所示

二、实现方式

表格用提供的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>