基於 Vue, ElementUI 開發的一款表單設計器，目前開源版本在 Github 獲得星標 2.4k，在2020年開工之際，我們加入了對 Ant Design Vue 的支持，讓使用Ant Design Vue 的項目也能夠快速進行表單的開發，廢話不多說，接下來我們來看看如何快速開發 Ant Design Vue 表單。

主界面

預覽界面

設計表單

在 表單設計官網平臺 上設計好表單，在表單屬性 UI 設置選擇 Ant Design，預覽查看錶單。

安裝表單設計器

該功能目前在高級版本中提供，詳細安裝方法請參考 官方文檔。

如果需要試用版本請 關注+私信我。

引入 antd 表單生成器

<code>import { 
  GenerateAntdForm, 
} 
from '/form-making-advanced'
import '/form-making-advanced/dist/FormMaking.css'
Vue.component(GenerateAntdForm.name, GenerateAntdForm)
/* 或寫為 * Vue.use(GenerateAntdForm) *//<code>

開始使用

<code><fm-generate-antd-form>:data="jsonData" 
ref="generateForm" >
  /<fm-generate-antd-form>/<code>

點擊設計器中 生成JSON，將生成的JSON 數據賦值給 jsonData 即可完成渲染。

其他說明

設計器還是採用的 element，只是添加了 antd 的表單生成器，其中某些高級組件暫時還未支持（比如圖片上傳、子表單），更多功能我們將持續完善。

如果您在使用過程中有疑問的話，歡迎 聯繫我們。

更新日誌

版本 1.2.8

日期 2020-2-3

1. 支持 Ant Design Vue 組件
2. 修復子表單卡頓問題
3. 優化代碼編輯器
4. 修復浮點數問題

在線預覽地址：

http://tools.xiaoyaoji.cn/form

GitHub地址：

https://github.com/GavinZhuLei/vue-form-making

閱讀更多 程序員Bob 的文章

關鍵字: 拖拽 JSON 表單