歡迎使用

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的結(jié)構(gòu)中去
}

schema = {
     title: "", // 是整個(gè)form的標(biāo)題
     border: true,
     config: {},  // 可以配置整個(gè)表單
     buttonConfig: {
          common: {},
          cancelButton: {},
          submitButton: {},
          resetButton: {}
     },
     visible: true,
     items: {  // items是獨(dú)一無(wú)二的
          [prop]: {
               label: '', //item的label
               type: 'number' || 'array' || 'object', // 這里是傳值的類(lèi)型
               component: '' || Function || {render: () => {}}, //這個(gè)可以傳入自定義組件，或者固定的值如 input、select、colorPicker等
               disabled: true,
               visible: true,
               events: {}, // 傳入component item的事件
               field: {
                    option, // [{label: "", value: 1}] // option要保持這種格式
                    ...elementFieldSet, // element自帶的表單設(shè)置
                    inner: ""  || Component || {render: () => {}} // slot非具名的
                    // 實(shí)際上就是傳入component的配置，即form-item的各種屬性
               },
               rules: [], // 這里面全部都是驗(yàn)證規(guī)則，應(yīng)該和el-form保持一致
               config: {}, //單個(gè)item應(yīng)該有單獨(dú)的config
               children: {},
               dynamicProps: {}, // 當(dāng)傳入的是動(dòng)態(tài)組件時(shí)，這個(gè)作為動(dòng)態(tài)組件的prop傳入其中
               slot: {
                    tip: "" || {render: () => {}}
               }, // 可以循環(huán)嵌套的slot
               addable: true, // type = 'array' 時(shí) 增加和刪除按鈕，默認(rèn)為true
               removeAble: true,
               addButton: {}, // 按鈕的配置
               removeButton: {},
               items: {}// 可嵌套的 當(dāng)type='array' || type='object'時(shí)使用，映射model的結(jié)構(gòu)
           }
     }
}

layout = [{
     title: "", //一行的title
     rowAttrs: {}, // el-row的一些配置
     col: [
          {
               colAttrs: {}, // el-col的一些配置
               fields: [""], // 只能填schema一級(jí)的items
               title: "" // 列標(biāo)題
          },
          
     ]
}]