el-table-column循环并判断展示不同表单项
时间: 2023-11-08 15:14:05 浏览: 133
您可以使用 `v-for` 循环 `el-table-column`,然后在每个列中使用 `v-if` 条件语句来判断要展示哪些表单项。例如:
```html
<el-table :data="tableData">
<el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label">
<template slot-scope="scope">
<template v-if="column.prop === 'name'">
<el-form-item label="姓名">
<el-input v-model="scope.row.name"></el-input>
</el-form-item>
</template>
<template v-if="column.prop === 'age'">
<el-form-item label="年龄">
<el-input v-model="scope.row.age"></el-input>
</el-form-item>
</template>
<!-- 其他表单项 -->
</template>
</el-table-column>
</el-table>
```
在上面的示例中,`tableColumns` 是一个数组,包含要展示的所有列的信息,包括属性名称、列标题等。`tableData` 是要展示的表格数据。在每个 `el-table-column` 中,我们使用 `v-if` 条件语句来判断当前列要展示哪些表单项。例如,如果当前列的属性名称为 `name`,则展示一个包含姓名输入框的表单项;如果当前列的属性名称为 `age`,则展示一个包含年龄输入框的表单项。由于每个表单项都需要绑定到表格数据中对应的字段上,因此我们使用 `v-model` 指令来实现双向绑定。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.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://img-home.csdnimg.cn/images/20241226111658.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)