el-form-schema的数据结构设计

欢迎使用

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: "" // 列标题
          },
          
     ]
}]