效果:
不能直接在递归组件组件中循环
将第一层的循环放在递归组件外面,配合template使用
<el-table :data="fieldModel" style="width: 100%">
<template v-for="(item, index) in columns" :key="index">
<TableDynamicCellItem :item="item" @onChange="onChange" />
</template>
</el-table>
递归组件代码
// TableDynamicCellItem.vue
<template>
// element的el-table-column下面,不能同时写el-table-column和#default
<el-table-column
:label="props.item.label"
min-width="100"
v-if="props.item.children && props.item.children.length > 0"
>
<template
v-for="(childrenItem, childrenIndex) in props.item.children"
:key="childrenIndex"
>
<TableDynamicCellItem :item="childrenItem" />
</template>
</el-table-column>
<el-table-column
:label="props.item.label"
:prop="props.item.name"
min-width="100"
v-else
>
<template #default="scope">
{{scope.row[props.item.name]}}
</template>
</el-table-column>
</template>
<script setup>
import TableDynamicCellItem from "../container-item/table-dynamic-cell-item";
const props = defineProps({
item: Object,
});
</script>
数据结构
[
{
"name":"input74191",
"label":"住院号"
},
{
"name":"date104045",
"label":"入院日期"
},
{
"label":"申请会诊",
"children":[
{
"label":"资质",
"children":[
{
"name":"input59703",
"label":"资质信息"
}
]
},
{
"label":"申请记录",
"children":[
{
"name":"select77164",
"label":"会议理由充分"
},
{
"name":"input22233",
"label":"会议目的明确"
}
]
}
]
},
{
"label":"测试",
"children":[
{
"children":[
{
"name":"number28957",
"label":"数字"
}
]
}
]
}
]