Vue配置化生成表单(个人笔记)

背景：为了避免编写重复的html, css, js代码（虽然一般情况下都是复制粘贴的)，提高开发效率（其实是不想写）。配置化生成表单只需要我们写js对象就可以了。

知识点：Vue自带的component动态组件，is属性可以根据我们传入的参数解析成不同的组件。传入我们自定义的组件就会渲染成相应组件，传入el-input就会渲染成组件。

封装schema-form组件

el-select，el-checkbox-group，el-radio-group组件需要做特殊处理。

使用组件

options

参数	说明	默认值
component	组件名称
key	属性名称
label	标签文本
labelWidth	标签文本宽度	'100px'
width	表单元素宽度	'200px'
props	表单元素属性，根据element-ui提供属性
listeners	表单元素事件，根据element-ui提供事件
data	对el-select, el-checkbox-group，el-radio-group有效，选项数据

direction
表单方向，可选值：vertical和horizontal。

到目前写的例子还是很简单的配置，不能兼容各种场景，但是对于一般通用的场景还是值得一试的。后面可以根据业务场景进行不断的完善。（最后发现还是要写不少代码，感觉偷懒失败。）

参考文章：Vue2 Element Schema Form 配置式生成表单的实现