使⽤Vue⽣成动态表单
自我评价简历怎么写开需求会了，产品说这次需求的表单⽐较多，⽬前有18个，后期的表单可能会有增加、修改。我作为这次的前端开发，看到这样的需求，⼼⾥知道要这样搞不得把⾃⼰累死，⾸先表单居多，还会有变更，以后维护起来也让⼈⼼⼒憔悴。
于是我提议做动态表单，做⼀个表单的配置系统，在系统⾥配置表单类型、表单得字段、以及对表单得管理。后来重新评审了需求，系统部分由后端⾃⾏开发，我要处理的部分是动态⽣成表单，展现提交的表单，以及对表单的处理情况。
数据接⼝设计
表单类型的接⼝就不⽤说了，这个⽐较简单。我跟后端约定了⼀个预备创建⼯单接⼝，这个接⼝是后端告知前端，需要⽣成⼀个什么样的表单。
预备创建表单接⼝（其中字段解释说明）：
id
name
type
title
prompt_msg
selectObj
{
"code": 0,
"msg": "success",
"data": {
"list": [{
"id": 10,
"name": "check_type",
"type": "select_item",
"title": "审核类型",
"prompt_msg": "请填写审核类型",
"selectObj": [{
"id": 1,
"item": "预审核"
}, {
"id": 2,
"item": "患者审核"
}],
"val": null,
"rank": 0
}, {
"id": 16,
"name": "bank_branch_info",
"type": "string",
拉杆箱品牌"title": "⽀⾏信息",
"prompt_msg": "请填写⽀⾏信息",
"selectObj": null,
"val": null,
"rank": 0
}, {
"id": 19,
"name": "project_content",
"type": "multiple",
"title": "项⽬内容",
"prompt_msg": "请填写项⽬内容",
"selectObj": null,
"val": null,
"rank": 0
}, {
"id": 22,
"name": "project_extension_time",
"type": "integer",
"title": "项⽬延长时间",
"prompt_msg": "请填写项⽬延长时间",
"selectObj": null,
"val": null,
"rank": 0
}, {
"id": 24,
"name": "images",
"type": "images",
"prompt_msg": "请上传图⽚",
"selectObj": null,
"val": null,
"rank": 0
}]
}
}
通过Vue动态组件渲染表单
现在预备创建表单接⼝⽂档都了，该怎么渲染动态表单呢？动态表单的元素类型有5类，按照这个类别创建五个元素组件。
1. 上传图⽚组件
上传图⽚组件这⾥使⽤了 Uploader 组件。
<template>
<div class="default images">
<div class="lable">{{ item.title }}</div>
<div v-if="item.val === null" class="content">
<Uploader
:max-num="8"
:user-imgs="project_image"
@change="onUploadProject"
/>
网王同人bl小说</div>
<div v-else class="img-wrap">
<img v-for="(it, idx) in item.val" :src="it" :key="idx" @click="preview(idx, item.val)">
</div>
</div>
</template>
2. 多⾏输⼊框组件
默认多⾏输⼊框为3⾏
<template>
<div v-if="item" class="default multiple">
<div class="lable">{{ item.title }}</div>
<template>
<textarea
rows="3"
:
placeholder="item.prompt_msg"
v-model="value"
:value="it.item">
</template>
</div>
</template>
3. 下拉选择框组件
使⽤了element-ui的 el-select
<template>
<div v-if="item" class="default select_item">
<div class="lable select-lable">{{ item.title }}</div>
<div class="content">
<el-select
v-model="value"
placeholder="请选择类型"
class="el-select-wrap"
size="mini"
@change="onChangeFirstValue"
>
<el-option
v-for="it in item.selectObj"
:key="it.id"
:
label="it.item"
历史朝代排序:value="it.item">
</el-option>
</el-select>
</div>
</div>
其它两个数字单⾏输⼊框组件、⽂本单输⼊框组件跟多⾏输⼊框组件类似。
组件都创建好了，为了⽅便统⼀管理这些⾃定义组件。将组件们引⼊再导出，通过export default复合的形式。
// 单⾏⽂本输⼊框组件
export { default as String } from './string.vue'
// 单⾏数字输⼊框组件
export { default as Integer } from './integer.vue'
// 多⾏⽂本输⼊框组件
export { default as Multiple } from './multiple.vue'乞巧古诗的注释和译文
// 下拉列表选择器组件
export { default as Select_item } from './select_item.vue'
// 上传图⽚组件
export { default as Images } from './images.vue'
再动态表单页⾯统⼀引⼊，以Vue动态组件的形式进⾏渲染， is 属性为动态组件名。
<template>
<div class="g-container">
<component
v-for="(item, number) in freedomConfig"
:key="item.name"
:is="pe"
:item="item"
:number="number"
@changeComponent="changeComponentHandle"
></component>
</div>
</template>
<script>
import * as itemElements from '../../components/itemElement'
export default {
components: itemElements,
}
</script>
上⾯完成后，动态表单展现出来了。表单是动态⽣成的，如何进⾏表单验证，和表单数据的汇总呢？
表单数据汇总
再动态渲染组件的，传⼊了 number 参数，这个参数⽤来标识当前组件位于动态表单的第⼏个，⽅便后期填⼊数据后，进⾏数据保存。
默认value属性值为空，对value进⾏监听，当value变动的时候进⾏emit，告诉⽗组件数据变更了，请保存。
data() {
return {王棠云依偎余文乐
value: ''
}
},
watch: {
value(v, o) {
this.throttleHandle(() => {
this.$emit('changeComponent', {
number: this.number,
value: this.$data.value
})
})
}
},
但是数据保存到哪⾥？怎么保存呢？让后端给⼀个表单全部字段的接⼝，取到数据存到data中，每次数据更新就去查是否存在这个字段，有的话就赋值保存起来。后⾯提交的时候，就提交这个对象。
表单校验
提交的时候，希望⽤户能够把表单填完再调⽤提交接⼝，需要前端校验是否填完没有的话，就给响应的toast请提⽰，阻⽌表单提交。
this.checkFrom(freedomConfig, preWordorderData).then(canSubmit => {
canSubmit && postSubmitWorkorder(preWordorderData).then(res => {
if (de === 0) {
showLoading()
this.$router.push(`/detail/${res.data.id}`)
}
})
})
checkFrom 为我们的校验⽅法，循环遍历预创建表单，从data⾥查看该字段是否有值，没有的话就给于toast提⽰。并返回⼀个promise， resolve(false) 。如果都校验通过返回 resolve(true) 。这样就可以使checkFrom成为⼀个异步函数。
其中需要注意的是下拉框选择后的值为⼤于0的数字、上传图⽚的属性值是数组。
⼀个动态表单的创建、校验、数据整合就完成了。很多时候需要写⼤量代码的场景思路上很简单，反倒是抽象⼀个组件需要考虑的更多。
总结
以上所述是⼩编给⼤家介绍的使⽤Vue⽣成动态表单，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论