vue el-form-item 遍历循环
时间: 2023-11-05 16:49:42 浏览: 60
你可以使用`v-for`指令来遍历循环`el-form-item`组件。下面是一个示例:
```html
<template>
<el-form :model="form" ref="form" :rules="rules" label-width="100px">
<el-form-item v-for="(item, index) in formItems" :label="item.label" :key="index">
<el-input v-model="item.value"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm">Submit</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {}, // 表单数据对象
formItems: [
{ label: 'Field 1', value: '' },
{ label: 'Field 2', value: '' },
{ label: 'Field 3', value: '' }
], // 表单项数组
rules: { // 表单校验规则
// 规则定义...
}
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单校验通过,执行提交操作
// ...
} else {
// 表单校验失败,处理错误信息
// ...
}
});
}
}
};
</script>
```
在上面的示例中,`v-for="(item, index) in formItems"`用于遍历`formItems`数组。然后,我们将每个数组项作为`item`参数传递给`el-form-item`组件,并将其属性绑定到相应的`label`和输入框组件上。
希望这可以帮助到你!如有任何问题,请随时提问。