修改form type

src/types/form.ts

@@ -22,7 +22,7 @@ export type AdvancedFormItem = {
 }
 
 type Form = {
-  props?: FormProps
+  props?: Partial<FormProps>
   route?: any
   span?: number
   advanced?: boolean

src/views/form/Basic.vue

@@ -2,7 +2,10 @@
 import type { BasicForm } from '@/types/form'
 
 const formConfig = reactive<BasicForm>({
-  span: 12,
+  span: 24,
+  props: {
+    labelPosition: 'right'
+  },
   formItems: [
     {
       label: '用户名',
@@ -33,6 +36,24 @@ const formConfig = reactive<BasicForm>({
       props: {
         maxlength: 11
       }
+    },
+    {
+      label: '字段名',
+      value: '',
+      name: 'name',
+      type: 'input'
+    },
+    {
+      label: '字段名',
+      value: '',
+      name: 'name',
+      type: 'input'
+    },
+    {
+      label: '字段名',
+      value: '',
+      name: 'name',
+      type: 'input'
     }
   ]
 })
@@ -53,16 +74,18 @@ const handleSave = () => {
 </script>
 
 <template>
-  <div class="h-full bg-white p-16px">
-    <pro-form
-      :formConfig="formConfig"
-      :formData="formData"
-      :create="create"
-      :update="update"
-      ref="proFormRef"
-    ></pro-form>
-    <div class="text-center">
-      <el-button type="primary" @click="handleSave">保存</el-button>
+  <div class="h-full bg-white p-16px pt-50px flex justify-center">
+    <div class="w-500px">
+      <pro-form
+        :formConfig="formConfig"
+        :formData="formData"
+        :create="create"
+        :update="update"
+        ref="proFormRef"
+      ></pro-form>
+      <div class="text-center">
+        <el-button type="primary" @click="handleSave">保存</el-button>
+      </div>
     </div>
   </div>
 </template>