vue动态生成表单组件vue-form-maker

cjie 发布于2019-08-23 14:16 / 886人阅读

摘要：项目地址简介动态生成表单组件可以根据数据配置表单使用的库是在里一般要用到什么组件或数据都得提前声明所以要根据数据来生成表单只能使用的函数要做这一个组件其实并不难看一下官方示例再找个组件库差不多就能写出来如果对项目有兴趣可以或克隆项目自行研究

项目地址 简介

Vue动态生成表单组件可以根据数据配置表单使用的UI库是iView

在Vue里一般要用到什么组件或数据都得提前声明

所以要根据数据来生成表单只能使用Vue的render函数

要做这一个组件其实并不难看一下Vue官方示例再找个UI组件库差不多就能写出来

如果对项目有兴趣可以fork或克隆项目自行研究

有问题或BUG欢迎提issues

文档 在线DEMO 表单组件

Input 输入框

Button 按钮

Radio 单选框

Checkbox 多选框

Icon 图标

Switch 开关

Select 选择器

Slider 滑块

DatePicker 日期选择器

TimePicker 时间选择器

Cascader 级联选择器

InputNumber 数字输入框

Rate 评分

Upload 上传

ColorPicker 颜色选择器

使用 在单文件组件中引用

npm i vue-form-maker

import iView from "iview"
import VueFormMaker from "vue-form-maker"
import "iview/dist/styles/iview.css"

Vue.use(iView)
Vue.use(VueFormMaker)

在HTML文件中直接引用

使用的是dist目录中的vue-form-maker.js

如果对你有帮助，请给个Star

私有云服务器托管 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

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

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

基于Vue,ElementUI开发的一款表单设计器

摘要：介绍基于开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来工具地址地址特性可视化配置页面提供栅格布局，并采用实现对齐一键预览配置的效果一键生成配置数据一键生成代码，立即可运行提供自定义组件满足用户自定义介绍基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来工具地址：http://to...

DandJ 2019-08-23 12:13 评论0 收藏0
vue构建动态表单

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

BlackHole1 2019-08-26 12:20 评论0 收藏0
动态生成form表单,不再为表单烦恼

摘要：具有数据收集校验和提交功能的表单生成器，支持双向数据绑定和事件扩展，组件包含有复选框单选框输入框下拉选择框等表单元素以及省市区三级联动时间选择日期选择颜色选择滑块评分框架树型文件图片上传等功能组件。 form-create 具有数据收集、校验和提交功能的表单生成器，支持双向数据绑定和事件扩展，组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,...

kamushin233 2019-08-22 14:53 评论0 收藏0
使用form-create轻松生成高品质的form表单[附原理图]

摘要：目的是节省开发人员在表单页面上耗费的时间，从而更专注于功能开发。使用可快速便捷的生成日常开发中所需的各种表单。可通过后端返回生成规则，进行渲染。 form-create 具有动态渲染、数据收集、校验和提交功能的表单生成器，支持双向数据绑定、事件扩展以及自定义组件，可快速生成包含有省市区三级联动、时间选择、日期选择等17种功能组件。已兼容iview2.和iview3.版本 Github...

phodal 2019-08-23 14:13 评论0 收藏0
vue2 中如何实现动态表单增删改查

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

StonePanda 2019-08-20 16:59 评论0 收藏0