vue实现子表格
Vue 实现子表格的方法
在 Vue 中实现子表格（嵌套表格）可以通过多种方式完成，以下是几种常见的方法：
使用组件递归
通过递归组件实现子表格，适用于多层嵌套数据。定义一个表格组件，内部调用自身实现子表格的渲染。
<template>
<table>
<tr v-for="(item, index) in data" :key="index">
<td>{{ item.name }}</td>
<td>
<nested-table v-if="item.children" :data="item.children" />
</td>
</tr>
</table>
</template>
<script>
export default {
name: 'NestedTable',
props: {
data: Array
}
}
</script>使用 v-for 嵌套
适用于固定层级的子表格，通过多层 v-for 循环渲染数据。
<template>
<table>
<tr v-for="(parent, i) in data" :key="i">
<td>{{ parent.name }}</td>
<td>
<table>
<tr v-for="(child, j) in parent.children" :key="j">
<td>{{ child.name }}</td>
</tr>
</table>
</td>
</tr>
</table>
</template>使用第三方库
借助如 element-ui 或 ant-design-vue 等 UI 库的表格组件，它们通常内置了展开子表格的功能。
<template>
<el-table :data="data">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column label="Children">
<template #default="{ row }">
<el-table :data="row.children" v-if="row.children">
<el-table-column prop="name" label="Child Name"></el-table-column>
</el-table>
</template>
</el-table-column>
</el-table>
</template>动态加载子表格
通过点击事件动态加载子表格数据，适合数据量较大的场景。
<template>
<table>
<tr v-for="(item, index) in data" :key="index">
<td>{{ item.name }}</td>
<td>
<button @click="loadChildren(item)">Show Children</button>
<table v-if="item.showChildren">
<tr v-for="(child, i) in item.children" :key="i">
<td>{{ child.name }}</td>
</tr>
</table>
</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
data: [
{ name: 'Parent 1', children: [], showChildren: false },
{ name: 'Parent 2', children: [], showChildren: false }
]
}
},
methods: {
loadChildren(item) {
item.showChildren = !item.showChildren
if (item.children.length === 0) {
// 模拟异步加载子数据
setTimeout(() => {
item.children = [{ name: 'Child 1' }, { name: 'Child 2' }]
}, 500)
}
}
}
}
</script>注意事项
- 数据层级不宜过深，否则可能导致性能问题。
- 递归组件需设置终止条件，避免无限循环。
- 动态加载子表格时注意异步数据的处理。
以上方法可根据实际需求选择或组合使用。
