动态创建form表单

最新推荐文章于 2025-06-26 08:50:51 发布

原创最新推荐文章于 2025-06-26 08:50:51 发布 · 1.3k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#动态表单验证

实践问题解析专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了一种基于Vue的动态表单实现方案，通过组件配置动态生成表单元素，支持多种输入类型如文本、下拉菜单等，并实现了表单验证功能。同时，文章展示了如何通过勾选选项来动态展示表单字段，以及如何处理表单提交和重置操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：https://juejin.im/post/5a9bc2676fb9a028d4440cfa

https://github.com/bowencool/super-form/blob/master/src/components/dynamic-form/form.vue

<template>

<div>

<el-form :model="form" ref="form" :rules="rulesF">

<div class="flexA">

<div class="flexB">

<div style="width:50px;height:50px;border:1px solid red;"></div>

</div>

<div class="flexC">

<el-form-item prop="model1">

<span slot="label">label1</span>

<el-input v-model="form.model1"></el-input>

</el-form-item>

<el-form-item prop="model2">

<span slot="label">label1</span>

<el-input v-model="form.model2"></el-input>

</el-form-item>

<el-form-item prop="model3">

<span slot="label">label1</span>

<el-input v-model="form.model3"></el-input>

</el-form-item>

<el-form-item prop="model4">

<span slot="label">label1</span>

<el-input v-model="form.model4"></el-input>

</el-form-item>

<!-- <el-form-item>

<span slot="label">label1</span>

<el-input v-model="model1"></el-input>

</el-form-item>

<el-form-item>

<span slot="label">label1</span>

<el-input v-model="model1"></el-input>

</el-form-item>

<el-form-item>

<span slot="label">label1</span>

<el-input v-model="model1"></el-input>

</el-form-item>

<el-form-item>

<span slot="label">label1</span>

<el-input v-model="model1"></el-input>

</el-form-item> -->

</div>

</div>

<div class="flexD">

<el-form-item prop="model5">

<span slot="label">label1</span>

<el-input v-model="form.model5"></el-input>

</el-form-item>

<el-form-item prop="model6">

<span slot="label">label1</span>

<el-input v-model="form.model6"></el-input>

</el-form-item>

<el-form-item prop="model7">

<span slot="label">label1</span>

<el-input v-model="form.model7"></el-input>

</el-form-item>

<el-form-item prop="model8">

<span slot="label">label1</span>

<el-input v-model="form.model8"></el-input>

</el-form-item>

<el-form-item prop="model9">

<span slot="label">label1</span>

<el-input v-model="form.model9"></el-input>

</el-form-item>

<el-form-item prop="model10">

<span slot="label">label1</span>

<el-input v-model="form.model10"></el-input>

</el-form-item>

<!-- <el-form-item>

<span slot="label">label1</span>

<el-input v-model="model1"></el-input>

</el-form-item>

<el-form-item>

<span slot="label">label1</span>

<el-input v-model="model1"></el-input>

</el-form-item>

<el-form-item>

<span slot="label">label1</span>

<el-input v-model="model1"></el-input>

</el-form-item>

<el-form-item>

<span slot="label">label1</span>

<el-input v-model="model1"></el-input>

</el-form-item>

<el-form-item>

<span slot="label">label1</span>

<el-input v-model="model1"></el-input>

</el-form-item>

<el-form-item>

<span slot="label">label1</span>

<el-input v-model="model1"></el-input>

</el-form-item>

<el-form-item>

<span slot="label">label1</span>

<el-input v-model="model1"></el-input>

</el-form-item>

<el-form-item>

<span slot="label">label1</span>

<el-input v-model="model1"></el-input>

</el-form-item>

<el-form-item>

<span slot="label">label1</span>

<el-input v-model="model1"></el-input>

</el-form-item>

<el-form-item>

<span slot="label">label1</span>

<el-input v-model="model1"></el-input>

</el-form-item> -->

<el-form-item>

<el-button type="primary" @click="submitForm1('form')"

>立即创建</el-button

>

<el-button @click="resetForm1('form')">重置</el-button>

</el-form-item>

</div>

</el-form>

<el-form

size="mini"

class="lj-form lj-form-s1"

:model="table"

ref="ruleForm"

:rules="rules"

>

<div v-for="(item, index) in table.customerList" :key="index">

<el-form-item

:label="item.field_title + ': '"

v-if="item.field_type == '0' && item.is_show == '1'"

:prop="'customerList.' + index + 'value'"

:rules="item.rules.value"

>

<el-input

v-model="item.value"

:placeholder="item.placeholder"

></el-input>

</el-form-item>

<el-form-item

:label="item.field_title + ': '"

v-if="item.field_type == '3' && item.is_show == '1'"

:prop="'customerList.' + index + 'value'"

:rules="item.rules.value"

>

<el-select v-model="item.value" :placeholder="item.placeholder">

<span v-for="(item1, i) in item.field_value" :key="i">

<el-option :label="item1" :value="item1"></el-option>

</span>

</el-select>

</el-form-item>

</div>

<el-form-item>

<el-button type="primary" @click="submitForm('ruleForm')"

>立即创建</el-button

>

<el-button @click="resetForm('ruleForm')">重置</el-button>

</el-form-item>

</el-form>

<div style="display:flex;">

<div

style="width:150px;height:500px;border:1px solid green;"

class="checkboxMine"

>

<el-checkbox-group

v-model="checked_values"

@change="ArrChange"

:min="0"

:max="5"

>

<el-checkbox v-for="item in Arr" :label="item.value" :key="item.id">{{

item.label

}}</el-checkbox>

</el-checkbox-group>

</div>

<div style="width:350px;height:500px;border:1px solid green;">

<el-form

:model="testform"

ref="testform"

label-width="80px"

:rules="rulesTest"

@submit.native.prevent

>

<el-form-item

v-for="(item, index) in newArr"

:key="index"

:label="item.label"

:prop="item.prop"

>

<el-input

v-if="item.type === 'Input'"

v-model="testform[item.prop]"

:clearable="true"

:placeholder="item.placeholder"

></el-input>

<el-select

clearable

v-if="item.type === 'Select'"

:placeholder="item.placeholder"

v-model="testform[item.prop]"

:style="{ width: item.width }"

@change="item.change(testform[item.prop])"

>

<el-option

v-for="op in item.options"

:label="op.label"

:value="op.value"

:key="op.value"

></el-option>

</el-select>

<el-radio-group

v-if="item.type === 'Radio'"

v-model="testform[item.prop]"

>

<el-radio

v-for="ra in item.radios"

:label="ra.value"

:key="ra.value"

>{{ ra.label }}</el-radio

>

</el-radio-group>

<el-radio-group

v-if="item.type === 'RadioButton'"

v-model="testform[item.prop]"

@change="item.change && item.change(testform[item.prop])"

>

<el-radio-button

v-for="ra in item.radios"

:label="ra.value"

:key="ra.value"

>{{ ra.label }}</el-radio-button

>

</el-radio-group>

<el-checkbox-group

v-if="item.type === 'Checkbox'"

:style="{ width: item.width }"

v-model="testform[item.prop]"

>

<el-checkbox

v-for="ch in item.checkboxs"

:label="ch.value"

:key="ch.value"

>{{ ch.label }}</el-checkbox

>

</el-checkbox-group>

<el-date-picker

v-if="item.type === 'Date'"

:placeholder="item.placeholder"

v-model="testform[item.prop]"

></el-date-picker>

<el-time-select

v-if="item.type === 'Time'"

v-model="testform[item.prop]"

type=""

></el-time-select>

<el-date-picker

v-if="item.type === 'DateTime'"

type="datetime"

v-model="testform[item.prop]"

:disabled="item.disable && item.disable(searchData[item.prop])"

></el-date-picker>

<el-switch

v-if="item.type === 'Switch'"

v-model="testform[item.prop]"

></el-switch>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="submitForm3('testform')"

>查询</el-button

>

</el-form-item>

</el-form>

</div>

</div>

</div>

</template>

<script>

// import _ from "lodash";

let sexs = [

{ label: "男", value: "M" },

{ label: "女", value: "F" }

];

let sexProps = { label: "label", value: "value" };

let intersts = [

{ label: "羽毛球", value: "badminton" },

{ label: "篮球", value: "basketball" },

{ label: "足球", value: "football" },

{ label: "兵乓球", value: "pong" }

];

let interstProps = { label: "label", value: "value" };

export default {

name: "FormInfo",

data() {

return {

testform: {

gonghao: "",

enName: "",

date: "",

age: null,

sex: null,

interst: []

},

newArr: [],

newArrForm: [],

checked_values: [], //勾选的字段名

Arr: [

{

label: "工号",

value: "gonghao", //字段名（选择框保持与表单映射）

prop: "gonghao", //表单绑定的字段

type: "Input",

placeholder: "请输入",

width: "180px"

},

{

label: "英文名",

value: "enName",

prop: "enName",

type: "Input",

placeholder: "请输入",

width: "180px",

size: "small"

},

{

type: "Date",

label: "日期",

value: "date",

prop: "date",

width: "180px",

// size: "small",

placeholder: "请选择日期"

},

{

type: "Select",

label: "性别",

value: "sex",

prop: "sex",

width: "120px",

// size: "small",

options: sexs,

props: sexProps,

change: row => {

console.log(row);

},

placeholder: "请选择性别"

},

{

type: "Checkbox",

label: "爱好",

value: "interst",

prop: "interst",

checkboxs: intersts,

props: interstProps,

size: "small",

width: "180px"

}

],

rulesTest: {

gonghao: [

{ required: true, message: "请输入活动名称", trigger: "blur" }

],

enName: [

{ required: true, message: "请输入活动名称", trigger: "blur" }

],

date: [{ required: true, message: "请输入活动名称", trigger: "change" }]

},

form: {

model1: "model1",

model2: "",

model3: "",

model4: "",

model5: "",

model6: "",

model7: "hahaBB",

model9: "model9",

model10: "",

model11: "",

model12: "",

model13: "",

model17: "",

model18: "",

model19: "",

model20: "",

model21: "",

model22: "",

model23: "",

model24: "",

model25: "",

model26: ""

},

rulesF: {

model1: [{ required: true, message: "必填项", trigger: "blur" }],

model2: [{ required: true, message: "必填项", trigger: "blur" }],

model3: [{ required: true, message: "必填项", trigger: "blur" }],

model4: [{ required: true, message: "必填项", trigger: "blur" }],

model5: [{ required: true, message: "必填项", trigger: "blur" }],

model6: [{ required: true, message: "必填项", trigger: "blur" }],

model7: [{ required: true, message: "必填项", trigger: "blur" }],

model8: [{ required: true, message: "必填项", trigger: "blur" }],

model9: [{ required: true, message: "必填项", trigger: "blur" }],

model10: [{ required: true, message: "必填项", trigger: "blur" }],

model11: [{ required: true, message: "必填项", trigger: "blur" }],

model12: [{ required: true, message: "必填项", trigger: "blur" }],

model13: [{ required: true, message: "必填项", trigger: "blur" }],

model14: [{ required: true, message: "必填项", trigger: "blur" }],

model15: [{ required: true, message: "必填项", trigger: "blur" }]

},

rules: {

value: [

{ required: true, message: "请输入活动名称", trigger: "blur" },

{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }

]

},

table: {

customerList: [

{

index: 1,

field_title: "大众1",

value: "dazong1",

placeholder: "提示语1",

field_type: "0",

is_show: "1",

field_value: [],

rules: {

value: [

{

required: true,

message: "请输入优惠券名称1",

trigger: "blur"

}

]

}

},

{

index: 2,

field_title: "大众2",

value: "dazong2",

placeholder: "提示语2",

field_type: "0",

is_show: "1",

field_value: [],

rules: {

value: [

{

required: true,

message: "请输入优惠券名称2",

trigger: "blur"

}

]

}

},

{

index: 3,

field_title: "大众3",

value: "dazong3",

placeholder: "提示语3",

field_type: "0",

is_show: "1",

field_value: [],

rules: {

value: [

{

required: true,

message: "请输入优惠券名称3",

trigger: "blur"

}

]

}

},

{

index: 4,

field_title: "大众",

value: "",

placeholder: "提示语4",

field_type: "3",

is_show: "1",

field_value: ["开发", "测试", "实现"],

rules: {

value: [

{

required: true,

message: "请输入优惠券名称4",

trigger: "change"

}

]

}

}

]

}

};

},

methods: {

ArrChange(value) {

console.log(value);

var arr = value;

this.newArr = this.Arr.filter(item => {

return arr.indexOf(item.value) >= 0;

});

console.log(this.newArr);

// this.newArrForm = _.cloneDeep(this.newArr);

},

submitForm(formName) {

this.$refs[formName].validate(valid => {

if (valid) {

alert("submit!");

} else {

console.log("error submit!!");

return false;

}

});

},

resetForm(formName) {

this.$refs[formName].resetFields();

},

submitForm1(formName) {

this.$refs[formName].validate(valid => {

if (valid) {

alert("submit!");

} else {

console.log("error submit!!");

return false;

}

});

},

resetForm1(formName) {

this.$refs[formName].resetFields();

},

submitForm3(formName) {

console.log(this.testform);

this.$refs[formName].validate(valid => {

if (valid) {

alert("submit!");

} else {

console.log("error submit!!");

return false;

}

});

}

}

};

</script>

<style lang="scss">

.flexA {

display: flex;

justify-content: space-between;

}

.flexB {

width: 30%;

}

.flexC {

display: flex;

justify-content: space-around;

flex-wrap: wrap;

width: 100%;

.el-form-item {

width: 21%;

}

}

.flexD {

display: flex;

justify-content: space-around;

flex-wrap: wrap;

.el-form-item {

width: 22%;

}

}

.checkboxMine {

overflow: auto;

.el-checkbox {

width: 140px;

margin-bottom: 12px;

position: relative;

.el-checkbox__input {

position: absolute;

right: 0;

}

}

}

</style>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。