diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx
index 6332ba146..001cd763d 100644
--- a/packages/vant/src/picker/Picker.tsx
+++ b/packages/vant/src/picker/Picker.tsx
@@ -241,6 +241,11 @@ export default defineComponent({
const renderColumns = () => {
const wrapHeight = optionHeight.value * +props.visibleOptionNum;
const columnsStyle = { height: `${wrapHeight}px` };
+
+ if (!props.loading && !hasOptions.value && slots.empty) {
+ return slots.empty();
+ }
+
return (
{renderColumnItems()}
diff --git a/packages/vant/src/picker/README.md b/packages/vant/src/picker/README.md
index c9b18a0fa..941d913eb 100644
--- a/packages/vant/src/picker/README.md
+++ b/packages/vant/src/picker/README.md
@@ -276,11 +276,27 @@ export default {
};
```
+### Empty content
+
+When the data is empty, you can use the `empty` slot to customize the empty content.
+
+```html
+
+
+
+
+
+```
+
### Custom Columns Field
```html
@@ -374,6 +390,7 @@ export default {
| option | Custom option content | _option: PickerOption, index: number_ |
| columns-top | Custom content above columns | - |
| columns-bottom | Custom content below columns | - |
+| empty `v4.9.10` | Custom empty content | - |
### Data Structure of PickerOption
diff --git a/packages/vant/src/picker/README.zh-CN.md b/packages/vant/src/picker/README.zh-CN.md
index 065ce9de5..20e513928 100644
--- a/packages/vant/src/picker/README.zh-CN.md
+++ b/packages/vant/src/picker/README.zh-CN.md
@@ -297,11 +297,27 @@ export default {
};
```
+### 空状态
+
+当数据为空时,可以使用 `empty` 插槽自定义空状态内容。
+
+```html
+
+
+
+
+
+```
+
### 自定义 Columns 的结构
```html
@@ -395,6 +411,7 @@ export default {
| option | 自定义选项内容 | _option: PickerOption, index: number_ |
| columns-top | 自定义选项上方内容 | - |
| columns-bottom | 自定义选项下方内容 | - |
+| empty `v4.9.10` | 自定义空状态内容 | - |
### PickerOption 数据结构
diff --git a/packages/vant/src/picker/demo/index.vue b/packages/vant/src/picker/demo/index.vue
index c6353ceb9..b53286665 100644
--- a/packages/vant/src/picker/demo/index.vue
+++ b/packages/vant/src/picker/demo/index.vue
@@ -12,6 +12,7 @@ import {
disabledColumns,
customKeyColumns,
} from './data';
+import VanEmpty from '../../empty';
import { showToast } from '../../toast';
import { useTranslate } from '../../../docs/site';
@@ -29,6 +30,7 @@ const t = useTranslate({
multipleColumns: '多列选择',
customChildrenKey: '自定义 Columns 结构',
customChildrenColumns: customKeyColumns['zh-CN'],
+ emptyDescription: '暂无数据',
toastContent: (value: string) => `当前值:${value}`,
},
'en-US': {
@@ -44,6 +46,7 @@ const t = useTranslate({
multipleColumns: 'Multiple Columns',
customChildrenKey: 'Custom Columns Fields',
customChildrenColumns: customKeyColumns['en-US'],
+ emptyDescription: 'No data',
toastContent: (value: string) => `Value: ${value}`,
},
});
@@ -109,6 +112,18 @@ const onCancel = () => showToast(t('cancel'));
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+
+
+ No data
+
+
+
+
diff --git a/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap
index 5fabbe5c3..ef20ffa4b 100644
--- a/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap
@@ -608,6 +608,38 @@ exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+
+

+
+
+ No data
+
+
+
+