使用Vue生成动态表单


Posted in Javascript onNovember 26, 2019

开需求会了,产品说这次需求的表单比较多,目前有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",
  "title": "图片",
  "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"
      />
    </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>
</template>

其它两个数字单行输入框组件、文本单输入框组件跟多行输入框组件类似。

组件都创建好了,为了方便统一管理这些自定义组件。将组件们引入再导出,通过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="item.type" 
      :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 (res.code === 0) {
      showLoading()
      this.$router.push(`/detail/${res.data.id}`)
    }
  })
})

checkFrom 为我们的校验方法,循环遍历预创建表单,从data里查看该字段是否有值,没有的话就给于toast提示。并返回一个promise, resolve(false) 。如果都校验通过返回 resolve(true) 。这样就可以使checkFrom成为一个异步函数。

其中需要注意的是下拉框选择后的值为大于0的数字、上传图片的属性值是数组。

一个动态表单的创建、校验、数据整合就完成了。很多时候需要写大量代码的场景思路上很简单,反倒是抽象一个组件需要考虑的更多。

总结

以上所述是小编给大家介绍的使用Vue生成动态表单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
url地址自动加#号问题说明
Aug 21 Javascript
js单例模式的两种方案
Oct 22 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
小程序实现上下切换位置
Nov 16 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 #Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 #Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 #Javascript
vue element-ui读取pdf文件的方法
Nov 26 #Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 #Javascript
jQuery实现轮播图效果
Nov 26 #jQuery
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 #Javascript
You might like
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
一个php作的文本留言本的例子(四)
2006/10/09 PHP
php上传、管理照片示例
2006/10/09 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
兼容ie和firefox js关闭代码
2008/12/11 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
js回调函数仿360开机
2019/12/26 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Python中修改字符串的四种方法
2018/11/02 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
python实现大学人员管理系统
2019/10/25 Python
python中pyplot基础图标函数整理
2020/11/10 Python
Python识别处理照片中的条形码
2020/11/16 Python
详解python的变量缓存机制
2021/01/24 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
介绍一下Java的事务处理
2012/12/07 面试题
管理站站长岗位职责
2013/11/27 职场文书
上级检查欢迎词
2014/01/18 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
基层党支部整改方案
2014/10/25 职场文书