使用vue和element, 做一个form表单动态生成怎么,请给我一个demo
时间: 2024-01-21 10:17:45 浏览: 27
好的,以下是一个简单的demo,用于动态生成form表单,并且使用element-ui进行渲染。
```vue
<template>
<div>
<el-form :model="form" ref="dynamicForm" :rules="rules" label-width="120px">
<el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label" :prop="item.prop">
<el-input v-if="item.type === 'input'" v-model="form[item.prop]" placeholder="请输入"></el-input>
<el-select v-if="item.type === 'select'" v-model="form[item.prop]" placeholder="请选择">
<el-option v-for="(option, optionIndex) in item.options" :key="optionIndex" :label="option.label" :value="option.value"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
formItems: [
{
label: '姓名',
prop: 'name',
type: 'input'
},
{
label: '性别',
prop: 'gender',
type: 'select',
options: [
{
label: '男',
value: 'male'
},
{
label: '女',
value: 'female'
}
]
},
{
label: '年龄',
prop: 'age',
type: 'input'
}
],
form: {
name: '',
gender: '',
age: ''
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' }
]
}
};
},
methods: {
submitForm() {
this.$refs.dynamicForm.validate(valid => {
if (valid) {
console.log(this.form);
} else {
return false;
}
});
}
}
};
</script>
```
在这个demo中,我们通过data中的formItems数组来定义表单项,每个表单项包括一个label、一个prop(字段名)、一个type(表单项类型)以及特定类型的选项(比如select类型需要传入options数组)。通过v-for指令循环渲染表单项,并且根据不同的type渲染不同的表单控件。同时也定义了一个form对象来存储表单数据,使用element-ui的表单组件el-form进行渲染,使用el-button提交表单数据。