介绍

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。

文档 | github

安装

CDN 引入

目前可以通过 unpkg.com/@form-create/ant-design-vue 获取到最新版本的资源,在页面上引入 js 即可开始使用。

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link href="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.min.css" rel="stylesheet">
<!-- import moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/zh-cn.js"></script>
<!-- import ant-design-vue -->
<script defer src="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.js"></script>
<!-- import form-create -->
<script src="//unpkg.com/@form-create/ant-design-vue/dist/form-create.min.js"></script>

NPM

安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm i @form-create/ant-design-vue

引入

import formCreate from '@form-create/ant-design-vue'

支持

功能

- 持支持3种 UI 框架
- 支持自定义表单组件
- 可生成任何Vue组件
- 自带数据验证
- 组件插槽设置
- 通过 JSON 生成表单
- 通过 Maker 生成表单
- 强大的API,可快速操作表单
- 双向数据绑定
- 事件扩展
- 事件注入
- 局部更新
- 数据验证
- 栅格布局
- 内置组件17种常用表单组件

生成

<template>
<form-create v-model="fApi" :rule="rule" :option="option"></form-create>
</template> <script>
export default {
data () {
return {
//实例对象
fApi:{},
//表单生成规则
rule:[
{
type:'input',
field:'goods_name',
title:'商品名称'
},
{
type:'datePicker',
field:'created_at',
title:'创建时间'
}
],
//组件参数配置
option:{
//表单提交事件
onSubmit:function (formData) {
alert(JSON.stringify(formData));
}
}
};
}
};
</script>
 

数组组件/组件嵌套

可以通过group组件实现组件数组,嵌套对象功能

{
type:"group",
title:"标签",
field:" label",
value:[],
props:{
min:1,
max:5,
rule:{
type:'input',
field:'input',
props:{disabled:false},
validate:[{required:true}]
} },
validate:[
{required:true, type: 'array', min: 1, message: '最少添加1个标签'}
]
}

Control 配置项

可以通过control配置项实现通过组件的值控制其他组件是否显示

当用户选中包邮选项后会自动显示number组件

{
type:"radio",
title:"是否包邮",
field:" is_postage",
value:0,
options: [
{value: 0, label: '不包邮', disabled: false},
{value: 1, label: '包邮', disabled: false},
],
control:[
{
value:1,
rule:[
{
type: 'number',
field: 'postage_money',
title: '满额包邮',
value: 0
},
]
}
]
}

ant-design-vue表单生成组件form-create快速上手的更多相关文章

  1. form-create 3.0 版本发布,好用的Vue3版本动态表单生成组件

    form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持2个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...

  2. 实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...

  3. Vue表单和组件

    一.表单 v-model 指令在表单控件元素上创建双向数据绑定,v-model 会根据控件类型自动选取正确的方法来更新元素. <input v-model="message" ...

  4. vue表单和组件使用

    表单: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  5. ant design pro 表单

    1.Input Enter事件 <input onKeyUp={this.onKeyUp} onPressEnter={this.enter} /> onKeyUp = (e) => ...

  6. ant design 自定义表单验证大全

     需求是 账号名可以是手机号也可以是邮箱 要做手机号和邮箱的验证,官网的那个验证规则不匹配  怎么自定义验证规则?  一:组件部分 <Form horizontal> <Row gu ...

  7. 基于Ant Design Vue封装一个表单控件

    开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...

  8. 文档驱动 —— 表单组件(五):基于Ant Design Vue 的表单控件的demo,再也不需要写代码了。

    源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...

  9. Form表单验证组件

    Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...

随机推荐

  1. 聊聊用Selenium做自动化碰到了哪些坑?都是怎么解决的?

    本周我们的讨论话题是关于Selenium自动化: 话题:聊聊用Selenium做自动化碰到了哪些坑?都是怎么解决的? 话题描述:Selenium是大家做UI自动化用到的主流框架,在平时写脚本的过程中, ...

  2. Java 添加、删除Excel表单控件

    通过表单控件,用户可以快速地将数据填写到模板文档中,轻松引用单元格数据并与其进行交互.本文通过Java代码示例介绍如何在Excel表格中添加表单控件,包括文本框.单选按钮.复选框.组合框.微调按钮等: ...

  3. Building Applications with Force.com and VisualForce(Dev401)(十五):Data Management: Data management Overview

    Dev401-016:Data Management: Data management Overview Course Objectives1.List typical data management ...

  4. CF 997A

    You’ve got a string a1,a2,…,an, consisting of zeros and ones.Let’s call a sequence of consecutive el ...

  5. 干货 | Python进阶系列之学习笔记(四)

    目录 Python条件判断 Python循环语句 Python循环控制 迭代器与生成器 异常 一.Python 条件判断 如果某些条件满足,才能做某件事情:条件不满足时,则不能做,这就是所谓的判断. ...

  6. KDD 2019放榜!录取率仅14%,强调可重现性

    [导读]KDD 2019录取结果终于放榜了,今年Research和ADS两个 track共评审论文1900篇,其中Research track的录取率只有14%.今年也是KDD第一次采用双盲评审政策, ...

  7. ||,&&短路规则测试

    短路规则:a||b中若a为真,则直接判断整个表达式为真,不再判断b是真或假,    a&&b中若a为假,则直接判断整个表达式为假,不再单独判断b是真或假. 想要测试这个规则的话,可以将 ...

  8. 用pymysql和Flask搭建后端,响应前端POST和GET请求

    前言 这次作业不仅需要我建立一个数据库(详情请点击这里),还需要我基于这个数据库写后端接口(注册和登录)供前端访问,接收前端的POST和GET请求,并将登录.注册是否成功传给前端. 本文介绍如何用Fl ...

  9. TensorFlow报错module 'tensorflow' has no attribute 'xxx'解决办法

    原因:TensorFlow2.0版本修改了许多函数名字 tf.sub()更改为tf.subtract() tf.mul()更改为tf.multiply() tf.types.float32更改为tf. ...

  10. CodeForces 190C STL

    Portal: http://codeforces.com/problemset/problem/190/C 一道卡输入输出的蛋疼题 题意:给你一个由pair和int所组成的沙茶字符串(最大含有1e5 ...