elementui 树形表格中嵌套表单
时间: 2023-07-01 10:12:04 浏览: 109
在 ElementUI 的树形表格中嵌套表单,可以通过使用 Scoped Slot 来实现。具体步骤如下:
1. 在树形表格中使用 Scoped Slot,例如:
```
<el-table :data="data" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column prop="name" label="Name">
<template slot-scope="{ row }">
{{ row.name }}
</template>
</el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column>
<template slot-scope="{ row }">
<el-form :model="row" label-width="0">
<el-form-item label="Address">
<el-input v-model="row.address"></el-input>
</el-form-item>
<el-form-item label="Phone">
<el-input v-model="row.phone"></el-input>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
```
2. 在 Scoped Slot 中,使用子级数据的属性来绑定表单的数据模型,例如:
```
<el-form :model="row" label-width="0">
<el-form-item label="Address">
<el-input v-model="row.address"></el-input>
</el-form-item>
<el-form-item label="Phone">
<el-input v-model="row.phone"></el-input>
</el-form-item>
</el-form>
```
这样,就可以在树形表格中嵌套表单了。注意,需要在树形表格的 `tree-props` 属性中指定子级数据的属性名,例如 `children`。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)