el-form-shema

背景

目前使用 elment-ui 做表单查询的时候，会出现大量的重复工作和代码，目标期望的是使用一种 json 的形式渲染出表单做查询。
Demo 可以快速生成 json

DEMO

DOMO


引入

``javascript
import FormsShema from "el-form-schema";
Vue.use(FormsShema);
`

`html



``

参数：

| First Header | Second Header |
| :----------: | :-------------------------------------------------: |
| schemas | 渲染的组件对象 |
| formValues | 渲染组件对象的 v-model(需要和选择对象的 model 重名) |
| config | 对象整理布局 参数为 el-form 中的 props |

schemas 参数：

| First Header | Second Header | Eg |
| -------------- | -------------------------------------------------- | ----------------------------------------- |
| tag | 渲染组件的名字 | 'el-input' |
| props | 对应组件的 props | {size: "small",placeholder: "测试输入框"} |
| events | 当前组件的事件 | {click(){}} |
| rule | 当前组件的校验规则 | [{required: true}] |
| model | 当前组件的 v-model | |
| label | 当前组件的 label 名称 | '测试' |
| render | 当前组件的自定义渲染 | Function |
| componentWidth | 覆盖组件的宽度 | 12 |
| keyVal | 含有 options 属性的子节点展示的 key (radio/select) | 'name' |
| labelVal | 含有 options 属性的子节点展示的 label | 'value' |

效果