veben----- BasicForm如何生成

zimu_spm

已于 2022-08-31 17:03:10 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： vue 前端框架 javascript

于 2022-08-30 17:59:40 首次发布

本文链接：https://blog.youkuaiyun.com/zimu_spm/article/details/126608714

本文介绍了一种基于Vue.js的表单组件配置方法，通过定义表单字段、组件类型及属性来实现动态表单生成。重点讲解了如何使用schemas属性进行表单配置，并通过实例展示了具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

export const basicProps = {
  model: {
    type: Object as PropType<Recordable>,
    default: {},
  },
  // 标签宽度  固定宽度
  labelWidth: {
    type: [Number, String] as PropType<number | string>,
    default: 0,
  },
  fieldMapToTime: {
    type: Array as PropType<FieldMapToTime>,
    default: () => [],
  },
  compact: propTypes.bool,
  // 表单配置规则
  schemas: {
    type: [Array] as PropType<FormSchema[]>,
    default: () => [],
  },
........
};

上面是基础表单组件BasicForm ，生成特定表单组件的配置(只列了几项),见'@/src/components/Form/src/props.ts'，

其中提供schemas 属性提供表单配置规则，通过下面代码传入的schemas(其实经过getSchema计算属性处理的)循环<FormItem/>组件得到每一项表单项，其中component类型只限于提供的ant-design-vue几个的组件。


 <template v-for="schema in getSchema" :key="schema.field">
        <FormItem
          :tableAction="tableAction"
          :formActionType="formActionType"
          :schema="schema"
          :formProps="getProps"
          :allDefaultValues="defaultValueRef"
          :formModel="formModel"
          :setFormModel="setFormModel"
        >
          <template #[item]="data" v-for="item in Object.keys($slots)">
            <slot :name="item" v-bind="data || {}"></slot>
          </template>
        </FormItem>
      </template>

//例如 views/demo/system/role/role.data.ts
export const formSchema: FormSchema[] = [
  {
    field: 'roleName',
    label: '角色名称',
    required: true,
    component: 'Input',
  },
  {
    field: 'roleValue',
    label: '角色值',
    required: true,
    component: 'Input',
  },
  {
    field: 'status',
    label: '状态',
    component: 'RadioButtonGroup',
    defaultValue: '0',
    componentProps: {
      options: [
        { label: '启用', value: '0' },
        { label: '停用', value: '1' },
      ],
    },
  },
  {
    label: '备注',
    field: 'remark',
    component: 'InputTextArea',
  },
  {
    label: ' ',
    field: 'menu',
    slot: 'menu',
    component: 'Input',
  },
];

最终生成如图