Antd Vue 表单生成快速开发指南

Stella981
• 阅读 640

之前发布了一款基于Element的表单设计器,可以快速设计和生成表单,设计器地址:http://form.making.link/。现在我可以告诉大家,Antd表单支持来了,可以使用设计器设计好表单后,快速生成Antd表单,提供了强大的Api操作。接下来就来看看如何快速生成表单:

1. 引入 Ant Design Vue

npm install ant-design-vue -S


import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

更多的引入方式请参考文档 快速上手

使用Antd Pro Vue 的可直接跳过该步骤。

2. 引入 FormMaking 高级版本包

链接: https://pan.baidu.com/s/1CtZv4kWbYrYjw_FgygC62w 密码:69ez

点击下载地址可以下载到 FormMaking 高级版本试用包。

下载完成后解压到项目中,这里我们在根目录创建 lib目录来放资源,解压出来目录结构如下: Antd Vue 表单生成快速开发指南 然后在需要用到的地方引入组件,或者直接在main.js中引入即可。

import {
  GenerateAntdForm,
} from '../lib/form-making-advanced'
import '../lib/form-making-advanced/dist/FormMaking.css'

Vue.use(GenerateAntdForm)
/* 或写为
 * Vue.component(GenerateAntdForm.name, GenerateAntdForm)
 */

注:在项目中使用 import 引入时,需要将 babel 的sourceType参数设置为unambiguous,如下:

"babel": {
  "sourceType": "unambiguous"
}

3. 设计表单

点击进入 表单设计器官网 设计表单,在表单属性中选择 Ant Design ,点击生成代码即可生成出直接可以使用的 vue 组件,如下:

Antd Vue 表单生成快速开发指南 Antd Vue 表单生成快速开发指南 直接将生成的代码拷贝到项目vue文件中,这样一个简单的表单就生成好了,查看效果如下: Antd Vue 表单生成快速开发指南

4. 更多功能

  • 支持数据验证
  • 支持动态获取数据
  • 支持隐藏禁用等丰富的操作API
  • 支持国际化
  • 等等等

更多的功能可以查看 官方文档,解锁更多的姿势。

5. 联系我们

如果大家在使用中过程中有任何问题欢迎 联系我们。也可以直接加入我们qq群进行讨论:985558286

点赞
收藏
评论区
推荐文章
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
1年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
AWS国庆双重礼,仅限7天
自2021年10月1日00:00起至2021年10月7日24:00,新注册并激活(需全部完成账号注册的五个步骤,否则账号状态并未激活)AWS海外区域账户,填写页面下方表单,即可申领价值$200美元的AWS海外区域账户服务抵扣券直充到您的账户,用以抵扣服务消费,助您轻松体验多个云迁移应用场景。同时,您还可获赠AWS精美祥云纪念T恤一件。,仅限7天$20
helloworld_34035044 helloworld_34035044
11个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
1年前
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解2016年09月02日00:00:36 \牧野(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fme.csdn.net%2Fdcrmg) 阅读数:59593
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
1年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
京东云开发者 京东云开发者
6个月前
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究