基于 Vue, ElementUI 開發(fā)的一款表單設(shè)計(jì)器湖雹，目前開源版本在 Github 獲得星標(biāo) 2.4k咏闪，在2020年開工之際，我們加入了對 Ant Design Vue 的支持摔吏，讓使用Ant Design Vue 的項(xiàng)目也能夠快速進(jìn)行表單的開發(fā)鸽嫂，廢話不多說，接下來我們來看看如何快速開發(fā) Ant Design Vue 表單征讲。
1. 設(shè)計(jì)表單
在 表單設(shè)計(jì)官網(wǎng)平臺(tái) 上設(shè)計(jì)好表單据某，在表單屬性 UI 設(shè)置選擇 Ant Design，預(yù)覽查看表單诗箍。
https://user-gold-cdn.xitu.io/2020/2/4/1700e5f3888a7e8a?w=2874&h=1340&f=png&s=333229
https://user-gold-cdn.xitu.io/2020/2/4/1700e5fe8e52861e?w=1994&h=1196&f=png&s=104051
2. 安裝表單設(shè)計(jì)器
該功能目前在高級(jí)版本中提供癣籽，詳細(xì)安裝方法請參考 官方文檔。
如果需要試用版本請 聯(lián)系我們滤祖。
3. 引入 antd 表單生成器
import {
GenerateAntdForm,
} from '<%=your local path%>/form-making-advanced'
import '<%=your local path%>/form-making-advanced/dist/FormMaking.css'
Vue.component(GenerateAntdForm.name, GenerateAntdForm)
/* 或?qū)憺? * Vue.use(GenerateAntdForm)
*/
4. 開始使用
<fm-generate-antd-form
:data="jsonData"
ref="generateForm"
>
</fm-generate-antd-form>
點(diǎn)擊設(shè)計(jì)器中 生成JSON筷狼，將生成的JSON 數(shù)據(jù)賦值給 jsonData 即可完成渲染。
5. 其他說明
設(shè)計(jì)器還是采用的 element氨距，只是添加了 antd 的表單生成器桑逝，其中某些高級(jí)組件暫時(shí)還未支持（比如圖片上傳、子表單）俏让，更多功能我們將持續(xù)完善楞遏。
如果您在使用過程中有疑問的話茬暇，歡迎 聯(lián)系我們。
