最近制作一套體檢系統，其中一個功能，根據科室檢查項目來生成表單，内置到資料庫中，采用靜态表單不利于後期增加和維護，以及擴充，于是找到一個元件，form-create可以動态生成表單，根據不同醫院維護的醫療項目來動态生成檢查單，以及檢查報告，适用于大部分科室了。
form-create 是一個可以通過 JSON 生成具有動态渲染、資料收集、驗證和送出功能的表單生成器。并且支援生成任何 Vue 元件。結合内置17種常用表單元件和自定義元件，再複雜的表單都可以輕松搞定。
ElementUInpm i @form-create/element-ui
我的基本架構是用的element，如果是iview可以參考一下官方文檔。
首先放一下制作完成的效果圖：
這裡面那個最後那個機關值是個坑，看了好多便才搞明白如何處理這個參數。
下邊我們開始講解如何使用，作者已經封裝好元件，我們隻需要vue.use就可以全局調用了。
CDN 引入
NPM
安裝
推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。
npm i @form-create/element-ui
引入
import formCreate, {maker} from '@form-create/element-ui'
#相容
- element-ui ^2.8.2
Vue.use(formCreate)
在main.js設定好就可以使用了。
我采用的是json來處理格式化資料，官方給的資料格式是這樣的
//JSON 規則const rule = [ {"type":"input","field":"goods_name","title":"商品名稱","value":"mi"}, {"type":"inputNumber","field":"goods_price","title":"商品價格","value":12}]
我後端api接口采用的是tp6,這裡便于直覺展示，我直接dump一下内容，大概資料結構是這樣的
關鍵來了，這裡跟官方标準文檔不一樣的地方在于，增加了兩層children，一開始沒明白官方文檔的說明，後來仔細看，插槽solt的解釋，需要children包住内容才可以顯示元件或者按鈕名稱，官方文檔是這些的
rule:[ { type:'el-button', children:['方式1'] }, { type:'el-button', children:[{ type:'i', class:'el-icon-check' },' 方式2'] }
我采用的是方式一，雙層children，在設定children插槽中另外增加一層children用于顯示名稱。
如果需要表單驗證的話，隻需要在api接口中根據文檔規則來生成相應的json規則，前端使用axios擷取一下就可以了，非常友善。
validate:[ { required: true, message: '請輸入商品簡介', trigger: 'blur' }, ],
這樣就可以完美展示背景提供的資料了，這裡我做了一個醫療項目維護的功能，可以很友善的來維護檢查項目上一張圖，僅供參考，後續會更新如何來錄入資料，快速生成檢查報告。