用輔助工具生成json
基于elementPlus封裝的表單控件阵苇，把需要的屬性都提取出來(lái)轮纫，放在了json文件趁仙，那么這么多屬性要怎么辦洪添，手?jǐn)]嗎？當(dāng)然不是雀费，我們需要一個(gè)小工具來(lái)輔助一下干奢。
這幾天都在折騰這個(gè)小工具，又遇到電腦不給力居然罷工的事件盏袄，這就是傳說(shuō)中的好事多磨嗎忿峻？不管怎么說(shuō)薄啥，終于是有點(diǎn)模樣了。
其實(shí)也比較簡(jiǎn)單逛尚，就是做幾個(gè)表單垄惧，管理一下json而已，只是內(nèi)容有一點(diǎn)點(diǎn)多黑低。
表單控件需要的json基本是這樣的赘艳，兩個(gè)部分酌毡，一個(gè)是自己需要的屬性克握，另一個(gè)是表單子控件需要的屬性。
formMeta: {
baseMeta: {
id: 1, // 表單ID
name: '狀態(tài)管理里面的演示表單', // 表單名稱(chēng)
colOrder: [101, 102], // 顯示的字段以及排序
state: 'add', // 表單狀態(tài)枷踏，添加菩暗、修改、顯示（只讀）
formColCount: 1 // 表單列數(shù)
},
itemMeta: {
101: {
controlId: 101,
colName: 'name',
controlType: 101,
defaultValue: '1',
isClear: false,
readonly: false,
disabled: false,
placeholder: '請(qǐng)輸入姓名',
title: '姓名',
maxlength: 6,
minlength: 2,
autofocus: true,
colCount: 1
},
102: {
controlId: 102,
colName: 'name1',
controlType: 101,
defaultValue: '1',
isClear: false,
readonly: false,
disabled: false,
placeholder: '請(qǐng)輸入姓名',
title: '姓名',
maxlength: 6,
minlength: 2,
autofocus: true,
colCount: 1
}
}
},
然后就是圍繞這個(gè)來(lái)做個(gè)維護(hù)的小工具旭蠕。
先做個(gè)表單維護(hù)表單自己的屬性停团，然后做個(gè)小列表表單，維護(hù)子控件的列表掏熬，然后再做一個(gè)表單佑稠，維護(hù)子控件的屬性，好吧還需要一個(gè)表單來(lái)維護(hù)子控件的擴(kuò)展屬性旗芬。
然后就是子控件的實(shí)時(shí)渲染看看設(shè)置的效果舌胶，最后是表單的整體的動(dòng)態(tài)渲染看效果，順便看看表單的model疮丛。
各個(gè)組件之間的數(shù)據(jù)用Vuex來(lái)共享幔嫂。
做這個(gè)工具一個(gè)是想生成json，另一個(gè)就是想驗(yàn)證一下表單控件在真實(shí)需求里面到底好不好用誊薄。因?yàn)樯厦孢@個(gè)表單履恩，就是用封裝的表單控件來(lái)實(shí)現(xiàn)的。
也不知道要怎么介紹呢蔫，發(fā)幾個(gè)截圖吧切心，另外把代碼遷到碼云上面了，因?yàn)镚itHub總是連接不上片吊。
表單自己的屬性
表單昙衅，維護(hù)表單自己需要的屬性，以后還會(huì)擴(kuò)展幾個(gè)定鸟，現(xiàn)在這些明顯不夠用而涉。
下面列表是表單子控件，添加表單的item联予，這里只是確定數(shù)量和id啼县、name材原，其他的屬性在另一個(gè)表單里面實(shí)現(xiàn)。
表單子控件的屬性
在上面那個(gè)列表里面選擇一個(gè)子控件季眷，就會(huì)顯示這個(gè)子控件的屬性表單：
這里有兩個(gè)表單余蟹，一個(gè)是基礎(chǔ)屬性，一個(gè)是擴(kuò)展屬性子刮⊥疲基礎(chǔ)屬性就基于HTML5的屬性來(lái)做的，而擴(kuò)展數(shù)據(jù)就是UI庫(kù)提供的擴(kuò)展屬性挺峡。
子控件的json
設(shè)置好之后會(huì)生成這樣的子控件需要的json
有json文件格式葵孤，以及js對(duì)象格式。前者用于json文件橱赠，后者用于js代碼尤仍。
表單控件的json
各個(gè)子控件設(shè)置好了之后就是整個(gè)表單了。
這樣就可以依據(jù)這個(gè)json來(lái)動(dòng)態(tài)渲染表單了狭姨。
當(dāng)然還有許多要補(bǔ)充的宰啦，比如表單驗(yàn)證，這個(gè)就是把el-form的 rules 也做到 json 里面饼拍，理論上沒(méi)啥難度赡模，只是需要繼續(xù)做表單來(lái)維護(hù)。
還有聯(lián)動(dòng)設(shè)置师抄，拖拽排序這些功能漓柑，總之都是理論上沒(méi)問(wèn)題，只是需要時(shí)間去完善的事情司澎。
話(huà)說(shuō)欺缘，現(xiàn)在的效率好低呀。
最后挤安，表單的子控件也不需要一個(gè)一個(gè)的填 谚殊，而是可以依據(jù)數(shù)據(jù)庫(kù)文檔自動(dòng)創(chuàng)建。然后做點(diǎn)加減法就好蛤铜。
源碼
https://gitee.com/naturefw/nf-vue-element
github總是連接不上去嫩絮。。围肥。
