fix: select display problem (#46)

formilyjs · Jul 1, 2024 · 1e6e641 · 1e6e641
1 parent 7d74ea9
commit 1e6e641
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 7 deletions.
diff --git a/docs/demos/guide/select/scope-slot.vue b/docs/demos/guide/select/scope-slot.vue
@@ -0,0 +1,81 @@
+<template>
+  <FormProvider :form="form">
+    <SchemaField>
+      <SchemaStringField
+        name="select"
+        title="选择框"
+        x-decorator="FormItem"
+        x-component="Select"
+        :x-component-props="{
+          style: {
+            width: '240px',
+          },
+        }"
+        :enum="[
+          {
+            label: '选项1',
+            value: 1,
+          },
+          {
+            label: '选项2',
+            value: 2,
+          },
+        ]"
+        :x-content="{
+          option: OptionComp,
+        }"
+      />
+
+      <SchemaStringField
+        name="select2"
+        title="选择框2"
+        x-decorator="FormItem"
+        x-component="Select"
+        :x-component-props="{
+          style: {
+            width: '240px',
+          },
+        }"
+        :enum="[
+          {
+            label: '选项1',
+            value: 1,
+          },
+          {
+            label: '选项2',
+            value: 2,
+          },
+        ]"
+      />
+    </SchemaField>
+    <Submit @submit="log">提交</Submit>
+  </FormProvider>
+</template>
+
+<script lang="ts" setup>
+import { createForm } from '@formily/core'
+import { createSchemaField, FormProvider } from '@formily/vue'
+import { FormItem, Select, Submit } from '@formily/element-plus'
+import { h } from 'vue'
+
+const OptionComp = {
+  props: {
+    option: null,
+  },
+  render(_1, _2, { option }) {
+    return h('div', {}, `${option?.label}-${option?.value}`)
+  },
+}
+
+const form = createForm()
+const { SchemaField, SchemaStringField } = createSchemaField({
+  components: {
+    FormItem,
+    Select,
+  },
+})
+
+const log = (value) => {
+  console.log(value)
+}
+</script>
diff --git a/docs/guide/select.md b/docs/guide/select.md
@@ -30,6 +30,10 @@
 
 <dumi-previewer demoPath="guide/select/template-async" />
 
+## Template 作用域插槽
+
+<dumi-previewer demoPath="guide/select/scope-slot" />
+
 ## API
 
 参考 [https://element-plus.gitee.io/zh-CN/component/select.html](https://element-plus.gitee.io/zh-CN/component/select.html)

diff --git a/packages/components/src/select/index.ts b/packages/components/src/select/index.ts
@@ -3,7 +3,7 @@ import { defineComponent, h } from 'vue'
 import { PreviewText } from '../preview-text'
 
 import { ElSelect, ElOption } from 'element-plus'
-import { resolveComponent, transformComponent } from '../__builtins__'
+import { transformComponent } from '../__builtins__'
 
 export type SelectProps = typeof ElSelect & {
   options?: Array<typeof ElOption>
@@ -35,9 +35,10 @@ const SelectOption = defineComponent({
                       ElOption,
                       { key: option, value: option, label: option },
                       {
-                        default: () => [
-                          resolveComponent(slots?.option ?? option, { option }),
-                        ],
+                        default: () =>
+                          slots?.option?.({
+                            option: { label: option, value: option },
+                          }) ?? option,
                       }
                     )
                   } else {
@@ -48,9 +49,10 @@ const SelectOption = defineComponent({
                         ...option,
                       },
                       {
-                        default: () => [
-                          resolveComponent(slots?.option ?? option, { option }),
-                        ],
+                        default: () =>
+                          slots?.option?.({ option }) ??
+                          option.label ??
+                          option.value,
                       }
                     )
                   }