vue3中form和遍历的el-form-item进行动态绑定
时间: 2023-12-14 19:11:59 浏览: 266
在Vue 3中,可以使用 `v-for` 指令动态生成 `el-form-item` 组件,然后使用动态绑定来绑定表单数据。下面是示例代码:
```html
<template>
<el-form :model="form" ref="form">
<el-form-item
v-for="(item, index) in formItems"
:key="index"
:label="item.label"
:prop="item.prop"
>
<el-input v-model="form[item.prop]"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: '',
email: ''
},
formItems: [
{ label: 'Name', prop: 'name' },
{ label: 'Age', prop: 'age' },
{ label: 'Email', prop: 'email' }
]
}
}
}
</script>
```
在上面的代码中,我们使用 `v-for` 指令遍历 `formItems` 数组,并使用动态绑定将表单数据绑定到 `el-input` 组件中。这样做可以方便地生成表单,并且可以根据需要动态添加或删除表单项。
阅读全文