使用vue和element, 做一个form表单动态生成怎么,请给我一个demo
时间: 2023-05-23 13:07:42 浏览: 228
A:
以下是一个简单的示例,显示如何使用Vue和Element UI库实现动态表单:
```html
<template>
<div>
<el-form :model="form" ref="formData" label-width="100px">
<el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label"
:prop="item.prop" :rules="item.rules">
<el-input :placeholder="item.placeholder" v-if="item.type === 'input'"
v-model="form[item.prop]"></el-input>
<el-select :placeholder="item.placeholder" v-if="item.type === 'select'"
v-model="form[item.prop]">
<el-option v-for="option in item.options" :key="option.value"
:label="option.label" :value="option.value"></el-option>
</el-select>
<el-checkbox v-if="item.type === 'checkbox'" v-model="form[item.prop]">{{item.label}}</el-checkbox>
</el-form-item>
</el-form>
<el-button type="primary" @click="submitForm">提交</el-button>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'DynamicForm',
data() {
return {
form: {},
formItems: [
{
label: '姓名',
prop: 'name',
type: 'input',
placeholder: '请输入姓名',
rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
},
{
label: '性别',
prop: 'gender',
type: 'select',
placeholder: '请选择性别',
options: [
{ label: '男', value: '男' },
{ label: '女', value: '女' }
],
rules: [{ required: true, message: '请选择性别', trigger: 'blur' }]
},
{
label: '是否已婚',
prop: 'married',
type: 'checkbox',
rules: [{ required: true, message: '请选择婚姻状况', trigger: 'blur' }]
}
]
}
},
methods: {
submitForm() {
this.$refs.formData.validate(valid => {
if (valid) {
console.log('表单验证通过')
console.log(this.form)
} else {
console.log('表单验证失败')
}
})
}
}
}
</script>
```
在这个示例中,我们通过定义 `formItems` 数组来描述表单的各个元素。每个元素都包括 `label` 用于描述该元素的名称,`prop` 表示表单元素的字段名,`type` 指定表单元素的类型,例如输入框、下拉框、复选框等,`placeholder` 表示表单元素的占位提示文字,`options` 指定下拉框的选项,`rules` 表示表单元素验证的规则。
在模板中,我们使用 `v-for` 来遍历 `formItems` 数组并动态生成表单元素,根据 `type` 类型的不同,生成相应的 `el-input`、`el-select`、`el-checkbox` 等元素。
最后,我们在 `submitForm` 方法中利用`$refs.formData.validate()`方法进行表单校验,如果校验成功,则将表单数据打印到控制台上。
希望能对您有所帮助!