当前位置：首页 > news >正文

突发奇想，还未实践，在Vben5的Antd模式下，将表单从「JS 配置化」改写成「模板可视化」形式（豆包版）

news 2025/9/6 8:13:50

在 Vben5 的 Antd 模式下，完全可以将表单从「JS 配置化」改写成「模板可视化」形式，把表单项直接写在 Vue 模板中，更直观且符合传统 Vue 开发习惯。以下是完整的改写示例，保留原功能但结构更清晰：

改写思路

放弃 JS 中的 schema 配置：将每个表单项（如 Input、Select、DatePicker）直接写在模板的 <Form> 标签内。
用 FormItem 包裹表单项：通过 FormItem 的 name（对应原 fieldName）、label、rules 等属性绑定字段信息和校验规则。
保留 useVbenForm 核心能力：仍用该钩子获取表单实例，实现提交、校验等功能，确保和原逻辑一致。

完整改写代码

<template><!-- 表单容器：绑定表单实例，配置布局和提交逻辑 --><Form:form="formInstance":layout="formLayout":scroll-to-first-error="true"@submit="onSubmit"class="grid-cols-1"><!-- 1. 字段1：Input（必填） --><FormItemname="field1"label="字段1":rules="[{ required: true, message: '请输入字段1' }]"><Input placeholder="请输入" class="w-full" /></FormItem><!-- 2. 字段2：Input（必填 + 默认值） --><FormItemname="field2"label="默认值(必填)":rules="[{ required: true, message: '请输入字段2' }]"initial-value="默认值" <!-- 对应原 defaultValue -->><Input placeholder="请输入" class="w-full" /></FormItem><!-- 3. 字段3：Input（非必填 + 默认值） --><FormItemname="field3"label="默认值(非必填)"initial-value="默认值"><Input placeholder="请输入" class="w-full" /></FormItem><!-- 4. 字段31：Input（自定义校验：最少1个字符） --><FormItemname="field31"label="自定义信息":rules="[{ required: true, min: 1, message: '最少输入1个字符' }]"><Input placeholder="请输入" class="w-full" /></FormItem><!-- 5. 字段4：邮箱Input（邮箱格式校验） --><FormItemname="field4"label="邮箱":rules="[{ required: true, type: 'email', message: '请输入正确的邮箱' }]"><Input placeholder="请输入" class="w-full" /></FormItem><!-- 6. 数字输入：InputNumber（必填） --><FormItemname="number"label="数字":rules="[{ required: true, message: '请输入数字' }]"><InputNumber placeholder="请输入" class="w-full" /></FormItem><!-- 7. 下拉选择：Select（必填） --><FormItemname="options"label="下拉选":rules="[{ required: true, message: '请选择选项' }]"><Selectallow-clearfilter-optionplaceholder="请选择"show-searchclass="w-full"><Select.Option value="1">选项1</Select.Option><Select.Option value="2">选项2</Select.Option></Select></FormItem><!-- 8. 单选组：RadioGroup（必填） --><FormItemname="radioGroup"label="单选组":rules="[{ required: true, message: '请选择一项' }]"><RadioGroup class="w-full"><Radio value="1">选项1</Radio><Radio value="2">选项2</Radio></RadioGroup></FormItem><!-- 9. 多选组：CheckboxGroup（必填） --><FormItemname="checkboxGroup"label="多选组":rules="[{ required: true, message: '请至少选择一项' }]"><CheckboxGroup name="cname" class="w-full"><Checkbox value="1">选项1</Checkbox><Checkbox value="2">选项2</Checkbox></CheckboxGroup></FormItem><!-- 10. 单独复选框：Checkbox（必填：同意协议） --><FormItemname="checkbox"label="" <!-- 空label，避免多余占位 -->:rules="[{ required: true, message: '请勾选同意协议' }]"><Checkbox class="w-full">我已阅读并同意</Checkbox></FormItem><!-- 11. 日期选择：DatePicker（必填） --><FormItemname="datePicker"label="日期选择框":rules="[{ required: true, message: '请选择日期' }]"><DatePicker class="w-full" /></FormItem><!-- 12. 区间选择：RangePicker（必填） --><FormItemname="rangePicker"label="区间选择框":rules="[{ required: true, message: '请选择区间' }]"><RangePicker class="w-full" /></FormItem><!-- 13. 密码输入：InputPassword（必填） --><FormItemname="password"label="密码":rules="[{ required: true, message: '请输入密码' }]"><InputPassword placeholder="请输入" class="w-full" /></FormItem><!-- 提交按钮 --><FormItem><Button type="primary" html-type="submit">提交表单</Button></FormItem></Form>
</template><script lang="ts" setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
// 导入 Vben 表单核心组件和钩子
import { useVbenForm } from '#/adapter/form';
// 导入 Antd 基础组件（Vben 适配版）
import { Form, FormItem, Input, InputNumber, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker, RangePicker, InputPassword, Button 
} from '#/adapter/component';// 1. 初始化表单：获取表单实例（替代原 schema 配置）
const { form: formInstance } = useVbenForm();// 2. 表单布局（对应原 layout: 'horizontal'）
const formLayout = ref('horizontal');// 3. 提交函数（和原逻辑完全一致）
const onSubmit = (values: Record<string, any>) => {message.success({content: `form values: ${JSON.stringify(values)}`,});
};
</script>

关键改动说明

模板结构更直观
每个表单项都以「FormItem 包裹组件」的形式写在模板中，字段名（name）、标签（label）、校验规则（rules）一目了然，无需在 JS 中找 schema 配置。
保留原功能不变
- 校验规则：通过 FormItem 的 rules 属性直接绑定（如邮箱校验、必填校验），逻辑和原 schema 一致。
- 默认值：用 FormItem 的 initial-value 替代原 defaultValue。
- 布局和提交：layout 用变量控制，提交函数 onSubmit 完全复用。
组件引入更清晰
直接从 #/adapter/antd 导入需要的组件（如 Select、DatePicker），和模板中的使用一一对应，降低理解成本。