gt-dynamic-form

Vue3 动态表单组件，基于 Ant Design Vue 4.x，通过 schema 配置快速生成表单。

安装

npm install gt-dynamic-form

peerDependencies

确保项目中已安装以下依赖：

{
  "vue": ">=3.2.0",
  "ant-design-vue": ">=4.0.0",
  "@ant-design/icons-vue": ">=7.0.0",
  "dayjs": ">=1.11.0"
}

基本用法

<template>
  <DynamicForm ref="formRef" :schema="formSchema" :model="formModel" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DynamicForm } from 'gt-dynamic-form'
import type { Schema, FormModel, DynamicFormExposed } from 'gt-dynamic-form'

const formRef = ref<DynamicFormExposed | null>(null)

const formModel = ref<FormModel>({
  username: '',
  status: undefined
})

const formSchema: Schema[] = [
  {
    field: 'username',
    label: '用户名',
    component: 'Input',
    required: true,
    componentProps: { maxlength: 20 }
  },
  {
    field: 'status',
    label: '状态',
    component: 'Select',
    options: [
      { label: '启用', value: 1 },
      { label: '禁用', value: 0 }
    ]
  }
]

const handleSubmit = async () => {
  const values = await formRef.value?.validateFields()
  console.log(values)
}
</script>

API

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | schema | Schema[] | [] | 表单字段配置 | | model | FormModel | {} | 表单数据模型 | | componentProps | Record<string, any> | {} | 按组件类型批量设置 props |

暴露方法

| 方法 | 说明 | |------|------| | validateFields() | 表单验证，返回 Promise<FormModel> | | getCurFields() | 获取当前表单数据（不验证） | | resetFields(isInit = true) | 重置表单 | | setSchema({ field, path, value }) | 动态设置 schema 属性 | | addSchema({ field, schema, location }) | 动态添加字段 | | deleteSchema(field) | 动态删除字段 |

Schema 字段

| 属性 | 类型 | 说明 | |------|------|------| | field | string | 必填，表单字段名 | | label | string | 标签文本 | | component | string | 组件类型：Input / Textarea / Number / Select / Radio / Checkbox / DatePicker / Switch | | required | boolean | 是否必填 | | hidden | boolean | 是否隐藏 | | options | any[] \| Function | 选项数据，支持异步函数 | | componentProps | object | 传给表单控件的属性 | | formItemProps | object | 传给 a-form-item 的属性 | | onChange | Function | 表单项变化回调（用于表单联动） | | children | Schema[] | 嵌套子字段 | | span | number | 栅格宽度，默认 24 |

License

MIT