fix(area): columns-placeholder prop rendering error (#12857)

Co-authored-by: yipl <yipl@dustess.com>
Co-authored-by: neverland <jait.chen@foxmail.com>

packages/vant/src/area/README.md

@@ -113,7 +113,7 @@ export default {
 <van-area
   title="Title"
   :area-list="areaList"
-  :columns-placeholder="['Choose', 'Choose', 'Choose']"
+  :columns-placeholder="['Province', 'City', 'County']"
 />
 ```
 

packages/vant/src/area/README.zh-CN.md

@@ -117,7 +117,7 @@ export default {
 <van-area
   title="标题"
   :area-list="areaList"
-  :columns-placeholder="['请选择', '请选择', '请选择']"
+  :columns-placeholder="['省份', '城市', '区县']"
 />
 ```
 

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,
   },
 });

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"
           >
             <div class="van-ellipsis">
-              Choose
+              Province
             </div>
           </li>
           <li
@@ -583,7 +583,7 @@ exports[`should render demo and match snapshot 1`] = `
             class="van-picker-column__item van-picker-column__item--selected"
           >
             <div class="van-ellipsis">
-              Choose
+              City
             </div>
           </li>
         </ul>
@@ -601,7 +601,7 @@ exports[`should render demo and match snapshot 1`] = `
             class="van-picker-column__item van-picker-column__item--selected"
           >
             <div class="van-ellipsis">
-              Choose
+              County
             </div>
           </li>
         </ul>

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"
           >
             <div class="van-ellipsis">
-              Choose
+              Province
             </div>
           </li>
           <li
@@ -557,7 +557,7 @@ exports[`should render demo and match snapshot 1`] = `
             class="van-picker-column__item van-picker-column__item--selected"
           >
             <div class="van-ellipsis">
-              Choose
+              City
             </div>
           </li>
         </ul>
@@ -574,7 +574,7 @@ exports[`should render demo and match snapshot 1`] = `
             class="van-picker-column__item van-picker-column__item--selected"
           >
             <div class="van-ellipsis">
-              Choose
+              County
             </div>
           </li>
         </ul>

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: {

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])] : [];
       }
     };