好的，以下是一个简单的demo，用于动态生成
form表单，并且使用element
-ui进行渲染。
```vue
<template>
<div>
<el
-form :model="
form" ref="dynamic
Form" :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="submit
Form">提交</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: {
submit
Form() {
this.$refs.dynamic
Form.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提交表单数据。
最低0.47元/天 解锁文章
1307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
