chore(Area): adjust some codes

packages/vant/src/area/Area.tsx

@@ -16,7 +16,7 @@ import {
   createNamespace,
 } from '../utils';
 import { pickerSharedProps } from '../picker/Picker';
-import { formatDataForCascade } from './utils';
+import { INHERIT_PROPS, INHERIT_SLOTS, formatDataForCascade } from './utils';
 
 // Components
 import { Picker } from '../picker';
@@ -26,25 +26,6 @@ import type { AreaList } from './types';
 
 const [name, bem] = createNamespace('area');
 
-const INHERIT_SLOTS = [
-  'title',
-  'cancel',
-  'confirm',
-  'toolbar',
-  'columns-top',
-  'columns-bottom',
-] as const;
-const INHERIT_PROPS = [
-  'title',
-  'loading',
-  'readonly',
-  'optionHeight',
-  'swipeDuration',
-  'visibleOptionNum',
-  'cancelButtonText',
-  'confirmButtonText',
-] as const;
-
 const areaProps = extend({}, pickerSharedProps, {
   modelValue: String,
   columnsNum: makeNumericProp(3),
@@ -66,15 +47,7 @@ export default defineComponent({
 
   setup(props, { emit, slots }) {
     const codes = ref<string[]>([]);
-
+    const columns = computed(() => formatDataForCascade(props));
-    const columns = computed(() =>
-      formatDataForCascade(
-        props.areaList,
-        props.columnsNum,
-        props.columnsPlaceholder
-      )
-    );
-
     const onChange = (...args: unknown[]) => emit('change', ...args);
     const onCancel = (...args: unknown[]) => emit('cancel', ...args);
     const onConfirm = (...args: unknown[]) => emit('confirm', ...args);

packages/vant/src/area/utils.ts

@@ -1,8 +1,27 @@
-import type { AreaList } from '.';
+import type { AreaProps } from '.';
 import type { PickerOption } from '../picker';
 
 const EMPTY_CODE = '000000';
 
+export const INHERIT_SLOTS = [
+  'title',
+  'cancel',
+  'confirm',
+  'toolbar',
+  'columns-top',
+  'columns-bottom',
+] as const;
+export const INHERIT_PROPS = [
+  'title',
+  'loading',
+  'readonly',
+  'optionHeight',
+  'swipeDuration',
+  'visibleOptionNum',
+  'cancelButtonText',
+  'confirmButtonText',
+] as const;
+
 const makeOption = (
   text = '',
   value = EMPTY_CODE,
@@ -13,20 +32,19 @@ const makeOption = (
   children,
 });
 
-export function formatDataForCascade(
+export function formatDataForCascade({
-  { city_list: city, county_list: county, province_list: province }: AreaList,
+  areaList,
-  columnsNum: number | string,
+  columnsNum,
-  placeholder: string[]
+  columnsPlaceholder: placeholder,
-) {
+}: AreaProps) {
+  const {
+    city_list: city,
+    county_list: county,
+    province_list: province,
+  } = areaList;
   const showCity = columnsNum > 1;
   const showCounty = columnsNum > 2;
 
-  const getCityChildren = () => {
-    if (showCounty) {
-      return placeholder.length ? [makeOption(placeholder[1])] : [];
-    }
-  };
-
   const getProvinceChildren = () => {
     if (showCity) {
       return placeholder.length
@@ -45,6 +63,12 @@ export function formatDataForCascade(
 
   const cityMap = new Map<string, PickerOption>();
   if (showCity) {
+    const getCityChildren = () => {
+      if (showCounty) {
+        return placeholder.length ? [makeOption(placeholder[1])] : [];
+      }
+    };
+
     Object.keys(city).forEach((code) => {
       const option = makeOption(city[code], code, getCityChildren());
       cityMap.set(code.slice(0, 4), option);
@@ -68,9 +92,7 @@ export function formatDataForCascade(
   const options = Array.from(provinceMap.values()) as PickerOption[];
 
   if (placeholder.length) {
-    const county = showCounty
+    const county = showCounty ? [makeOption(placeholder[2])] : undefined;
-      ? [makeOption(placeholder[2], EMPTY_CODE)]
-      : undefined;
     const city = showCity
       ? [makeOption(placeholder[1], EMPTY_CODE, county)]
       : undefined;