element 动态渲染el-from
时间: 2023-08-01 19:15:09 浏览: 52
要动态渲染 `el-form`,你需要使用 `v-if` 或 `v-show` 来控制它的显示和隐藏。在 `el-form` 的 `v-if` 或 `v-show` 中,你可以使用 `v-for` 来循环渲染表单元素。
例如,以下示例将根据 `formFields` 数组中的项动态渲染表单元素:
```html
<el-form v-if="formFields.length">
<el-form-item v-for="(field, index) in formFields" :key="index" :label="field.label">
<el-input v-if="field.type === 'text'" v-model="field.value"></el-input>
<el-radio-group v-if="field.type === 'radio'" v-model="field.value">
<el-radio v-for="(option, optionIndex) in field.options" :key="optionIndex" :label="option.value">{{ option.label }}</el-radio>
</el-radio-group>
<!-- 其他表单元素 -->
</el-form-item>
</el-form>
```
在上面的示例中,我们使用 `v-for` 循环遍历 `formFields` 数组中的每个项,并根据每个项的 `type` 属性动态渲染相应的表单元素。在 `el-input` 和 `el-radio-group` 中,我们将表单元素的值绑定到 `field.value` 上,这样就可以在表单提交时获取表单数据了。
你也可以根据需要添加更多的表单元素,并使用类似的逻辑来动态渲染它们。