djangoadmin/djangoadmin-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化更新

Browse Source
This commit is contained in:
gitadmin
2026-09-14 09:44:33 +08:00
parent b3a9e21254
commit 5b8e178970
60 changed files with 1243 additions and 1022 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DjangoAdmin_FastAPI_AntdVue/zh/volume4/frontend/form.md
+57 -46
View File
@@ -1,7 +1,7 @@
# BasicForm 表单
:::tip 说明
`BasicForm` 位于 `src/components/Form/src/BasicForm.vue`，基于 ElementPlus 的 `el-form` 二次封装，通过 schemas 配置化定义表单字段，支持查询表单和业务表单两种模式。
`BasicForm` 位于 `src/components/Form/src/BasicForm.vue`，基于 AntDesign Vue 的 `a-form` 二次封装，通过 schemas 配置化定义表单字段，支持查询表单和业务表单两种模式。
:::
## 组件架构
@@ -24,9 +24,9 @@ src/components/Form/
列表页的搜索区域使用 `useForm` 注册表单：
```vue
<el-card :bordered="false" class="pt-3 mb-3 proCard">
<a-card :bordered="false" class="pt-3 mb-3 proCard">
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
</el-card>
</a-card>
```
### querySchemas 定义
@@ -51,7 +51,7 @@ export const schemas: FormSchema[] = [
label: '状态',
componentProps: {
placeholder: '请选择状态',
clearable: true,
allowClear: true,
options: [
{ label: '正常', value: '1' },
{ label: '禁用', value: '2' },
@@ -66,15 +66,19 @@ export const schemas: FormSchema[] = [
```typescript
import { schemas } from './querySchemas';
import { useForm } from '@/components/Form/index';
import { ColProps } from 'element-plus';
const formParams = reactive({ name: '', status: '' });
const [register, {}] = useForm({
labelWidth: 80,
layout: 'horizontal',
colProps: { span: 6 } as ColProps,
submitOnReset: true,
rowProps: { gutter: [16, 0] },
colProps: {
xs: 24,
sm: 24,
md: 12,
lg: 8,
xl: 6,
},
labelCol: { span: 6, offset: 0 },
schemas,
});
@@ -93,73 +97,80 @@ function handleReset() {
## 业务表单（编辑弹窗）
编辑弹窗中直接使用 `el-form` + `el-form-item` 构建表单：
编辑弹窗中直接使用 `a-form` + `a-form-item` 构建表单：
```vue
<!-- src/views/system/position/edit.vue -->
<template>
<el-dialog v-model="props.visible" :title="props.positionId ? '编辑' : '新增'" width="500">
<el-form class="ls-form" ref="formRef" :model="formData" label-width="80px">
<el-form-item
<a-modal v-model:visible="props.visible" :title="props.positionId ? '编辑' : '新增'" width="500px">
<a-form
class="ls-form"
ref="formRef"
:model="formData"
:label-col="{ style: { width: '85px' } }"
>
<a-form-item
label="岗位名称"
prop="name"
name="name"
:rules="{ required: true, message: '请输入岗位名称', trigger: 'blur' }"
>
<el-input v-model="formData.name" placeholder="请输入岗位名称" clearable />
</el-form-item>
<el-form-item label="岗位状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :value="1">正常</el-radio>
<el-radio :value="2">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="formData.sort" />
</el-form-item>
</el-form>
</el-dialog>
<a-input v-model:value="formData.name" placeholder="请输入岗位名称" allow-clear />
</a-form-item>
<a-form-item label="岗位状态" name="status">
<a-radio-group v-model:value="formData.status">
<a-radio :value="1">正常</a-radio>
<a-radio :value="2">停用</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="排序" name="sort">
<a-input-number v-model:value="formData.sort" />
</a-form-item>
</a-form>
</a-modal>
</template>
```
## BasicForm 内部渲染机制
`BasicForm.vue` 根据 `schema.component` 动态渲染对应的 ElementPlus 组件：
`BasicForm.vue` 根据 `schema.component` 动态渲染对应的 AntDesign Vue 组件：
```vue
<!-- src/components/Form/src/BasicForm.vue 核心逻辑 -->
<template v-for="schema in getSchema" :key="schema.field">
<!-- Checkbox -->
<template v-if="schema.component === 'Checkbox'">
<el-checkbox-group v-model="formModel[schema.field]">
<el-checkbox v-for="item in schema.componentProps?.options" :value="item.value">
<a-checkbox-group v-model:value="formModel[schema.field]">
<a-checkbox v-for="item in schema.componentProps?.options" :value="item.value">
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</a-checkbox>
</a-checkbox-group>
</template>
<!-- RadioGroup -->
<template v-else-if="schema.component === 'RadioGroup'">
<el-radio-group v-model="formModel[schema.field]">
<el-radio v-for="item in schema.componentProps?.options" :value="item.value">
<a-radio-group v-model:value="formModel[schema.field]">
<a-radio v-for="item in schema.componentProps?.options" :value="item.value">
{{ item.label }}
</el-radio>
</el-radio-group>
</a-radio>
</a-radio-group>
</template>
<!-- Select -->
<template v-else-if="schema.component === 'Select'">
<el-select v-model="formModel[schema.field]">
<el-option v-for="item in schema.componentProps?.options" :value="item.value" :label="item.label" />
</el-select>
<a-select v-model:value="formModel[schema.field]">
<a-select-option v-for="item in schema.componentProps?.options" :value="item.value">
{{ item.label }}
</a-select-option>
</a-select>
</template>
<!-- Daterange -->
<template v-else-if="schema.component === 'Daterange'">
<el-date-picker v-model="formModel[schema.field]" type="daterange" value-format="YYYY-MM-DD" />
<!-- RangePicker -->
<template v-else-if="schema.component === 'RangePicker'">
<a-range-picker v-model:value="formModel[schema.field]" valueFormat="YYYY-MM-DD" />
</template>
<!-- 其他组件：动态渲染 el-{component} -->
<component v-else :is="`el-${schema.component}`" v-model="formModel[schema.field]" />
<!-- 其他组件：动态渲染 a-{component} -->
<component v-else :is="`a-${schema.component}`" v-model:value="formModel[schema.field]" />
</template>
```
@@ -170,7 +181,7 @@ interface FormSchema {
field: string; // 字段名
label: string; // 标签文本
component: string; // 组件类型：Input / Select / RadioGroup / Checkbox / DatePicker 等
componentProps?: any; // 组件属性（placeholder、options、clearable 等）
componentProps?: any; // 组件属性（placeholder、options、allowClear 等）
required?: boolean; // 是否必填
rules?: any[]; // 自定义校验规则
defaultValue?: any; // 默认值
@@ -237,4 +248,4 @@ onMounted(() => {
## 总结
BasicForm 通过 schemas 配置化定义表单字段，内部根据 `component` 动态渲染对应的 ElementPlus 组件。查询表单使用 `useForm` 注册并绑定 `@submit`/`@reset` 事件，业务表单直接使用 `el-form` + `reactive` 管理数据。支持多种组件类型、表单校验、数据绑定、条件隐藏等能力。
BasicForm 通过 schemas 配置化定义表单字段，内部根据 `component` 动态渲染对应的 AntDesign Vue 组件。查询表单使用 `useForm` 注册并绑定 `@submit`/`@reset` 事件，业务表单直接使用 `a-form` + `reactive` 管理数据。支持多种组件类型、表单校验、数据绑定、条件隐藏等能力。