當封裝的BaseForm無法滿足實際業務需求時可以使用antd vue 原生form對象進行頁面布局具體用法參考[Form用法](https://2x.antdv.com/components/form-cn) 1.配合BasicDrawer 用法示例 ~~~ <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="添加用戶" width="500px" @ok="handleSubmit" destroyOnClose showFooter> <a-form ref="formRef" :model="formModel"> <a-form-item label="用戶名" name="routerId"> <a-input v-model:value="router.routerId" placeholder="請輸入用戶名"/> </a-form-item> </a-form> </BasicDrawer> <script lang="ts" setup> const formRef = ref(); let formModel= reactive({}); const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { isUpdate.value = !!data?.isUpdate; setDrawerProps({ confirmLoading: false }); if (unref(isUpdate)) { formModel= Object.assign(formModel, data.record); } }); /** * 提交表單 */ async function handleSubmit() { await formRef.value.validate().then(() => { try { setDrawerProps({ confirmLoading: true })； //提交表單 saveOrUpdateRoute({ formModel: formModel}).then(() => { //刷新列表 emit('success'); closeDrawer(); }); } finally { setDrawerProps({ confirmLoading: false }); } }); } </script> ~~~ 2.配合BasicModal 用法示例 ~~~ <BasicModal v-bind="$attrs" @register="registerModal" title="添加用戶" @ok="handleSubmit" width="70%"> <a-form ref="formRef" :model="formModel"> <a-form-item label="用戶名" name="routerId"> <a-input v-model:value="router.routerId" placeholder="請輸入用戶名"/> </a-form-item> </a-form> </BasicModal > <script lang="ts" setup> const formRef = ref(); let formModel= reactive({}); const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => { setModalProps({confirmLoading: false}); reset() isUpdate.value = !!data?.isUpdate; if (unref(isUpdate)) { formModel= Object.assign(formModel, data.record); } }); /** * 提交表單 */ async function handleSubmit() { await formRef.value.validate().then(() => { try { setModalProps({ confirmLoading: true })； //提交表單 saveOrUpdateRoute({ formModel: formModel}).then(() => { //刷新列表 emit('success'); closeModal(); }); } finally { setModalProps({ confirmLoading: false }); } }); } </script> ~~~