欢迎使用
https://github.com/China-Wesley/el-form-schema
<el-form-schema
ref="form"
:schema="schema"
:model="model"
cancel-button
submit-button
reset-button
:layout="layout"
@cancel="cancelHand"
@submit="submitHand"
@reset="resetHand"
@validate="handleFunc"
@add="addFunc"
@remove="removeFunc"
></el-form-schema>
model = {
// 映射到schema的items的结构中去
}
schema = {
title: "", // 是整个form的标题
border: true,
config: {}, // 可以配置整个表单
buttonConfig: {
common: {},
cancelButton: {},
submitButton: {},
resetButton: {}
},
visible: true,
items: { // items是独一无二的
[prop]: {
label: '', //item的label
type: 'number' || 'array' || 'object', // 这里是传值的类型
component: '' || Function || {render: () => {}}, //这个可以传入自定义组件,或者固定的值如 input、select、colorPicker等
disabled: true,
visible: true,
events: {}, // 传入component item的事件
field: {
option, // [{label: "", value: 1}] // option要保持这种格式
...elementFieldSet, // element自带的表单设置
inner: "" || Component || {render: () => {}} // slot非具名的
// 实际上就是传入component的配置,即form-item的各种属性
},
rules: [], // 这里面全部都是验证规则,应该和el-form保持一致
config: {}, //单个item应该有单独的config
children: {},
dynamicProps: {}, // 当传入的是动态组件时,这个作为动态组件的prop传入其中
slot: {
tip: "" || {render: () => {}}
}, // 可以循环嵌套的slot
addable: true, // type = 'array' 时 增加和删除按钮,默认为true
removeAble: true,
addButton: {}, // 按钮的配置
removeButton: {},
items: {}// 可嵌套的 当type='array' || type='object'时使用,映射model的结构
}
}
}
layout = [{
title: "", //一行的title
rowAttrs: {}, // el-row的一些配置
col: [
{
colAttrs: {}, // el-col的一些配置
fields: [""], // 只能填schema一级的items
title: "" // 列标题
},
]
}]