feat(Cascader): add field-names prop (#7933)

src/cascader/demo/index.vue

@@ -8,7 +8,7 @@
       :placeholder="t('selectArea')"
       @click="base.show = true"
     />
-    <van-popup v-model:show="base.show" round position="bottom">
+    <van-popup v-model:show="base.show" round teleport="body" position="bottom">
       <van-cascader
         v-model="base.value"
         :title="t('selectArea')"
@@ -28,7 +28,12 @@
       :placeholder="t('selectArea')"
       @click="customColor.show = true"
     />
-    <van-popup v-model:show="customColor.show" round position="bottom">
+    <van-popup
+      v-model:show="customColor.show"
+      round
+      teleport="body"
+      position="bottom"
+    >
       <van-cascader
         v-model="customColor.value"
         :title="t('selectArea')"
@@ -49,7 +54,12 @@
       :placeholder="t('selectArea')"
       @click="async.show = true"
     />
-    <van-popup v-model:show="async.show" round position="bottom">
+    <van-popup
+      v-model:show="async.show"
+      round
+      teleport="body"
+      position="bottom"
+    >
       <van-cascader
         v-model="async.value"
         :title="t('selectArea')"
@@ -60,13 +70,41 @@
       />
     </van-popup>
   </demo-block>
+
+  <demo-block card :title="t('customFieldNames')">
+    <van-field
+      v-model="customFieldNames.result"
+      is-link
+      readonly
+      :label="t('area')"
+      :placeholder="t('selectArea')"
+      @click="customFieldNames.show = true"
+    />
+    <van-popup
+      v-model:show="customFieldNames.show"
+      round
+      teleport="body"
+      position="bottom"
+      safe-area-inset-bottom
+    >
+      <van-cascader
+        v-model="customFieldNames.value"
+        :title="t('selectArea')"
+        :options="customFieldOptions"
+        :field-names="fieldNames"
+        @close="customFieldNames.show = false"
+        @finish="onFinish('customFieldNames', $event)"
+      />
+    </van-popup>
+  </demo-block>
 </template>
 
 <script>
 import zhCNOptions from './area-zh-CN';
 import enUSOptions from './area-en-US';
-import { reactive, toRefs } from 'vue';
+import { computed, reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
+import { deepClone } from '../../utils/deep-clone';
 
 const i18n = {
   'zh-CN': {
@@ -86,6 +124,7 @@ const i18n = {
       { text: '杭州市', value: '330100' },
       { text: '宁波市', value: '330200' },
     ],
+    customFieldNames: '自定义字段名',
   },
   'en-US': {
     area: 'Area',
@@ -104,6 +143,7 @@ const i18n = {
       { text: 'Hangzhou', value: '330100' },
       { text: 'Ningbo', value: '330200' },
     ],
+    customFieldNames: 'Custom Field Names',
   },
 };
 
@@ -127,6 +167,38 @@ export default {
         result: '',
         options: t('asyncOptions1'),
       },
+      customFieldNames: {
+        show: false,
+        value: null,
+        result: '',
+      },
+    });
+
+    const fieldNames = {
+      text: 'name',
+      value: 'code',
+      children: 'items',
+    };
+
+    const customFieldOptions = computed(() => {
+      const options = deepClone(t('options'));
+      const adjustFieldName = (item) => {
+        if ('text' in item) {
+          item.name = item.text;
+          delete item.text;
+        }
+        if ('value' in item) {
+          item.code = item.value;
+          delete item.value;
+        }
+        if ('children' in item) {
+          item.items = item.children;
+          delete item.children;
+          item.items.forEach(adjustFieldName);
+        }
+      };
+      options.forEach(adjustFieldName);
+      return options;
     });
 
     const loadDynamicOptions = ({ value }) => {
@@ -138,7 +210,10 @@ export default {
     };
 
     const onFinish = (type, { value, selectedOptions }) => {
-      const result = selectedOptions.map((option) => option.text).join('/');
+      const result = selectedOptions
+        .map((option) => option.text || option.name)
+        .join('/');
+
       state[type] = {
         ...state[type],
         show: false,
@@ -151,6 +226,8 @@ export default {
       ...toRefs(state),
       t,
       onFinish,
+      fieldNames,
+      customFieldOptions,
       loadDynamicOptions,
     };
   },