项目地址
简介
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-makerimport VueFormMaker from 'vue-form-maker'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
// 如需使用城市数据 可以这样引用
// 省 市 县
import 'vue-form-maker/dist/cityData3Level'
// 省 市
import 'vue-form-maker/dist/cityData2Level'
// 城市数据文件定义了一个全局变量cityData 在项目里直接使用cityData即可
Vue.use(ViewUI)
Vue.use(VueFormMaker)<template>
<div id="app">
<VueFormMaker :options="options"/>
// 或者 <vue-form-maker :options="options"/>
</div>
</template>在HTML文件中直接引用
使用的是dist目录中的vue-form-maker.js
<link rel="stylesheet" type="text/css" href="iview.css"><div id="app">
<vue-form-maker :options="options"/>
</div><script src="vue.js"></script>
<script src="iview.js"></script>
<script src="vue-form-maker.js"></script>如果对你有帮助，请给个Star
-
项目地址 简介 Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 在Vue里 一般要用到什么组件或数据 都得提前声明 所以要根据数据来生成表单 只能使用Vue的render函数 要做这一个组件 其实并不难 看一下Vue官方示例 再找个UI组件库 差不多就能写出来 如果对项目有兴趣 可以fork或克隆项目 自行研究 有问题或BUG欢迎提issues 文档 在线DEMO 表单组件
-
vue-form-making 开发指南 安装 npm 安装 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 npm install form-making -S CDN 目前可以通过 unpkg.com/form-making获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式 --> <link rel="stylesh
-
问题描述 在vue项目中使用form-create追加rule的情况会导致select选项的数据丢失 例如：官方指南里面的4中追加rule的方法，push和append以及splice原理都是修改rule，在数组后面或者前面追加新的规则。 但是有一个问题，就是我新加的rule以后，会把已经选中的下拉框状态清除，必填项会重新红字提醒。 <template> <div> <form-cre
-
本文向大家介绍使用Vue生成动态表单，包括了使用Vue生成动态表单的使用技巧和注意事项，需要的朋友参考一下 开需求会了，产品说这次需求的表单比较多，目前有18个，后期的表单可能会有增加、修改。我作为这次的前端开发，看到这样的需求，心里知道要这样搞不得把自己累死，首先表单居多，还会有变更，以后维护起来也让人心力憔悴。 于是我提议做动态表单，做一个表单的配置系统，在系统里配置表单类型、表单得字段、以及
-
问题内容： 我正在使用“ revalidate”来验证“ redux- form”表单，但是我面对这种情况，其中存在一个基于我在其上映射并在表单内显示输入的API响应动态生成的表单。 这是我通常如何使用“重新验证…”验证“ redux表单”的示例 现在，如何使用自动生成的表单执行类似的操作？ 问题答案： 这个想法是让从它是第二个参数的功能，并请你来填充验证使用它们。 由于是一个高阶函数，因此在运行
-
需求: 每个页面进去是一个不一样的form表单，form中的item属性都是自定义不确定的 问题: springboot+vue, mysql怎么设置字段存储form动态表单? 使用json记录整个form 使用varchar记录整个form 使用text 记录整个form 把form中的item分开记录,如type：varchar;title:varchar;value:varchar;....
-
本文向大家介绍Vue+Element实现动态生成新表单并添加验证功能，包括了Vue+Element实现动态生成新表单并添加验证功能的使用技巧和注意事项，需要的朋友参考一下 首先有一个这样的需求，表单中默认有一个联系人信息，用户可以再添加新的联系人信息 点击添加更多联系人之后 官方文档中有写用v-for来实现新增表单，但是那是单表单的新增，现在多表单的新增，可以考虑的实现方法是先写死一个必须的表单，
-
问题内容： 我有一个Webapp，允许用户创建自己的字段，以供以后使用表单呈现。 我有一个像这样的Formfield模型： 我用来代表字段的类型，无论是哪种类型（复选框，输入，以后都会有更多）。 如你所见，每个字段都有一个form_id的FK。 我正在尝试为给定的form_id生成动态表单。问题是我需要确定要为每个Formfield呈现的字段的类型。因此，我还需要在某个时候处理字段类型。 我想一个
-
基于文档:http://symfony.com/doc/2.8/form/dynamic_form_modific.html#form-events-submitted-data 我准备了动态生成表单。所有的工作都正常，但只有当我使用form添加新数据（/new）时，当我使用相同的form编辑现有数据时--不工作 “约会”的简单形式。它应该是这样工作的：用户选择客户机，然后第二个“选择”是填充正确
-
我是Vue.js的新手。我正在创建一个应用程序，其中我使用Vuetify和nuxt，并希望有一个可重用的编辑器模式。到目前为止，我发现我可以使用V-Dialog。我有一个宠物列表，我想要一个编辑器，该宠物弹出时，单击编辑操作链接每行。编辑器应该从后端加载pet对象并显示编辑器表单。当点击模式中的Save按钮时，宠物应该被保存并通知家长，以便它可以更新列表。我希望能够添加宠物在另一个页面（例如在一个
-
如何访问父组件中的窗体状态 这就是我正在做的（只是一个简短的代码，请忽略语法） 现在的问题是，如果onSelect handler（）中的子对象脏了，我无法通知父对象不要呈现该子对象。我不能在render方法中执行setState，至少我可以提前通知使用componentDidUpdate，谢谢