在 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），和模板中的使用一一對應，降低理解成本。
優勢
- 可視化強：表單項的層級、順序、組件類型在模板中直接可見，便于快速修改（比如調整表單項順序，只需拖動模板中的
FormItem）。 - 調試方便：若某個表單項有問題，直接定位到模板中的對應位置，無需在 JS 的
schema數組中查找。 - 學習成本低：符合 Vue 開發者“模板寫結構、JS 寫邏輯”的習慣，新接手的同事更容易上手。
如果需要添加更復雜的邏輯（如動態表單項、聯動校驗），也只需在模板中通過 v-if、v-for 或組件事件實現，比在 JS 配置中寫 render 或 watch 更直觀。
