精华内容
下载资源
问答
  • 推荐几款Vue生成动态表单开源插件(库)
    千次阅读
    2020-01-09 15:29:10

    1. Form Making

    1.1 演示地址

    1.2 仓库地址
    GitHub

    1.3 相关文档

    2. Form Generator

    2.1 演示地址

    2.2 仓库地址
    GitHub
    码云

    2.3 相关文档

    3. Form Create

    3.1 仓库地址
    GitHub
    码云

    3.2 相关文档
    更多相关内容
  • 使用Vue生成动态表单

    2020-10-15 22:56:27
    主要介绍了Vue生成动态表单功能,这是小编第一次接这个需求,作为前端开发的我真的不知如何下手,今天小编通过一段代码给大家分享vue生成动态表单效果,需要的朋友可以参考下
  • 主要介绍了使用Vue动态生成form表单的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • Vue生成动态表单

    千次阅读 2020-02-18 11:37:36
    需求背景 开需求会了,产品说这次需求的表单比较多,目前有18个,后期的表单可能会有增加、修改。我作为这次的前端开发,...后来重新评审了需求,系统部分由后端自行开发,我要处理的部分是动态生成表单,展现提...

    需求背景

    开需求会了,产品说这次需求的表单比较多,目前有18个,后期的表单可能会有增加、修改。我作为这次的前端开发,看到这样的需求,心里知道要这样搞不得把自己累死,首先表单居多,还会有变更,以后维护起来也让人心力憔悴。

    于是我提议做动态表单,做一个表单的配置系统,在系统里配置表单类型、表单得字段、以及对表单得管理。后来重新评审了需求,系统部分由后端自行开发,我要处理的部分是动态生成表单,展现提交的表单,以及对表单的处理情况。

    数据接口设计

    表单类型的接口就不用说了,这个比较简单。我跟后端约定了一个预备创建工单接口,这个接口是后端告知前端,需要生成一个什么样的表单。

    预备创建表单接口(其中字段解释说明):

    • id 表单字段的id
    • name 表单字段的名称(存数据库的字段名)
    • type 表单字段的类型(select_item下拉列表、string单行文本、multiple多行文本、integer单行数字、images上传图片)
    • title 表单字段的中文名(动态表单的字段名称)
    • prompt_msg 表单字段的placeholder文案
    • selectObj type类型为select_item的时候,selectObj有值,默认为null
    {
        "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 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的数字、上传图片的属性值是数组。

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

    作者:胖脸猫
    链接:https://www.jianshu.com/p/ae50ece6cbaa
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • 主要介绍了vue构建动态表单的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue动态生成表单

    2020-12-28 10:55:59
    利用component is 动态组件,根据不同的组件类型标识,渲染展示不同的组件 在利用组件的数据通信去收集各个子组件的数据 实现demo 三个表单组件,用了element-ui, 此处用了自定义组件的v-model来收集子组件的数据 /...

    转载(https://www.jianshu.com/p/5bb791ba303d)
    思路

    先写好各个可能会出现的表单或者自定义的组件,引入。

    此时后端可能会给到一个对象型数组,每个对象有要渲染组件的一个类型标识

    利用component is 动态组件,根据不同的组件类型标识,渲染展示不同的组件

    在利用组件的数据通信去收集各个子组件的数据

    实现demo

    三个表单组件,用了element-ui,

    此处用了自定义组件的v-model来收集子组件的数据

    //InputComponent.vue  要渲染的子组件
    <template>
      <el-input :value="username" @input="inputHandler"></el-input>
    </template>
    
    <script>
      export default {
        name: 'InputComponent',
        data() {
          return {
    
          }
        },
        model: {
          prop: 'username',
          event: 'input'
        },
        props: {
          username: String
        },
        methods: {
          inputHandler(ev) {
            console.log(ev)
            this.$emit('input', ev)
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>
    
    //SwitchComponent.vue  要渲染的子组件
    <template>
      <el-switch
        :value="checked"
        active-color="#13ce66"
        inactive-color="#ff4949"
        @change="changeHandler"
      >
      </el-switch>
    </template>
    
    <script>
      export default {
        name: 'SwitchComponent',
        data() {
          return {
    
          }
        },
        model: {
          prop: 'checked',
          event: 'change'
        },
        props: {
          checked: {
            default: true
          }
        },
        methods: {
          changeHandler(ev) {
            this.$emit('change', ev)
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>
    
    
    //SelectComponent.vue  要渲染的子组件
    <template>
      <el-select :value="role" placeholder="请选择" @change="changeHandler">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.label">
        </el-option>
      </el-select>
    </template>
    
    <script>
      export default {
        name: 'SelectComponent',
        data () {
          return {
            options: [
              {
                value: '1',
                label: '李世民'
              },
              {
                value: '2',
                label: '嬴政'
              },
              {
                value: '3',
                label: '刘邦'
              },
              {
                value: '4',
                label: '项羽'
              },
              {
                value: '5',
                label: '范蠡'
              }
            ],
            value: ''
          }
        },
        model: {
          prop: 'role',
          event: 'change'
        },
        props: {
          role: {
            default: ''
          }
        },
        methods: {
          changeHandler(ev) {
            this.$emit('change', ev)
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>
    
    
    

    主组件(父组件)

    此处用了自定义组件的v-model来收集子组件的数据

    //Main.vue  父组件
    <template>
      <div>
          <el-form :model="formData">
            <el-form-item v-for="(item, index) in formItemList" :key="index" :label="item.label">
              <component
                :is="item.type"
                v-model="formData[item.key]"
              >
              </component>
            </el-form-item>
          </el-form>
      </div>
    </template>
    
    <script>
    //引入三个表单组件
      import InputComponent from './subComponents/InputComponent'
      import SelectComponent from './subComponents/SelectComponent'
      import SwitchComponent from './subComponents/SwitchComponent'
    
      export default {
        name: 'Main',
        data() {
          return {
            //数据的type值要与组件的名字对应  
            formItemList: [
              { type: 'switch-component', require: true, label: '开关', key: 'isOpen' },
              { type: 'input-component', require: true, label: '姓名', key: 'name' },
              { type: 'select-component', require: true, label: '角色', key: 'role' },
            ],
            formData: {
    
            }
          }
        },
        components: {
          InputComponent,
          SwitchComponent,
          SelectComponent,
        },
        methods: {
    
        }
      }
    </script>
    
    <style scoped lang="less">
      
    </style>
    
    
    展开全文
  • 主要介绍了Vue+Element实现动态生成表单并添加验证功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue 动态生成表单组件,可以根据数据配置表单,使用的UI库是。 有问题或BUG欢迎提 表单组件 Input 输入框 Button 按钮 Radio 单选框 Checkbox 多选框 Icon 图标 Switch 开关 Select 选择器 Slider 滑块 DatePicker ...
  • 需求背景开需求会了,产品说这次需求的表单比较多,目前有19个,后期的表单可能会有增加、修改。我作为这次的前端开发...后来重新评审了需求,系统部分由后端自行开发,前端要处理的部分是动态生成表单,展现提交...

    需求背景

    开需求会了,产品说这次需求的表单比较多,目前有19个,后期的表单可能会有增加、修改。我作为这次的前端开发负责人,看到这样的需求,心里知道要这样搞不得把前端累死,首先表单居多,还要变更,以后维护起来也让人心力憔悴。

    于是我提议做动态表单,做一个表单的配置系统,在系统里配置表单类型、表单得字段、以及对表单得管理。后来重新评审了需求,系统部分由后端自行开发,前端要处理的部分是动态生成表单,展现提交的表单,以及对表单的处理情况。

    数据接口设计

    表单类型的接口就不用说了,这个比较简单。我跟后端约定了一个预备创建工单接口,这个接口是后端告知前端,需要生成一个什么样的表单。

    预备创建表单接口(其中字段解释说明):

    id 表单字段的id

    name 表单字段的名称(存数据库的字段名)

    type 表单字段的类型(select_item下拉列表、string单行文本、multiple多行文本、integer单行数字、images上传图片)

    title 表单字段的中文名(动态表单的字段名称)

    prompt_msg 表单字段的placeholder文案

    selectObj type类型为select_item的时候,selectObj有值,默认为null

    {

    "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 组件。

    {{ item.title }}

    :max-num="8"

    :user-imgs="project_image"

    @change="onUploadProject"

    />

    复制代码

    2. 多行输入框组件

    默认多行输入框为3行

    {{ item.title }}

    rows="3"

    :placeholder="item.prompt_msg"

    v-model="value"

    :value="it.item">

    复制代码

    3. 下拉选择框组件

    使用了element-ui的 el-select

    {{ item.title }}

    v-model="value"

    placeholder="请选择类型"

    class="el-select-wrap"

    size="mini"

    @change="onChangeFirstValue"

    >

    v-for="it in item.selectObj"

    :key="it.id"

    :label="it.item"

    :value="it.item">

    复制代码

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

    组件都创建好了,为了方便统一管理这些自定义组件。将组件们引入再导出,通过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属性为动态组件名。

    v-for="(item, number) in freedomConfig"

    :key="item.name"

    :is="item.type"

    :item="item"

    :number="number"

    @changeComponent="changeComponentHandle"

    >

    export default {

    components: itemElements,

    }

    复制代码

    上面完成后,动态表单展现出来了。表单是动态生成的,如何进行表单验证,和表单数据的汇总呢?

    表单数据汇总

    再动态渲染组件的时候,传入了 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的数字、上传图片的属性值是数组。

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

    展开全文
  • vueelementui动态表单

    2019-08-12 02:38:21
    vue-element-ui动态表单
  • pattern.test(value)) { callback(new Error('请输入正确的电话')) } else { callback() } } } const $vue = new Vue({ el: "#main", data: { formItemList: [],//表单字段集合 formValidateRules: {},//表单验证...
  • vue动态生成表单元素基础篇

    千次阅读 2018-11-28 11:13:21
    这里讲解一个vue生成表单的简单实例: (图一) (图二) (图三) 如上图所示: 图一: 空的输入框的情况 图二: 点击 “+” 添加生成表单的情况 图三: 表单中可以输入值,并且可以点击“—”删除和点击“+”...
  • vue动态生成表单元素

    千次阅读 2018-11-15 14:44:57
    单机生成表单生成表单 根据选择方式展示不同的表单元素 如果从编辑页进入该页面有数据的话,进行数据回填 样式同第三点相似,这里不再说明 思路: 请输入标题,请选择类型 为父组件;请选择方式 为子组件...
  • VUE动态生成word的实现

    2020-10-15 02:02:04
    主要介绍了VUE动态生成word的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue+Element动态表单动态表格,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了vue+element创建动态的form表单动态生成表格的行和列 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 一个基于vue.js和element-ui可以动态生成表单项form表单动态form表单是基于element-ui里的el-form表单基础上进行修改而来,它实现了新增表单项、删除表单项、表单验证和重置表单表单提交等form表单所拥有的基本...
  • 介绍 form-create 是一个可以通过 JSON 生成... 通过 JSON 生成表单 通过 Maker 生成表单 强大的API,可快速操作表单 双向数据绑定 事件扩展 局部更新 数据验证 栅格布局 内置组件17种常用表单组件 对比 1.x
  • 教你如何使用vue轻松构建动态表单

    千次阅读 2021-02-16 16:45:02
    form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的动态表单组件。支持3个UI框架,并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。
  • Vue动态生成form表单+校验

    千次阅读 2022-04-08 15:35:04
    Vue动态生成form表单+校验
  • 主要介绍了使用form-create动态生成vue自定义组件和嵌套表单组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue: 动态表单实现(单问题线) 这个是工作中的一个需求,当然需求比较浅,适当的扩展实现了一下,写个博客记录一下当下的逻辑思想 需求如上图,简单来说就是一个select选择不同的答案,后面可以会多出不同的题目。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,188
精华内容 8,075
关键字:

vue生成动态表单

友情链接: S1_2t.rar