diff --git a/packages/components/select/demo/Loading.md b/packages/components/select/demo/Loading.md
new file mode 100644
index 000000000..1dd823e04
--- /dev/null
+++ b/packages/components/select/demo/Loading.md
@@ -0,0 +1,13 @@
+---
+title:
+ zh: 加载中
+ en: Loading
+order: 51
+---
+## zh
+
+数据还未加载完成时,展示一个加载中的状态。
+
+## en
+
+When the data has not been loaded yet, display a loading status。
diff --git a/packages/components/select/demo/Loading.vue b/packages/components/select/demo/Loading.vue
new file mode 100644
index 000000000..31ea1af9d
--- /dev/null
+++ b/packages/components/select/demo/Loading.vue
@@ -0,0 +1,34 @@
+
+
+
+ Load Data
+
+
+
diff --git a/packages/components/select/docs/Api.zh.md b/packages/components/select/docs/Api.zh.md
index 4359ee204..9d3898671 100644
--- a/packages/components/select/docs/Api.zh.md
+++ b/packages/components/select/docs/Api.zh.md
@@ -34,6 +34,7 @@
| `searchable` | 是否可搜索 | `boolean \| 'overlay'` | `false` | - | 当为 `true` 时搜索功能集成在选择器上,当为 `overlay` 时,搜索功能集成在悬浮层上 |
| `searchFn` | 根据搜索的文本进行筛选 | `boolean \| SelectSearchFn` | `true` | - | 为 `true` 时使用默认的搜索规则, 如果使用远程搜索,应该设置为 `false` |
| `size` | 设置选择器大小 | `'sm' \| 'md' \| 'lg'` | `md` | ✅ | - |
+| `spin` | 是否显示加载中状态 | `boolean \| SpinProps` | `undefined` | - | - |
| `status` | 手动指定校验状态 | `valid \| invalid \| validating` | - | - | - |
| `suffix` | 设置后缀图标 | `string \| #suffix` | `down` | ✅ | - |
| `virtual` | 是否开启虚拟滚动 | `boolean` | `false` | - | - |
diff --git a/packages/components/select/src/Select.tsx b/packages/components/select/src/Select.tsx
index 7ed60fbc6..bd871bfc1 100644
--- a/packages/components/select/src/Select.tsx
+++ b/packages/components/select/src/Select.tsx
@@ -9,6 +9,8 @@
import { type ComputedRef, Slots, computed, defineComponent, normalizeClass, provide, ref, watch } from 'vue'
+import { isBoolean } from 'lodash-es'
+
import { useAccessorAndControl } from '@idux/cdk/forms'
import { type VirtualScrollToFn } from '@idux/cdk/scroll'
import { type VKey, callEmit, useState } from '@idux/cdk/utils'
@@ -17,6 +19,7 @@ import { ɵOverlay } from '@idux/components/_private/overlay'
import { ɵSelector, type ɵSelectorInstance } from '@idux/components/_private/selector'
import { type SelectConfig, useGlobalConfig } from '@idux/components/config'
import { useFormItemRegister, useFormSize, useFormStatus } from '@idux/components/form'
+import { IxSpin } from '@idux/components/spin'
import { useActiveState } from './composables/useActiveState'
import { GetKeyFn, useGetOptionKey } from './composables/useGetOptionKey'
@@ -167,8 +170,14 @@ export default defineComponent({
/>
)
+ const renderLoading = (children: JSX.Element) => {
+ const { spin } = props
+ const spinProps = isBoolean(spin) ? { spinning: spin } : spin
+ return spinProps ? {children} : children
+ }
+
const renderContent = () => {
- const children = []
+ const children = [renderLoading()]
const { searchable, overlayRender } = props
if (searchable === 'overlay') {
diff --git a/packages/components/select/src/composables/usePanelProps.ts b/packages/components/select/src/composables/usePanelProps.ts
index 3c64c7670..ca9e75b60 100644
--- a/packages/components/select/src/composables/usePanelProps.ts
+++ b/packages/components/select/src/composables/usePanelProps.ts
@@ -29,7 +29,6 @@ export function usePanelProps(
multiple: props.multiple,
multipleLimit: props.multipleLimit,
virtual: props.virtual,
-
'onUpdate:activeValue': setActiveValue,
onOptionClick,
onScroll: props.onScroll,
diff --git a/packages/components/select/src/types.ts b/packages/components/select/src/types.ts
index 8268e8086..692374fb0 100644
--- a/packages/components/select/src/types.ts
+++ b/packages/components/select/src/types.ts
@@ -12,6 +12,7 @@ import type { VirtualScrollToFn } from '@idux/cdk/scroll'
import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey } from '@idux/cdk/utils'
import type { EmptyProps } from '@idux/components/empty'
import type { FormSize } from '@idux/components/form'
+import type { SpinProps } from '@idux/components/spin'
import type { OverlayContainerType } from '@idux/components/utils'
import type { DefineComponent, FunctionalComponent, HTMLAttributes, PropType, VNode, VNodeChild } from 'vue'
@@ -79,6 +80,7 @@ export const selectProps = {
size: { type: String as PropType, default: undefined },
status: String as PropType,
suffix: { type: String, default: undefined },
+ spin: { type: [Boolean, Object] as PropType, default: undefined },
virtual: { type: Boolean, default: false },
// events