vue构建动态表单

BlackHole1 发布于2019-08-26 12:20 / 2079人阅读

摘要：概述后台管理系统里面有非常多的表单需求，我们希望能够通过写一个格式的数据，通过的循环动态地去渲染动态表单。我结合的控件的下拉框输入框，时间选择控件和，做了一个动态表单。

概述

后台管理系统里面有非常多的表单需求，我们希望能够通过写一个json格式的数据，通过vue的循环动态地去渲染动态表单。并且能够在外部得到渲染出来的表单的数据，可以对表单进行重置操作。我结合element ui的控件的下拉框,输入框，时间选择控件和vue-treeselect，做了一个动态表单。

v-model的理解

先简单讲一下vue-model是怎么玩的。其实vue-model相当于给表单元素传递一个value,外部监听input事件。所以我们自己封装表单组件的时候也是可以传递一个value值，监听input事件获取输入的值。

封装表单组件

组件最重要的开发思想就是设计好输入输出。这里就以下拉框组件为例吧。使用的是element ui的下拉框，进行一个简单封装。
输入：name:每个表单的数据标识，如区域编码输入框，父元素应该传递areaCode过来。

 value: 表单选择/输入的值，从父元素获取后赋值给currentValue，通过监听父元素的值实现同步变 
        化。
 options:下拉框要渲染的选项值，一般是个对象数组。

输出：onInputEvent，emit一个input事件，让父元素能够感知组件的数据变化。
也就是可以在组件使用的地方监听input事件

一点封装

由于每个表单组件都是监听父元素的value值变化，数据变化时都是触发onInputEvent并执行this.$emit("input"),所以我们可以把这部分内容抽取出来放在mixins里面。
form-model.js

export default {
  props: ["name", "value"],

  data () {
    return {
      currentValue: this.value
    };
  },
  methods: {
    onInputEvent(value) {
      this.$emit("input", this.name, value);
    },
    reset() {
      this.currentValue = "";
    }
  },
  watch: {
    value (val) {
      this.currentValue = val;
    }
  }
};

然后我们的下拉框组件就可以少写一些共用的代码，直接用 mixins: [formMixins]

动态生成表单

这里主要是根据配置的数据，循环生成表单组件。默认提供提交和重置按钮，如果不需要可以通过slot传递其他操作按钮。这里的要点主要有：
监听表单组件的数据变化：
每个表单组件都有一个name标识它的业务含义，绑定的数据也是formData[field.name]，@input事件传递updateForm，在updateForm里面更新this.formData[name]，保证了this.formData里面的数据是和表单组件选择/填写的内容一致。
重置时改变表单组件的数据：
因为组件内部会监听父元素的value，所以这里只要清空this.formData的值，组件内部的数据也会跟着清空。

业务使用的地方

像下拉框的选择数据，这些应该是后台渲染的，所以我们暂时用setTimeout模拟一下。感觉这里this.config.fieldsConfig[4].options写的不太优雅，依赖于配置数据的顺序肯定不是啥好事情。求大神指点。

大概就是这样的思路，我们希望我们只要写上面那样子的配置数据就可以动态生成各种这样的表单组件，不用写一大堆重复代码。如果有更好的解决办法，欢迎和我联系。另外，代码路径https://github.com/supportlss...

GPU云服务器云服务器 vue表单控件 php 动态改变表单用php输出动态表单 Vue_Vue

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108534.html

vue项目中的常见问题（vue-cli版本3.0.0）

摘要：在要改变的样式前加二问题去掉项目路径中的主要用到的模式。这里建议你直接看官网的，版本的和版本的不同。当浏览器窗口变小时，组件宽度不随窗口响应变小。这里我们需要冲突掉中的样式，该值不能设置成可以改成小于即可。一、样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev 在使用时在style标签中加入 lang...

wangbjun 2019-08-22 16:08 评论0 收藏0
VUE

摘要：注意指令前面需要加，对指令传递数据赋值使用例如约定速成加上，表示自定义指令不要使用驼峰式命名。需要通过方法实现自定义指令注册完成。 vue Vue.js 构建数据驱动的web界面库。集中实现MVVM 的 VM层。容易与其他库或项目整合通过尽可能简单的API实现相应的数据绑定和组合的视图组件核心：相应的数据绑定系统，数据与DOM保持同步数据驱动的视图，普通的HTML模板中使用特殊的语...

bergwhite 2019-08-19 18:39 评论0 收藏0
vue 起步

摘要：的二大核心响应式数据变化当视图发生改变，数据自动更新。组合的视图组件页面映射为组件树划分组件可复用利于维护。正在不断的学习中希望各位指点错误，一起讨论，一起进步，后续更新中 Vue是一套用于构建用户界面的渐进式框架，Vue的核心库只关注视图层，不仅容易上手，还便于与第三方库既有项目整合，相互独立而又可以任意整合。 showImg(https://segmentfault.com/img...

hyuan 2019-08-26 11:49 评论0 收藏0
vue2 中如何实现动态表单增删改查

摘要：最近项目中遇到的需求是要操作大量的表单，之前的项目中有做过这方的研究，只不过是用来操作。添加操作上面的只是其中一个动态列表。最近项目中遇到的需求是要操作大量的表单，之前的项目中有做过这方的研究，只不过是用jquery来操作。项目A 先简单说说以前项目A中的应用场景，可能有小伙伴儿也遇到相同的需求。A项目是公司的OA系统中有的项目，是用java的jsp渲染的页面，需求是要改成：嵌入A...

StonePanda 2019-08-20 16:59 评论0 收藏0
vue2 中如何实现动态表单增删改查

摘要：最近项目中遇到的需求是要操作大量的表单，之前的项目中有做过这方的研究，只不过是用来操作。添加操作上面的只是其中一个动态列表。最近项目中遇到的需求是要操作大量的表单，之前的项目中有做过这方的研究，只不过是用jquery来操作。项目A 先简单说说以前项目A中的应用场景，可能有小伙伴儿也遇到相同的需求。A项目是公司的OA系统中有的项目，是用java的jsp渲染的页面，需求是要改成：嵌入A...

mmy123456 2019-07-31 10:58 评论0 收藏0