diff --git a/packages/vant/src/area/README.md b/packages/vant/src/area/README.md
index 0e0dba1c67a..0bed79c09dd 100644
--- a/packages/vant/src/area/README.md
+++ b/packages/vant/src/area/README.md
@@ -113,7 +113,7 @@ export default {
```
diff --git a/packages/vant/src/area/README.zh-CN.md b/packages/vant/src/area/README.zh-CN.md
index ba97abadf1d..454863ace6b 100644
--- a/packages/vant/src/area/README.zh-CN.md
+++ b/packages/vant/src/area/README.zh-CN.md
@@ -117,7 +117,7 @@ export default {
```
diff --git a/packages/vant/src/area/demo/index.vue b/packages/vant/src/area/demo/index.vue
index 21ebf918e82..398a945a261 100644
--- a/packages/vant/src/area/demo/index.vue
+++ b/packages/vant/src/area/demo/index.vue
@@ -10,14 +10,14 @@ const t = useTranslate({
title2: '控制选中项',
title3: '配置显示列',
title4: '配置列占位提示文字',
- columnsPlaceholder: ['请选择', '请选择', '请选择'],
+ columnsPlaceholder: ['省份', '城市', '区县'],
areaList,
},
'en-US': {
title2: 'Model Value',
title3: 'Columns Number',
title4: 'Columns Placeholder',
- columnsPlaceholder: ['Choose', 'Choose', 'Choose'],
+ columnsPlaceholder: ['Province', 'City', 'County'],
areaList: areaListEn,
},
});
diff --git a/packages/vant/src/area/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/area/test/__snapshots__/demo-ssr.spec.ts.snap
index d15ac7e811f..0c6b00b2112 100644
--- a/packages/vant/src/area/test/__snapshots__/demo-ssr.spec.ts.snap
+++ b/packages/vant/src/area/test/__snapshots__/demo-ssr.spec.ts.snap
@@ -535,7 +535,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-picker-column__item van-picker-column__item--selected"
>
- Choose
+ Province
- Choose
+ City
@@ -601,7 +601,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-picker-column__item van-picker-column__item--selected"
>
- Choose
+ County
diff --git a/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap
index 9b46bc5aefe..3456837d85b 100644
--- a/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap
@@ -510,7 +510,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-picker-column__item van-picker-column__item--selected"
>
- Choose
+ Province
- Choose
+ City
@@ -574,7 +574,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-picker-column__item van-picker-column__item--selected"
>
- Choose
+ County
diff --git a/packages/vant/src/area/test/index.spec.ts b/packages/vant/src/area/test/index.spec.ts
index 08b0e148a9f..f41e3bfb325 100644
--- a/packages/vant/src/area/test/index.spec.ts
+++ b/packages/vant/src/area/test/index.spec.ts
@@ -7,6 +7,24 @@ import {
PickerConfirmEventParams,
} from '../../picker';
+test('should columns placeholder displayed normally', async () => {
+ const columnsPlaceholder = ['Province', 'City', 'County'];
+
+ const wrapper = mount(Area, {
+ props: {
+ areaList,
+ columnsPlaceholder,
+ },
+ });
+
+ const columns = await wrapper.findAll('.van-picker-column');
+ await columns[0].findAll('li')?.[1].trigger('click');
+ expect(columns[1].find('li').text()).toBe(columnsPlaceholder[1]);
+
+ await columns[1].findAll('li')?.[1].trigger('click');
+ expect(columns[2].find('li').text()).toBe(columnsPlaceholder[2]);
+});
+
test('should emit confirm event after click the confirm button', async () => {
const wrapper = mount(Area, {
props: {
diff --git a/packages/vant/src/area/utils.ts b/packages/vant/src/area/utils.ts
index 2e637df9c63..a8a1a84c42f 100644
--- a/packages/vant/src/area/utils.ts
+++ b/packages/vant/src/area/utils.ts
@@ -47,10 +47,10 @@ export function formatDataForCascade({
const getProvinceChildren = () => {
if (showCity) {
- return placeholder.length
+ return placeholder.length > 1
? [
makeOption(
- placeholder[0],
+ placeholder[1],
AREA_EMPTY_CODE,
showCounty ? [] : undefined,
),
@@ -71,7 +71,7 @@ export function formatDataForCascade({
if (showCity) {
const getCityChildren = () => {
if (showCounty) {
- return placeholder.length ? [makeOption(placeholder[1])] : [];
+ return placeholder.length > 2 ? [makeOption(placeholder[2])] : [];
}
};