Antd Vue 表单生成快速开发指南，内附强大的表单设计器

2024-04-29 12:45:06

之前发布了一款基于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目录来放资源，解压出来目录结构如下：

然后在需要用到的地方引入组件，或者直接在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 组件，如下：

直接将生成的代码拷贝到项目vue文件中，这样一个简单的表单就生成好了，查看效果如下：

4. 更多功能

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

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

5. 联系我们

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

Antd Vue 表单生成快速开发指南，内附强大的表单设计器相关推荐

报表控件ActiveReports快速入门指南 - 第一张报表模板的启动设计器
ActiveReports 是一款专注于 .NET 平台的报表控件,全面满足 HTML5 / WinForm / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和开发工作需求 ...
Vue全家桶快速开发指南
Vue全家桶快速开发指南着手与项目环境配置安装npm 安装vuecli4.x 构建项目图形化构建命令行配置代码目录 vue-router 定义组件组件的作用如何定义组件在需要他显示的h ...
Apache PDFbox快速开发指南
Apache PDFbox快速开发指南作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 一.介绍 Apache PDFbox是一个开源的.基于Java的. ...
开放下载！《AliOS Things快速开发指南》
简介:<AliOS Things快速开发指南>手把手教你从环境准备到线上.线下开发调试,更有两大典型场景实践等你参与.你的物联网开发从这里开始!快来get新技能吧~ AliOS Thing ...
Oracle WebCenter 11g 快速开发指南--翻译（一）
第一章:开发者快速开发指南作为一个开发者,如果你准备建立一个WebCenter Portal application ,你需要一个好的路线图,来指导你从什么地方开始,提供初始化的经验:本章首先解决开 ...
DigWS 短消息和WapPush 快速开发指南-接口介绍
DigWS 短消息和WapPush 快速开发指南-接口介绍 SendSms:发送短消息 Parameter<?xml:namespace prefix = o /> Description ...
MSP432 快速开发指南：如何安装板载仿真器驱动（XDS110）
博主分享不易,请给一键三连哦(关注 + 点赞 + 收藏),你的鼓励是博主分享的动力. MSP432 快速开发指南:如何安装板载仿真器驱动(XDS110) 1 前言 1.1 内容简介 1.2 快速链接 ...
MSP432 快速开发指南：如何利用 DriverLib 进行快速开发
博主分享不易,请给一键三连哦(关注 + 点赞 + 收藏),你的鼓励是博主分享的动力. MSP432 快速开发指南:如何利用 DriverLib 进行快速开发 1 前言 1.1 内容简介 1.2 快速链 ...
企业级JAVA快速开发平台, 内置代码生成器 - JavaFast快速开发平台
企业级JAVA快速开发平台, 内置代码生成器 - JavaFast快速开发平台 JavaFast是一款基于代码生成器的智能快速开发平台,可以帮助解决java项目中80%的重复工作,让开发者更多关注业务 ...

最新文章

热门文章