schema-form 动态组件开发

69 阅读1分钟

动态组件基于领域模型来设计,以数据驱动开发。

在模型中增加componentConfig来配置用到的组件的属性,每个字段增加componentOption来配置在每个动态组件中该字段的展现形式,及默认值等。

抽象出schema-form组件:使用动态组件<component>来按需加载input、select等,form-item-config.js中列出组件的键值对。 schema-form下边的input,select等组件中需要引入ajv,根据领域模型中配置的标准schema,来校验相关表单项是否有效。提供出validate及getValue方法。

import inputNumber from './complex-view/input-number/input-number.vue';
import select from './complex-view/select/select.vue';
const formItemConfig = {
  input: {
    component: input,
  },
  inputNumber: {
    component: inputNumber,
  },
  select: {
    component: select,
  },
};
export default formItemConfig;

image.png

从配置中拿到配置的组件,在schema-view中将动态组件引入。 使用抽屉形式弹出createForm、editForm、detailForm。

在schema中字段配置里配置createFormOption,editFormOption等,来设定该字段在这个组件中是否显示,以输入框还是select形式显示等。