用辅助工具生成json
基于elementPlus封装的表单控件，把需要的属性都提取出来，放在了json文件，那么这么多属性要怎么办，手撸吗？当然不是，我们需要一个小工具来辅助一下。
这几天都在折腾这个小工具，又遇到电脑不给力居然罢工的事件，这就是传说中的好事多磨吗？不管怎么说，终于是有点模样了。
其实也比较简单，就是做几个表单，管理一下json而已，只是内容有一点点多。
表单控件需要的json基本是这样的，两个部分，一个是自己需要的属性，另一个是表单子控件需要的属性。
formMeta: {
baseMeta: {
id: 1, // 表单ID
name: '状态管理里面的演示表单', // 表单名称
colOrder: [101, 102], // 显示的字段以及排序
state: 'add', // 表单状态，添加、修改、显示（只读）
formColCount: 1 // 表单列数
},
itemMeta: {
101: {
controlId: 101,
colName: 'name',
controlType: 101,
defaultValue: '1',
isClear: false,
readonly: false,
disabled: false,
placeholder: '请输入姓名',
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: '请输入姓名',
title: '姓名',
maxlength: 6,
minlength: 2,
autofocus: true,
colCount: 1
}
}
},
然后就是围绕这个来做个维护的小工具。
先做个表单维护表单自己的属性，然后做个小列表表单，维护子控件的列表，然后再做一个表单，维护子控件的属性，好吧还需要一个表单来维护子控件的扩展属性。
然后就是子控件的实时渲染看看设置的效果，最后是表单的整体的动态渲染看效果，顺便看看表单的model。
各个组件之间的数据用Vuex来共享。
做这个工具一个是想生成json，另一个就是想验证一下表单控件在真实需求里面到底好不好用。因为上面这个表单，就是用封装的表单控件来实现的。
也不知道要怎么介绍，发几个截图吧，另外把代码迁到码云上面了，因为GitHub总是连接不上。
表单自己的属性
表单，维护表单自己需要的属性，以后还会扩展几个，现在这些明显不够用。
下面列表是表单子控件，添加表单的item，这里只是确定数量和id、name，其他的属性在另一个表单里面实现。
表单子控件的属性
在上面那个列表里面选择一个子控件，就会显示这个子控件的属性表单：
这里有两个表单，一个是基础属性，一个是扩展属性。基础属性就基于HTML5的属性来做的，而扩展数据就是UI库提供的扩展属性。
子控件的json
设置好之后会生成这样的子控件需要的json
有json文件格式，以及js对象格式。前者用于json文件，后者用于js代码。
表单控件的json
各个子控件设置好了之后就是整个表单了。
这样就可以依据这个json来动态渲染表单了。
当然还有许多要补充的，比如表单验证，这个就是把el-form的 rules 也做到 json 里面，理论上没啥难度，只是需要继续做表单来维护。
还有联动设置，拖拽排序这些功能，总之都是理论上没问题，只是需要时间去完善的事情。
话说，现在的效率好低呀。
最后，表单的子控件也不需要一个一个的填 ，而是可以依据数据库文档自动创建。然后做点加减法就好。
源码
https://gitee.com/naturefw/nf-vue-element
github总是连接不上去。。。
