Merge pull request #46 from roshan-labs/feat-form-custom-item

feat: pro-form 支持自定义表单项组件
roshan-labs · Aug 9, 2023 · 1d1b2b5 · 1d1b2b5
2 parents 735010d + ae11c2e
commit 1d1b2b5
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 2 deletions.
diff --git a/.changeset/five-swans-draw.md b/.changeset/five-swans-draw.md
@@ -0,0 +1,5 @@
+---
+'@roshan-ui/ui': minor
+---
+
+ProForm 支持自定义表单项组件
diff --git a/packages/ui/src/components/pro-form/pro-form.stories.ts b/packages/ui/src/components/pro-form/pro-form.stories.ts
@@ -385,6 +385,21 @@ Upload.args = {
 }
 Upload.storyName = '上传'
 
+export const SlotOption = Template.bind({})
+SlotOption.args = {
+  options: [
+    {
+      prop: 'custom',
+      type: 'custom',
+      slots: {
+        default: () => h(ElButton, null, () => '自定义表单项'),
+      },
+    },
+  ] as ProFormOption[],
+  labelWidth: 90,
+}
+SlotOption.storyName = '自定义插槽表单项'
+
 export const CustomAction = Template.bind({})
 CustomAction.args = {
   ...Default.args,

diff --git a/packages/ui/src/components/pro-form/pro-form.vue b/packages/ui/src/components/pro-form/pro-form.vue
@@ -4,8 +4,15 @@
     <el-row v-if="isLayout">
       <el-col v-for="item in options" v-show="!item.hide" :key="item.prop" v-bind="item">
         <el-form-item v-bind="item">
+          <!-- slots -->
+          <template v-for="(slot, name) in item.slots" :key="name" #[name]="slotProps">
+            <slot v-if="typeof slot === 'string'" :name="slot" v-bind="slotProps" />
+            <component :is="slot(slotProps)" v-if="typeof slot === 'function'" />
+          </template>
+          <!-- Other form item -->
           <component
             :is="getComponent(item.type)"
+            v-if="item.type !== 'custom' && !item.slots"
             v-bind="item.component"
             :model-value="fields[item.prop]"
             @update:model-value="updateFieldValue($event, item.prop)"
@@ -32,11 +39,17 @@
         </el-form-item>
       </el-col>
     </el-row>
-    <!-- Default -->
+    <!-- No layout -->
     <template v-else>
       <el-form-item v-for="item in options" v-show="!item.hide" :key="item.prop" v-bind="item">
+        <!-- slots -->
+        <template v-for="(slot, name) in item.slots" :key="name" #[name]="slotProps">
+          <slot v-if="typeof slot === 'string'" :name="slot" v-bind="slotProps" />
+          <component :is="slot(slotProps)" v-if="typeof slot === 'function'" />
+        </template>
         <component
           :is="getComponent(item.type)"
+          v-if="item.type !== 'custom' && !item.slots"
           v-bind="item.component"
           :model-value="fields[item.prop]"
           @update:model-value="updateFieldValue($event, item.prop)"

diff --git a/packages/ui/src/components/pro-form/types.ts b/packages/ui/src/components/pro-form/types.ts
@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import type { Ref, VNode } from 'vue'
 import type {
   FormProps,
   FormEmits,
@@ -299,6 +299,14 @@ interface FormSelectV2Option extends FormBaseOption {
   component?: FormSelectProps
 }
 
+/**
+ * 自定义表单项
+ */
+interface FormCustomOption extends FormBaseOption {
+  type: 'custom'
+  component?: VNode
+}
+
 export type ProFormOption =
   | FormAutocompleteOption
   | FormCascaderOption
@@ -318,6 +326,7 @@ export type ProFormOption =
   | FormUploadOption
   | FormSelectOption
   | FormSelectV2Option
+  | FormCustomOption
 
 export interface ProFormAction extends LayoutColProps {
   submit?: boolean