elementui 树形表格中嵌套表单
时间: 2023-07-01 16:12:04 浏览: 285
Element实现表格嵌套、多个表格共用一个表头的方法
在 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`。
阅读全文