feat(Picker): custom columns children key (#7791)

src/picker/demo/data.ts

@@ -79,3 +79,62 @@ export const cascadeColumns = {
     },
   ],
 };
+
+export const cascadeColumnsCustomKey = {
+  'zh-CN': [
+    {
+      cityName: '浙江',
+      cities: [
+        {
+          cityName: '杭州',
+          cities: [{ cityName: '西湖区' }, { cityName: '余杭区' }],
+        },
+        {
+          cityName: '温州',
+          cities: [{ cityName: '鹿城区' }, { cityName: '瓯海区' }],
+        },
+      ],
+    },
+    {
+      cityName: '福建',
+      cities: [
+        {
+          cityName: '福州',
+          cities: [{ cityName: '鼓楼区' }, { cityName: '台江区' }],
+        },
+        {
+          cityName: '厦门',
+          cities: [{ cityName: '思明区' }, { cityName: '海沧区' }],
+        },
+      ],
+    },
+  ],
+  'en-US': [
+    {
+      cityName: 'Zhejiang',
+      cities: [
+        {
+          cityName: 'Hangzhou',
+          cities: [{ cityName: 'Xihu' }, { cityName: 'Yuhang' }],
+        },
+        {
+          cityName: 'Wenzhou',
+          cities: [{ cityName: 'Lucheng' }, { cityName: 'Ouhai' }],
+        },
+      ],
+    },
+    {
+      cityName: 'Fujian',
+      cities: [
+        {
+          cityName: 'Fuzhou',
+          cities: [{ cityName: 'Gulou' }, { cityName: 'Taijiang' }],
+        },
+        {
+          cityName: 'Xiamen',
+          cities: [{ cityName: 'Siming' }, { cityName: 'Haicang' }],
+        },
+      ],
+    },
+  ],
+};

src/picker/demo/index.vue

@@ -64,11 +64,18 @@
       />
     </van-popup>
   </demo-block>
+  <demo-block card :title="t('customChildrenKey')">
+    <van-picker
+      :title="t('title')"
+      :columns="t('customChildrenColumns')"
+      :columns-field-names="customFieldName"
+    />
+  </demo-block>
 </template>
 
 <script>
 import { ref, computed, reactive, toRefs } from 'vue';
-import { dateColumns, cascadeColumns } from './data';
+import { dateColumns, cascadeColumns, cascadeColumnsCustomKey } from './data';
 import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
@@ -85,6 +92,8 @@ const i18n = {
     cascadeColumns: cascadeColumns['zh-CN'],
     multipleColumns: '多列选择',
     setColumnValues: '动态设置选项',
+    customChildrenKey: '自定义Columns字段',
+    customChildrenColumns: cascadeColumnsCustomKey['zh-CN'],
     textColumns: [
       '杭州',
       '宁波',
@@ -118,6 +127,8 @@ const i18n = {
     cascadeColumns: cascadeColumns['en-US'],
     multipleColumns: 'Multiple Columns',
     setColumnValues: 'Set Column Values',
+    customChildrenKey: 'Custom Columns Fields',
+    customChildrenColumns: cascadeColumnsCustomKey['en-US'],
     textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
     disabledColumns: [
       { text: 'Delaware', disabled: true },
@@ -139,6 +150,10 @@ export default {
     const state = reactive({
       showPicker: false,
       fieldValue: '',
+      customFieldName: {
+        text: 'cityName',
+        children: 'cities',
+      },
     });
 
     const columns = computed(() => {