vue递归组件怎么拼接table的tr
时间: 2023-04-01 18:00:45 浏览: 144
可以使用递归组件来拼接 table 的 tr,具体实现方法如下:
1. 定义递归组件,例如:
```
<template>
<tr>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<table v-if="item.children">
<tbody>
<recursive-tr v-for="child in item.children" :item="child" :key="child.id"></recursive-tr>
</tbody>
</table>
</td>
</tr>
</template>
<script>
export default {
name: 'recursive-tr',
props: {
item: {
type: Object,
required: true
}
},
components: {
RecursiveTr: this.$options.components.RecursiveTr
}
}
</script>
```
2. 在父组件中使用递归组件,例如:
```
<template>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Children</th>
</tr>
</thead>
<tbody>
<recursive-tr v-for="item in items" :item="item" :key="item.id"></recursive-tr>
</tbody>
</table>
</template>
<script>
import RecursiveTr from './RecursiveTr.vue'
export default {
name: 'table',
components: {
RecursiveTr
},
data() {
return {
items: [
{
id: 1,
name: 'Alice',
age: 20,
children: [
{
id: 2,
name: 'Bob',
age: 10,
children: [
{
id: 3,
name: 'Charlie',
age: 5
}
]
},
{
id: 4,
name: 'David',
age: 8
}
]
},
{
id: 5,
name: 'Eve',
age: 25
}
]
}
}
}
</script>
```
这样就可以通过递归组件来拼接 table 的 tr 了。