嵌套表格很常用，但是官网的嵌套表格有个问题，就是子表格的每一项内容必须和父表格一样，没法自定义。具体事例官网上有，地址：element-plus.gitee.io/zh-CN/compo…
那怎么样实现一个嵌套任意自定义的子表格呢。后来考虑了一下使用展开行勉强可以实现功能，但是有个缺点就是会在每一行都生成一个子表格，没有就是空数据表格。
这是一个三级嵌套，代码如下：
<template> <div> <el-table :data="[ { date: '100万', name: 'Tom', state: 'California', city: 'San Francisco', address: '3650 21st St, San Francisco', zip: 'CA 94114', family: [ { name: 'Jerry', state: 'California', city: 'San Francisco', address: '3650 21st St, San Francisco', zip: 'CA 94114', }, { name: 'Spike', state: 'California', city: 'San Francisco', address: '3650 21st St, San Francisco', zip: 'CA 94114', }, { name: 'Tyke', state: 'California', city: 'San Francisco', address: '3650 21st St, San Francisco', zip: 'CA 94114', }, ], }, { date: '100万', name: 'Tom', state: 'California', city: 'San Francisco', address: '3650 21st St, San Francisco', zip: 'CA 94114', family: [ { name: 'Jerry', state: 'California', city: 'San Francisco', address: '3650 21st St, San Francisco', zip: 'CA 94114', family: [ { name: 'Jerry', state: 'California', city: 'San Francisco', address: '3650 21st St, San Francisco', zip: 'CA 94114', }, { name: 'Spike', state: 'California', city: 'San Francisco', address: '3650 21st St, San Francisco', zip: 'CA 94114', }, { name: 'Tyke', state: 'California', city: 'San Francisco', address: '3650 21st St, San Francisco', zip: 'CA 94114', }, ], }, { name: 'Spike', state: 'California', city: 'San Francisco', address: '3650 21st St, San Francisco', zip: 'CA 94114', }, { name: 'Tyke', state: 'California', city: 'San Francisco', address: '3650 21st St, San Francisco', zip: 'CA 94114', }, ], }, ]" style="width: 100%" :show-header="false" :row-style="{ backgroundColor: 'yellow' }" class="my-cell-name221"> <el-table-column label="Name" prop="name" align="center" /> <el-table-column label="Date" prop="date" align="right" /> <el-table-column type="expand"> <template #default="props"> <div> <el-table :data="props.row.family" class="my-cell-name222"> <el-table-column label="Name" prop="name" /> <el-table-column label="State" prop="state" /> <el-table-column label="City" prop="city" /> <el-table-column type="expand" label=" "> <template #default="props"> <div> <el-table :data="props.row.family" :row-style="{ backgroundColor: 'yellowgreen' }" :header-cell-style="{ backgroundColor: 'yellowgreen' }" class="my-cell-name223"> <el-table-column label="Name" prop="name" /> <el-table-column label="State" prop="state" /> </el-table> </div> </template> </el-table-column> <el-table-column label="Address" prop="address" /> <el-table-column label="Zip" prop="zip" /> </el-table> </div> </template> </el-table-column> <el-table-column label="Name" prop="name" align="center" /> <el-table-column label="Name" prop="name" align="center" /> </el-table> </div></template><script lang="ts">import { defineComponent, onMounted,} from 'vue'import * as echarts from 'echarts';export default defineComponent({ setup(props) { }})</script>
官网地址：element-plus.gitee.io/zh-CN/compo…
后来跟其他同事讨论其他实现方式，就是自定义表格的一行（有展开图标，显示隐藏通过是否有子数据判断），如果有子数据就在这行下边手动生成一个表格，通过图标控制变量控制显示隐藏，这样可以避免生成空表格。具体代码就不写了，实现起来很简单。
