Sfoglia il codice sorgente

[stdf]Update Picker compoent, demo and documents.

dufu1991 1 anno fa
parent
commit
1830ec6337

+ 654 - 670
demo/src/routes/en_US/picker/+page.svelte

@@ -1,7 +1,7 @@
 <!-- Picker Demo -->
 <script>
 	import { Picker, Cell } from '../../../../../packages/stdf/components';
-	// In order to avoid the messy Demo page, the specific reference data is placed in the data.js file, and you can view the bottom of the page.
+	// For the sake of clarity, the specific reference data is placed in the data_en.js file, which can be viewed at the bottom of this page.
 	import {
 		someProvinceList,
 		weekList,
@@ -14,82 +14,76 @@
 	} from './data_en';
 
 	const datas = [{ data: someProvinceList }];
+
 	const col3Datas = [{ data: weekList }, { data: amOrPmList }, { data: timeList }];
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
-	let visible10 = false;
-	let visible11 = false;
-	let visible12 = false;
-	let visible13 = false;
-	let visible14 = false;
-	let visible15 = false;
-	let visible16 = false;
-	let visible17 = false;
-	let visible18 = false;
-	let visible19 = false;
-	let visible20 = false;
-	let visible21 = false;
-	let visible22 = false;
+	let visible1 = $state(false);
+	let visible2 = $state(false);
+	let visible3 = $state(false);
+	let visible4 = $state(false);
+	let visible5 = $state(false);
+	let visible6 = $state(false);
+	let visible7 = $state(false);
+	let visible8 = $state(false);
+	let visible9 = $state(false);
+	let visible10 = $state(false);
+	let visible11 = $state(false);
+	let visible12 = $state(false);
+	let visible13 = $state(false);
+	let visible14 = $state(false);
+	let visible15 = $state(false);
+	let visible16 = $state(false);
+	let visible17 = $state(false);
+	let visible18 = $state(false);
+	let visible19 = $state(false);
+	let visible20 = $state(false);
+	let visible21 = $state(false);
+	let visible22 = $state(false);
 
-	let currentDetail = 'please choose';
-	const getCurrentDetailFunc = e => {
-		currentDetail = e.detail.items[0].label;
-	};
-	let allItems = [];
-	let allIndexs = [];
-	const getAllDataFunc = e => {
-		allItems = e.detail.items;
-		allIndexs = e.detail.indexs;
-	};
+	let currentDetail = $state('Please select');
+	let allItems = $state([]);
+	let allIndexs = $state([]);
 </script>
 
 <div class="py-4">
-	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
+	<Cell title="Basic usage" onclick={() => (visible1 = true)} />
 	<Picker bind:visible={visible1} {datas} />
 
-	<Cell title="Custom title" on:click={() => (visible2 = true)} />
-	<Picker bind:visible={visible2} title="Please select province" {datas} />
+	<Cell title="Custom title" onclick={() => (visible2 = true)} />
+	<Picker bind:visible={visible2} title="Please select state" {datas} />
 
-	<Cell title="Visible line 7" on:click={() => (visible3 = true)} />
+	<Cell title="Visible 7 rows" onclick={() => (visible3 = true)} />
 	<Picker bind:visible={visible3} datas={[{ data: someProvinceList, showRow: 7 }]} />
 
-	<Cell title="Do not roll until the last selection item" on:click={() => (visible4 = true)} />
+	<Cell title="Close automatic scrolling to the last selected item" onclick={() => (visible4 = true)} />
 	<Picker bind:visible={visible4} {datas} autoScrollToLast={false} />
 
 	<Cell
-		title="The initial selection is always item 4"
-		on:click={() => (visible5 = true)}
-		subTitle="You need to disable automatic selection of the last selected item"
+		title="Initial selection is always the 4th item"
+		onclick={() => (visible5 = true)}
+		subTitle="Need to close automatic selection of the last selected item"
 	/>
 	<Picker bind:visible={visible5} datas={[{ data: someProvinceList, initIndex: 3 }]} autoScrollToLast={false} />
 
-	<Cell title="Cancel animation when auto scrolling" on:click={() => (visible6 = true)} />
+	<Cell title="Cancel animation when scrolling" onclick={() => (visible6 = true)} />
 	<Picker bind:visible={visible6} datas={[{ data: someProvinceList, useAnimation: false }]} />
 
-	<Cell title="Customize the key value of the label" on:click={() => (visible7 = true)} />
+	<Cell title="Custom label key value" onclick={() => (visible7 = true)} />
 	<Picker bind:visible={visible7} datas={[{ data: cityList, labelKey: 'cityName' }]} title="Please select city" />
 
-	<Cell title="The selected items are displayed on the right" detail={currentDetail} on:click={() => (visible8 = true)} />
-	<Picker bind:visible={visible8} {datas} on:confirm={getCurrentDetailFunc} />
+	<Cell title="Right display selected item" detail={currentDetail} onclick={() => (visible8 = true)} />
+	<Picker bind:visible={visible8} {datas} onconfirm={items => (currentDetail = items[0].label)} />
 
-	<Cell title="Single column left justified" on:click={() => (visible20 = true)} />
+	<Cell title="Single column left alignment" onclick={() => (visible20 = true)} />
 	<Picker bind:visible={visible20} datas={[{ data: someProvinceList, align: 'left' }]} />
 
-	<Cell title="Multi-column selector" on:click={() => (visible9 = true)} />
+	<Cell title="Multi-column picker" onclick={() => (visible9 = true)} />
 	<Picker bind:visible={visible9} datas={col3Datas} />
 
-	<Cell title="Number of visible rows for different columns" on:click={() => (visible10 = true)} />
+	<Cell title="Different column visibility rows" onclick={() => (visible10 = true)} />
 	<Picker bind:visible={visible10} datas={[{ data: weekList }, { data: amOrPmList, showRow: 3 }, { data: timeList, showRow: 7 }]} />
 
-	<Cell title="flex ratio for different columns" on:click={() => (visible11 = true)} />
+	<Cell title="Different column flex ratios" onclick={() => (visible11 = true)} />
 	<Picker
 		bind:visible={visible11}
 		datas={[
@@ -99,7 +93,7 @@
 		]}
 	/>
 
-	<Cell title="Multiple columns with different alignments" on:click={() => (visible21 = true)} />
+	<Cell title="Different column alignments" onclick={() => (visible21 = true)} />
 	<Picker
 		bind:visible={visible21}
 		datas={[
@@ -109,25 +103,25 @@
 		]}
 	/>
 
-	<Cell title="Multilevel linkage" on:click={() => (visible12 = true)} />
+	<Cell title="Multi-level linkage" onclick={() => (visible12 = true)} />
 	<Picker bind:visible={visible12} datas={linkageData} isLinkage />
 
-	<Cell title="Multilevel linkage has different visible lines" on:click={() => (visible13 = true)} />
+	<Cell title="Multi-level linkage different visible rows" onclick={() => (visible13 = true)} />
 	<Picker bind:visible={visible13} datas={linkageData} linkageShowRows={[3, 5, 7]} isLinkage />
 
-	<Cell title="Multistage linkage with different flex proportions" on:click={() => (visible14 = true)} />
+	<Cell title="Multi-level linkage different flex ratios" onclick={() => (visible14 = true)} />
 	<Picker bind:visible={visible14} datas={linkageData} linkageFlexs={[1, 2, 3]} isLinkage />
 
-	<Cell title="Multilevel linkage defines the key values of labels at each level" on:click={() => (visible15 = true)} />
+	<Cell title="Multi-level linkage custom label key for each level" onclick={() => (visible15 = true)} />
 	<Picker bind:visible={visible15} datas={linkagDiffLabelKeyData} linkageLabelKeys={['province', 'city', 'region']} isLinkage />
 
-	<Cell title="Multilevel linkage You can customize key values for the upper and lower children" on:click={() => (visible16 = true)} />
+	<Cell title="Multi-level linkage custom key for each level's children" onclick={() => (visible16 = true)} />
 	<Picker bind:visible={visible16} datas={linkagCustomChildrenKeyData} linkageChildrenKey="child" isLinkage />
 
-	<Cell title="Linkage different alignment modes" on:click={() => (visible22 = true)} />
+	<Cell title="Multi-level linkage different alignments" onclick={() => (visible22 = true)} />
 	<Picker bind:visible={visible22} datas={linkageData} linkageAligns={['right', 'center', 'left']} isLinkage />
 
-	<Cell title="Multilevel linkage sets the initial selection for each column" on:click={() => (visible17 = true)} />
+	<Cell title="Multi-level linkage set initial selected items for each column" onclick={() => (visible17 = true)} />
 	<Picker bind:visible={visible17} datas={linkageData} linkageInitIndexs={[0, 1, 8]} isLinkage />
 
 	<div class="px-4">
@@ -142,7 +136,7 @@
 	</div>
 	<div class="px-4">
 		{#if allIndexs.length}
-			The index values of the current selected values in the column are:
+			Currently selected value is located at the index of each column:
 			{#each allIndexs as index}
 				<span class="mr-2 text-primary dark:text-dark">{index}</span>
 			{/each}
@@ -150,638 +144,628 @@
 			<div>Please select data</div>
 		{/if}
 	</div>
-	<Cell title="Get selected data" on:click={() => (visible18 = true)} />
-	<Picker bind:visible={visible18} datas={col3Datas} on:confirm={getAllDataFunc} />
+	<Cell title="Get selected data" onclick={() => (visible18 = true)} />
+	<Picker
+		bind:visible={visible18}
+		datas={col3Datas}
+		onconfirm={(items, indexs) => {
+			allItems = items;
+			allIndexs = indexs;
+		}}
+	/>
 
-	<Cell title="I want some rounded corners on the top" on:click={() => (visible19 = true)} />
+	<Cell title="Top corner rounded" onclick={() => (visible19 = true)} />
 	<Picker bind:visible={visible19} {datas} popup={{ radius: 'xl' }} />
 </div>
 
-<!-- data.js -->
+<!-- data_en.js -->
 <!-- 
 const someProvinceList = [
-    { label: 'Yunnan' },
-    { label: 'Beijing' },
-    { label: 'Guangdong' },
-    { label: 'Chongqing' },
-    { label: 'Sichuan' },
-    { label: 'Hubei' },
-    { label: 'Henan' },
-    { label: 'Hunan' },
-    { label: 'Shandong' },
-    { label: 'Jiangsu' },
-    { label: 'Zhejiang' },
-    { label: 'Jiangxi' },
-    { label: 'Anhui' },
-    { label: 'Fujian' },
+	{ label: 'California' },
+	{ label: 'New York' },
+	{ label: 'Texas' },
+	{ label: 'Florida' },
+	{ label: 'Illinois' },
+	{ label: 'Pennsylvania' },
+	{ label: 'Ohio' },
+	{ label: 'Michigan' },
+	{ label: 'Georgia' },
+	{ label: 'Virginia' },
+	{ label: 'Washington' },
+	{ label: 'Arizona' },
+	{ label: 'Massachusetts' },
+	{ label: 'Tennessee' },
 ];
 const weekList = [
-    { label: 'Monday' },
-    { label: 'Tuesday' },
-    { label: 'Wednesday' },
-    { label: 'Thursday' },
-    { label: 'Friday' },
-    { label: 'Saturday' },
-    { label: 'Sunday' },
+	{ label: 'Monday' },
+	{ label: 'Tuesday' },
+	{ label: 'Wednesday' },
+	{ label: 'Thursday' },
+	{ label: 'Friday' },
+	{ label: 'Saturday' },
+	{ label: 'Sunday' },
 ];
 const amOrPmList = [{ label: 'AM' }, { label: 'PM' }];
 const timeList = [
-    { label: '01:00' },
-    { label: '02:00' },
-    { label: '03:00' },
-    { label: '04:00' },
-    { label: '05:00' },
-    { label: '06:00' },
-    { label: '07:00' },
-    { label: '08:00' },
-    { label: '09:00' },
-    { label: '10:00' },
-    { label: '11:00' },
-    { label: '12:00' },
+	{ label: '01:00' },
+	{ label: '02:00' },
+	{ label: '03:00' },
+	{ label: '04:00' },
+	{ label: '05:00' },
+	{ label: '06:00' },
+	{ label: '07:00' },
+	{ label: '08:00' },
+	{ label: '09:00' },
+	{ label: '10:00' },
+	{ label: '11:00' },
+	{ label: '12:00' },
 ];
 const cityList = [
-    { cityName: 'kunming' },
-    { cityName: 'qujing' },
-    { cityName: 'yuxi' },
-    { cityName: 'baoshan' },
-    { cityName: 'zhaotong' },
-    { cityName: 'lijiang' },
-    { cityName: 'puer' },
-    { cityName: 'lincang' },
-    { cityName: 'chuxiong' },
-    { cityName: 'honghe' },
-    { cityName: 'wenshan' },
+	{ cityName: 'losangeles' },
+	{ cityName: 'sandiego' },
+	{ cityName: 'sanfrancisco' },
+	{ cityName: 'sacramento' },
+	{ cityName: 'fresno' },
+	{ cityName: 'oakland' },
+	{ cityName: 'sanjose' },
+	{ cityName: 'bakersfield' },
+	{ cityName: 'anaheim' },
+	{ cityName: 'riverside' },
+	{ cityName: 'stockton' },
 ];
 const linkageData = [
-    {
-        label: 'Yunnan',
-        children: [
-            {
-                label: 'Kunming',
-                children: [
-                    { label: 'Panlong District' },
-                    { label: 'Wuhua District' },
-                    { label: 'Guandu District' },
-                    { label: 'Xishan District' },
-                    { label: 'Dongchuan District' },
-                ],
-            },
-            {
-                label: 'Qujing',
-                children: [
-                    { label: 'Qilin District' },
-                    { label: 'Zhanyi District' },
-                    { label: 'Malong County' },
-                    { label: 'Luliang County' },
-                    { label: 'Shizong County' },
-                    { label: 'Luoping County' },
-                ],
-            },
-            {
-                label: 'Yuxi',
-                children: [
-                    { label: 'Hongta District' },
-                    { label: 'Jiangchuan District' },
-                    { label: 'Chengjiang County' },
-                    { label: 'Tonghai County' },
-                    { label: 'Huaning County' },
-                ],
-            },
-            {
-                label: 'Baoshan',
-                children: [
-                    { label: 'Longyang District' },
-                    { label: 'Shidian County' },
-                    { label: 'Longling County' },
-                    { label: 'Changning County' },
-                    { label: 'Tengchong City' },
-                    { label: 'Longling County' },
-                ],
-            },
-            {
-                label: 'Lijiang',
-                children: [{ label: 'Gucheng District' }, { label: 'Yongsheng County' }, { label: 'Huaping County' }],
-            },
-            {
-                label: "Pu'er",
-                children: [
-                    { label: 'Simao District' },
-                    { label: "Ning'er Hani and Yi Autonomous County" },
-                    { label: 'Mojiang Hani Autonomous County' },
-                    { label: 'Jingdong Yi Autonomous County' },
-                    { label: 'Jinggu Dai and Yi Autonomous County' },
-                ],
-            },
-            {
-                label: 'Lincang',
-                children: [
-                    { label: 'Linxia District' },
-                    { label: 'Fengqing County' },
-                    { label: 'Yun County' },
-                    { label: 'Yongde County' },
-                    { label: 'Zhenkang County' },
-                ],
-            },
-            {
-                label: 'Chuxiong',
-                children: [
-                    { label: 'Chuxiong City' },
-                    { label: 'Shuangbai County' },
-                    { label: 'Mouding County' },
-                    { label: 'Nanhua County' },
-                    { label: "Yao'an County" },
-                    { label: 'Dayao County' },
-                ],
-            },
-            {
-                label: 'Honghe',
-                children: [
-                    { label: 'Gejiu City' },
-                    { label: 'Kaiyuan City' },
-                    { label: 'Mengzi City' },
-                    { label: 'Mile City' },
-                    { label: 'Pingbian Miao Autonomous County' },
-                ],
-            },
-            {
-                label: 'Wenshan',
-                children: [
-                    { label: 'Wenshan City' },
-                    { label: 'Yanshan County' },
-                    { label: 'Xichou County' },
-                    { label: 'Malipo County' },
-                    { label: 'Maguan County' },
-                    { label: 'Qiubei County' },
-                    { label: 'Guangnan County' },
-                    { label: 'Funing County' },
-                ],
-            },
-        ],
-    },
-    {
-        label: 'Guangdong',
-        children: [
-            {
-                label: 'Guangzhou',
-                children: [
-                    { label: 'Tianhe District' },
-                    { label: 'Haizhu District' },
-                    { label: 'Liwan District' },
-                    { label: 'Yuexiu District' },
-                    { label: 'Baiyun District' },
-                    { label: 'Huangpu District' },
-                ],
-            },
-            {
-                label: 'Shenzhen',
-                children: [
-                    { label: 'Luohu District' },
-                    { label: 'Futian District' },
-                    { label: 'Nanshan District' },
-                    { label: "Bao'an District" },
-                    { label: 'Longgang District' },
-                    { label: 'Yantian District' },
-                ],
-            },
-            {
-                label: 'Zhuhai',
-                children: [{ label: 'Xiangzhou District' }, { label: 'Doumen District' }, { label: 'Jinwan District' }],
-            },
-            {
-                label: 'Shantou',
-                children: [
-                    { label: 'Longhu District' },
-                    { label: 'Jinping District' },
-                    { label: 'Haojiang District' },
-                    { label: 'Chaoyang District' },
-                    { label: "Chao'an District" },
-                    { label: 'Chenghai District' },
-                ],
-            },
-            {
-                label: 'Foshan',
-                children: [
-                    { label: 'Chancheng District' },
-                    { label: 'Nanhai District' },
-                    { label: 'Shunde District' },
-                    { label: 'Sanshui District' },
-                    { label: 'Gaoming District' },
-                ],
-            },
-        ],
-    },
-    {
-        label: 'Sichuan',
-        children: [
-            {
-                label: 'Chengdu',
-                children: [
-                    { label: 'Jinjiang District' },
-                    { label: 'Qingyang District' },
-                    { label: 'Jinniu District' },
-                    { label: 'Wuhou District' },
-                    { label: 'Chenghua District' },
-                    { label: 'Longquanyi District' },
-                ],
-            },
-            {
-                label: 'Mianyang',
-                children: [
-                    { label: 'Fucheng District' },
-                    { label: 'Youxian District' },
-                    { label: 'Anzhou District' },
-                    { label: 'Santai County' },
-                    { label: 'Yanting County' },
-                    { label: 'Zitong County' },
-                ],
-            },
-            {
-                label: 'Zigong',
-                children: [
-                    { label: 'Ziliujing District' },
-                    { label: 'Gongjing District' },
-                    { label: "Da'an District" },
-                    { label: 'Yantan District' },
-                    { label: 'Rong County' },
-                    { label: 'Fushun County' },
-                ],
-            },
-            {
-                label: 'Panzhihua',
-                children: [
-                    { label: 'Dong District' },
-                    { label: 'Xi District' },
-                    { label: 'Renhe District' },
-                    { label: 'Miyi County' },
-                    { label: 'Yanbian County' },
-                ],
-            },
-        ],
-    },
-    {
-        label: 'Beijing',
-        children: [
-            {
-                label: 'Beijing City',
-                children: [
-                    { label: 'Dongcheng District' },
-                    { label: 'Xicheng District' },
-                    { label: 'Chaoyang District' },
-                    { label: 'Fengtai District' },
-                    { label: 'Shijingshan District' },
-                    { label: 'Haidian District' },
-                ],
-            },
-        ],
-    },
-    {
-        label: 'Zhejiang',
-        children: [
-            {
-                label: 'Hangzhou',
-                children: [
-                    { label: 'Shangcheng District' },
-                    { label: 'Xiacheng District' },
-                    { label: 'Jianggan District' },
-                    { label: 'Gongshu District' },
-                    { label: 'Xihu District' },
-                    { label: 'Binjiang District' },
-                ],
-            },
-            {
-                label: 'Ningbo',
-                children: [
-                    { label: 'Haishu District' },
-                    { label: 'Jiangdong District' },
-                    { label: 'Jiangbei District' },
-                    { label: 'Beilun District' },
-                    { label: 'Zhenhai District' },
-                    { label: 'Yinzhou District' },
-                ],
-            },
-            {
-                label: 'Wenzhou',
-                children: [
-                    { label: 'Lucheng District' },
-                    { label: 'Longwan District' },
-                    { label: 'Ouhai District' },
-                    { label: 'Dongtou District' },
-                    { label: 'Yongjia County' },
-                    { label: 'Pingyang County' },
-                ],
-            },
-            {
-                label: 'Jiaxing',
-                children: [
-                    { label: 'Nanhu District' },
-                    { label: 'Xiuzhou District' },
-                    { label: 'Jiashan County' },
-                    { label: 'Haiyan County' },
-                    { label: 'Haining City' },
-                    { label: 'Pinghu City' },
-                ],
-            },
-            {
-                label: 'Huzhou',
-                children: [
-                    { label: 'Wuxing District' },
-                    { label: 'Nanxun District' },
-                    { label: 'Deqing County' },
-                    { label: 'Changxing County' },
-                    { label: 'Anji County' },
-                ],
-            },
-        ],
-    },
+	{
+		label: 'California',
+		children: [
+			{
+				label: 'Los Angeles',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'Hollywood' },
+					{ label: 'Beverly Hills' },
+					{ label: 'Santa Monica' },
+					{ label: 'Pasadena' },
+				],
+			},
+			{
+				label: 'San Francisco',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'Mission District' },
+					{ label: 'North Beach' },
+					{ label: 'Chinatown' },
+					{ label: 'Haight-Ashbury' },
+					{ label: 'Castro' },
+				],
+			},
+			{
+				label: 'San Diego',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'La Jolla' },
+					{ label: 'Pacific Beach' },
+					{ label: 'Mission Beach' },
+					{ label: 'Coronado' },
+				],
+			},
+			{
+				label: 'Sacramento',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'Midtown' },
+					{ label: 'East Sacramento' },
+					{ label: 'Land Park' },
+					{ label: 'Natomas' },
+					{ label: 'Arden-Arcade' },
+				],
+			},
+			{
+				label: 'Oakland',
+				children: [{ label: 'Downtown' }, { label: 'Lake Merritt' }, { label: 'Rockridge' }],
+			},
+			{
+				label: 'San Jose',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'Willow Glen' },
+					{ label: 'Almaden Valley' },
+					{ label: 'Berryessa' },
+					{ label: 'Evergreen' },
+				],
+			},
+			{
+				label: 'Fresno',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'Tower District' },
+					{ label: 'River Park' },
+					{ label: 'Fig Garden' },
+					{ label: 'Woodward Park' },
+				],
+			},
+			{
+				label: 'Long Beach',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'Belmont Shore' },
+					{ label: 'Bixby Knolls' },
+					{ label: 'Naples' },
+					{ label: 'Alamitos Beach' },
+					{ label: 'Rose Park' },
+				],
+			},
+			{
+				label: 'Bakersfield',
+				children: [{ label: 'Downtown' }, { label: 'Rosedale' }, { label: 'Oildale' }, { label: 'Seven Oaks' }, { label: 'Stockdale' }],
+			},
+			{
+				label: 'Anaheim',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'Anaheim Hills' },
+					{ label: 'The Colony' },
+					{ label: 'The Platinum Triangle' },
+					{ label: 'West Anaheim' },
+					{ label: 'East Anaheim' },
+					{ label: 'South Anaheim' },
+					{ label: 'Resort District' },
+				],
+			},
+		],
+	},
+	{
+		label: 'Texas',
+		children: [
+			{
+				label: 'Houston',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'Midtown' },
+					{ label: 'Heights' },
+					{ label: 'River Oaks' },
+					{ label: 'Memorial' },
+					{ label: 'Medical Center' },
+				],
+			},
+			{
+				label: 'Dallas',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'Uptown' },
+					{ label: 'Deep Ellum' },
+					{ label: 'Oak Lawn' },
+					{ label: 'Bishop Arts' },
+					{ label: 'Knox Henderson' },
+				],
+			},
+			{
+				label: 'Austin',
+				children: [{ label: 'Downtown' }, { label: 'South Congress' }, { label: 'East Austin' }],
+			},
+			{
+				label: 'San Antonio',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'Alamo Heights' },
+					{ label: 'Pearl District' },
+					{ label: 'King William' },
+					{ label: 'Stone Oak' },
+				],
+			},
+		],
+	},
+	{
+		label: 'Illinois',
+		children: [
+			{
+				label: 'Chicago',
+				children: [
+					{ label: 'Loop' },
+					{ label: 'River North' },
+					{ label: 'Lincoln Park' },
+					{ label: 'Wicker Park' },
+					{ label: 'Gold Coast' },
+					{ label: 'Lakeview' },
+				],
+			},
+			{
+				label: 'Springfield',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'West Side' },
+					{ label: 'East Side' },
+					{ label: 'North End' },
+					{ label: 'South Side' },
+					{ label: 'Jerome' },
+				],
+			},
+			{
+				label: 'Rockford',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'East Side' },
+					{ label: 'North End' },
+					{ label: 'Rural Oaks' },
+					{ label: 'Churchill Grove' },
+					{ label: 'Signal Hill' },
+				],
+			},
+			{
+				label: 'Peoria',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'West Bluff' },
+					{ label: 'East Bluff' },
+					{ label: 'North Valley' },
+					{ label: 'South Side' },
+				],
+			},
+		],
+	},
+	{
+		label: 'New York',
+		children: [
+			{
+				label: 'New York City',
+				children: [
+					{ label: 'Manhattan' },
+					{ label: 'Brooklyn' },
+					{ label: 'Queens' },
+					{ label: 'The Bronx' },
+					{ label: 'Staten Island' },
+					{ label: 'Harlem' },
+				],
+			},
+		],
+	},
+	{
+		label: 'Washington',
+		children: [
+			{
+				label: 'Seattle',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'Capitol Hill' },
+					{ label: 'Ballard' },
+					{ label: 'Fremont' },
+					{ label: 'Queen Anne' },
+					{ label: 'South Lake Union' },
+				],
+			},
+			{
+				label: 'Spokane',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'South Hill' },
+					{ label: 'North Side' },
+					{ label: 'West Central' },
+					{ label: 'East Central' },
+					{ label: 'Riverside' },
+				],
+			},
+			{
+				label: 'Tacoma',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'North End' },
+					{ label: 'South End' },
+					{ label: 'East Side' },
+					{ label: 'West End' },
+					{ label: 'Central' },
+				],
+			},
+			{
+				label: 'Vancouver',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'Uptown' },
+					{ label: 'Hazel Dell' },
+					{ label: 'Salmon Creek' },
+					{ label: "Fisher's Landing" },
+					{ label: 'Cascade Park' },
+				],
+			},
+			{
+				label: 'Bellevue',
+				children: [
+					{ label: 'Downtown' },
+					{ label: 'West Bellevue' },
+					{ label: 'Crossroads' },
+					{ label: 'Eastgate' },
+					{ label: 'Factoria' },
+				],
+			},
+		],
+	},
 ];
 const linkagDiffLabelKeyData = [
-    {
-        province: 'Yunnan',
-        children: [
-            {
-                city: 'Kunming',
-                children: [
-                    { region: 'Panlong Qu' },
-                    { region: 'Wuhua Qu' },
-                    { region: 'Guandu Qu' },
-                    { region: 'Xishan Qu' },
-                    { region: 'Dongchuan Qu' },
-                    { region: 'Chenggong Qu' },
-                    { region: 'Jinning Qu' },
-                ],
-            },
-            {
-                city: 'Qujing',
-                children: [
-                    { region: 'Qilin Qu' },
-                    { region: 'Zhanyi Qu' },
-                    { region: 'Malong Xian' },
-                    { region: 'Luliang Xian' },
-                    { region: 'Shizong Xian' },
-                    { region: 'Luoping Xian' },
-                ],
-            },
-            {
-                city: 'Yuxi',
-                children: [
-                    { region: 'Hongta Qu' },
-                    { region: 'Jiangchuan Qu' },
-                    { region: 'Chengjiang Xian' },
-                    { region: 'Tonghai Xian' },
-                    { region: 'Huaning Xian' },
-                    { region: 'Yimen Xian' },
-                ],
-            },
-        ],
-    },
-    {
-        province: 'Guizhou',
-        children: [
-            {
-                city: 'Guiyang',
-                children: [
-                    { region: 'Nanming Qu' },
-                    { region: 'Yunyan Qu' },
-                    { region: 'Huaxi Qu' },
-                    { region: 'Wudang Qu' },
-                    { region: 'Baiyun Qu' },
-                    { region: 'Guanshanhu Qu' },
-                ],
-            },
-            {
-                city: 'Zunyi',
-                children: [
-                    { region: 'Honghuagang Qu' },
-                    { region: 'Huichuan Qu' },
-                    { region: 'Bozhou Qu' },
-                    { region: 'Tongzi Xian' },
-                    { region: 'Suiyang Xian' },
-                    { region: 'Zhengan Xian' },
-                ],
-            },
-            {
-                city: 'Liupanshui',
-                children: [
-                    { region: 'Zhongshan Qu' },
-                    { region: 'Liuzhi Special District' },
-                    { region: 'Shuicheng Xian' },
-                    { region: 'Pan Xian' },
-                ],
-            },
-        ],
-    },
-    {
-        province: 'Sichuan',
-        children: [
-            {
-                city: 'Chengdu',
-                children: [
-                    { region: 'Jinjiang Qu' },
-                    { region: 'Qingyang Qu' },
-                    { region: 'Jinniu Qu' },
-                    { region: 'Wuhou Qu' },
-                    { region: 'Chenghua Qu' },
-                    { region: 'Longquanyi Qu' },
-                ],
-            },
-            {
-                city: 'Mianyang',
-                children: [
-                    { region: 'Fucheng Qu' },
-                    { region: 'Youxian Qu' },
-                    { region: 'Anzhou Qu' },
-                    { region: 'Santai Xian' },
-                    { region: 'Yanling Xian' },
-                    { region: 'Zitong Xian' },
-                ],
-            },
-            {
-                city: 'Panzhihua',
-                children: [
-                    { region: 'Dongqu' },
-                    { region: 'Xiqu' },
-                    { region: 'Renhe Qu' },
-                    { region: 'Miyi Xian' },
-                    { region: 'Yanbian Xian' },
-                ],
-            },
-        ],
-    },
-    {
-        province: 'Beijing',
-        children: [
-            {
-                city: 'Beijing',
-                children: [
-                    { region: 'Dongcheng Qu' },
-                    { region: 'Xicheng Qu' },
-                    { region: 'Chaoyang Qu' },
-                    { region: 'Fengtai Qu' },
-                    { region: 'Shijingshan Qu' },
-                    { region: 'Haidian Qu' },
-                ],
-            },
-        ],
-    },
+	{
+		province: 'California',
+		children: [
+			{
+				city: 'Los Angeles',
+				children: [
+					{ region: 'Downtown' },
+					{ region: 'Hollywood' },
+					{ region: 'Beverly Hills' },
+					{ region: 'Santa Monica' },
+					{ region: 'Pasadena' },
+					{ region: 'Venice Beach' },
+					{ region: 'Westwood' },
+				],
+			},
+			{
+				city: 'San Francisco',
+				children: [
+					{ region: 'Downtown' },
+					{ region: 'Mission District' },
+					{ region: 'North Beach' },
+					{ region: 'Chinatown' },
+					{ region: 'Haight-Ashbury' },
+					{ region: 'Castro' },
+				],
+			},
+			{
+				city: 'San Diego',
+				children: [
+					{ region: 'Downtown' },
+					{ region: 'La Jolla' },
+					{ region: 'Pacific Beach' },
+					{ region: 'Mission Beach' },
+					{ region: 'Coronado' },
+					{ region: 'North Park' },
+				],
+			},
+		],
+	},
+	{
+		province: 'Florida',
+		children: [
+			{
+				city: 'Miami',
+				children: [
+					{ region: 'Downtown' },
+					{ region: 'South Beach' },
+					{ region: 'Brickell' },
+					{ region: 'Coconut Grove' },
+					{ region: 'Little Havana' },
+					{ region: 'Coral Gables' },
+				],
+			},
+			{
+				city: 'Orlando',
+				children: [
+					{ region: 'Downtown' },
+					{ region: 'Winter Park' },
+					{ region: 'Lake Nona' },
+					{ region: 'College Park' },
+					{ region: 'Baldwin Park' },
+					{ region: 'Mills 50' },
+				],
+			},
+			{
+				city: 'Tampa',
+				children: [{ region: 'Downtown' }, { region: 'Hyde Park' }, { region: 'Ybor City' }, { region: 'Channelside' }],
+			},
+		],
+	},
+	{
+		province: 'Illinois',
+		children: [
+			{
+				city: 'Chicago',
+				children: [
+					{ region: 'Loop' },
+					{ region: 'River North' },
+					{ region: 'Lincoln Park' },
+					{ region: 'Wicker Park' },
+					{ region: 'Gold Coast' },
+					{ region: 'Lakeview' },
+				],
+			},
+			{
+				city: 'Springfield',
+				children: [
+					{ region: 'Downtown' },
+					{ region: 'West Side' },
+					{ region: 'East Side' },
+					{ region: 'North End' },
+					{ region: 'South Side' },
+					{ region: 'Jerome' },
+				],
+			},
+			{
+				city: 'Peoria',
+				children: [
+					{ region: 'Downtown' },
+					{ region: 'West Bluff' },
+					{ region: 'East Bluff' },
+					{ region: 'North Valley' },
+					{ region: 'South Side' },
+				],
+			},
+		],
+	},
+	{
+		province: 'New York',
+		children: [
+			{
+				city: 'New York City',
+				children: [
+					{ region: 'Manhattan' },
+					{ region: 'Brooklyn' },
+					{ region: 'Queens' },
+					{ region: 'The Bronx' },
+					{ region: 'Staten Island' },
+					{ region: 'Harlem' },
+				],
+			},
+		],
+	},
 ];
 const linkagCustomChildrenKeyData = [
-    {
-        label: 'YunNan',
-        child: [
-            {
-                label: 'KunMing',
-                child: [
-                    { label: 'PanLongQu' },
-                    { label: 'WuHuaQu' },
-                    { label: 'GuanDuQu' },
-                    { label: 'XiShanQu' },
-                    { label: 'DongChuanQu' },
-                    { label: 'ChengGongQu' },
-                    { label: 'JinNingQu' },
-                ],
-            },
-            {
-                label: 'QuJing',
-                child: [
-                    { label: 'QiLinQu' },
-                    { label: 'ZhanYiQu' },
-                    { label: 'MaLongXian' },
-                    { label: 'LuLiangXian' },
-                    { label: 'ShiZongXian' },
-                    { label: 'LuoPingXian' },
-                ],
-            },
-            {
-                label: 'YuXi',
-                child: [
-                    { label: 'HongTaQu' },
-                    { label: 'JiangChuanQu' },
-                    { label: 'ChengJiangXian' },
-                    { label: 'TongHaiXian' },
-                    { label: 'HuaNingXian' },
-                    { label: 'YiMenXian' },
-                ],
-            },
-        ],
-    },
-    {
-        label: 'GuiZhou',
-        child: [
-            {
-                label: 'GuiYang',
-                child: [
-                    { label: 'NanMingQu' },
-                    { label: 'YunYanQu' },
-                    { label: 'HuaXiQu' },
-                    { label: 'WuDangQu' },
-                    { label: 'BaiYunQu' },
-                    { label: 'GuanShanHuQu' },
-                ],
-            },
-            {
-                label: 'ZunYi',
-                child: [
-                    { label: 'HongHuaGangQu' },
-                    { label: 'HuiChuanQu' },
-                    { label: 'BoZhouQu' },
-                    { label: 'TongZiXian' },
-                    { label: 'SuiYangXian' },
-                    { label: 'ZhengAnXian' },
-                ],
-            },
-            {
-                label: 'LiuPanShui',
-                child: [{ label: 'ZhongShanQu' }, { label: 'LiuZhiTeQu' }, { label: 'ShuiChengXian' }, { label: 'PanXian' }],
-            },
-        ],
-    },
-    {
-        label: 'SiChuan',
-        child: [
-            {
-                label: 'ChengDu',
-                child: [
-                    { label: 'JinJiangQu' },
-                    { label: 'QingYangQu' },
-                    { label: 'JinNiuQu' },
-                    { label: 'WuHouQu' },
-                    { label: 'ChengHuaQu' },
-                    { label: 'LongQuanYiQu' },
-                ],
-            },
-            {
-                label: 'MianYang',
-                child: [
-                    { label: 'FuChengQu' },
-                    { label: 'YouXianQu' },
-                    { label: 'AnZhouQu' },
-                    { label: 'SanTaiXian' },
-                    { label: 'YanTingXian' },
-                    { label: 'ZiTongXian' },
-                ],
-            },
-            {
-                label: 'PanZhiHua',
-                child: [{ label: 'DongQu' }, { label: 'XiQu' }, { label: 'RenHeQu' }, { label: 'MiYiXian' }, { label: 'YanBianXian' }],
-            },
-        ],
-    },
-    {
-        label: 'BeiJing',
-        child: [
-            {
-                label: 'BeiJing',
-                child: [
-                    { label: 'DongChengQu' },
-                    { label: 'XiChengQu' },
-                    { label: 'ChaoYangQu' },
-                    { label: 'FengTaiQu' },
-                    { label: 'ShiJingShanQu' },
-                    { label: 'HaiDianQu' },
-                ],
-            },
-        ],
-    },
-    {
-        label: 'ZheJiang',
-        child: [
-            {
-                label: 'HangZhou',
-                child: [
-                    { label: 'XiHuQu' },
-                    { label: 'ShangChengQu' },
-                    { label: 'XiaChengQu' },
-                    { label: 'JiangGanQu' },
-                    { label: 'GongShuQu' },
-                    { label: 'BinJiangQu' },
-                ],
-            },
-            {
-                label: 'NingBo',
-                child: [
-                    { label: 'HaiShuQu' },
-                    { label: 'JiangDongQu' },
-                    { label: 'JiangBeiQu' },
-                    { label: 'BeiLunQu' },
-                    { label: 'ZhenHaiQu' },
-                    { label: 'YinZhouQu' },
-                ],
-            },
-            {
-                label: 'WenZhou',
-                child: [
-                    { label: 'LuChengQu' },
-                    { label: 'LongWanQu' },
-                    { label: 'OuHaiQu' },
-                    { label: 'DongTouQu' },
-                    { label: 'YongJiaXian' },
-                    { label: 'PingYangXian' },
-                ],
-            },
-        ],
-    },
+	{
+		label: 'California',
+		child: [
+			{
+				label: 'Los Angeles',
+				child: [
+					{ label: 'Downtown' },
+					{ label: 'Hollywood' },
+					{ label: 'Beverly Hills' },
+					{ label: 'Santa Monica' },
+					{ label: 'Pasadena' },
+					{ label: 'Venice Beach' },
+					{ label: 'Westwood' },
+				],
+			},
+			{
+				label: 'San Francisco',
+				child: [
+					{ label: 'Downtown' },
+					{ label: 'Mission District' },
+					{ label: 'North Beach' },
+					{ label: 'Chinatown' },
+					{ label: 'Haight-Ashbury' },
+					{ label: 'Castro' },
+				],
+			},
+			{
+				label: 'San Diego',
+				child: [
+					{ label: 'Downtown' },
+					{ label: 'La Jolla' },
+					{ label: 'Pacific Beach' },
+					{ label: 'Mission Beach' },
+					{ label: 'Coronado' },
+					{ label: 'North Park' },
+				],
+			},
+		],
+	},
+	{
+		label: 'Florida',
+		child: [
+			{
+				label: 'Miami',
+				child: [
+					{ label: 'Downtown' },
+					{ label: 'South Beach' },
+					{ label: 'Brickell' },
+					{ label: 'Coconut Grove' },
+					{ label: 'Little Havana' },
+					{ label: 'Coral Gables' },
+				],
+			},
+			{
+				label: 'Orlando',
+				child: [
+					{ label: 'Downtown' },
+					{ label: 'Winter Park' },
+					{ label: 'Lake Nona' },
+					{ label: 'College Park' },
+					{ label: 'Baldwin Park' },
+					{ label: 'Mills 50' },
+				],
+			},
+			{
+				label: 'Tampa',
+				child: [{ label: 'Downtown' }, { label: 'Hyde Park' }, { label: 'Ybor City' }, { label: 'Channelside' }],
+			},
+		],
+	},
+	{
+		label: 'Illinois',
+		child: [
+			{
+				label: 'Chicago',
+				child: [
+					{ label: 'Loop' },
+					{ label: 'River North' },
+					{ label: 'Lincoln Park' },
+					{ label: 'Wicker Park' },
+					{ label: 'Gold Coast' },
+					{ label: 'Lakeview' },
+				],
+			},
+			{
+				label: 'Springfield',
+				child: [
+					{ label: 'Downtown' },
+					{ label: 'West Side' },
+					{ label: 'East Side' },
+					{ label: 'North End' },
+					{ label: 'South Side' },
+					{ label: 'Jerome' },
+				],
+			},
+			{
+				label: 'Peoria',
+				child: [
+					{ label: 'Downtown' },
+					{ label: 'West Bluff' },
+					{ label: 'East Bluff' },
+					{ label: 'North Valley' },
+					{ label: 'South Side' },
+				],
+			},
+		],
+	},
+	{
+		label: 'New York',
+		child: [
+			{
+				label: 'New York City',
+				child: [
+					{ label: 'Manhattan' },
+					{ label: 'Brooklyn' },
+					{ label: 'Queens' },
+					{ label: 'The Bronx' },
+					{ label: 'Staten Island' },
+					{ label: 'Harlem' },
+				],
+			},
+		],
+	},
+	{
+		label: 'Washington',
+		child: [
+			{
+				label: 'Seattle',
+				child: [
+					{ label: 'Downtown' },
+					{ label: 'Capitol Hill' },
+					{ label: 'Ballard' },
+					{ label: 'Fremont' },
+					{ label: 'Queen Anne' },
+					{ label: 'South Lake Union' },
+				],
+			},
+			{
+				label: 'Spokane',
+				child: [
+					{ label: 'Downtown' },
+					{ label: 'South Hill' },
+					{ label: 'North Side' },
+					{ label: 'West Central' },
+					{ label: 'East Central' },
+					{ label: 'Riverside' },
+				],
+			},
+			{
+				label: 'Tacoma',
+				child: [
+					{ label: 'Downtown' },
+					{ label: 'North End' },
+					{ label: 'South End' },
+					{ label: 'East Side' },
+					{ label: 'West End' },
+					{ label: 'Central' },
+				],
+			},
+		],
+	},
 ];
 
 export { someProvinceList, weekList, amOrPmList, timeList, cityList, linkageData, linkagDiffLabelKeyData, linkagCustomChildrenKeyData };
-
 -->

+ 342 - 347
demo/src/routes/en_US/picker/data_en.js

@@ -1,18 +1,18 @@
 const someProvinceList = [
-	{ label: 'Yunnan' },
-	{ label: 'Beijing' },
-	{ label: 'Guangdong' },
-	{ label: 'Chongqing' },
-	{ label: 'Sichuan' },
-	{ label: 'Hubei' },
-	{ label: 'Henan' },
-	{ label: 'Hunan' },
-	{ label: 'Shandong' },
-	{ label: 'Jiangsu' },
-	{ label: 'Zhejiang' },
-	{ label: 'Jiangxi' },
-	{ label: 'Anhui' },
-	{ label: 'Fujian' },
+	{ label: 'California' },
+	{ label: 'New York' },
+	{ label: 'Texas' },
+	{ label: 'Florida' },
+	{ label: 'Illinois' },
+	{ label: 'Pennsylvania' },
+	{ label: 'Ohio' },
+	{ label: 'Michigan' },
+	{ label: 'Georgia' },
+	{ label: 'Virginia' },
+	{ label: 'Washington' },
+	{ label: 'Arizona' },
+	{ label: 'Massachusetts' },
+	{ label: 'Tennessee' },
 ];
 const weekList = [
 	{ label: 'Monday' },
@@ -39,295 +39,278 @@ const timeList = [
 	{ label: '12:00' },
 ];
 const cityList = [
-	{ cityName: 'kunming' },
-	{ cityName: 'qujing' },
-	{ cityName: 'yuxi' },
-	{ cityName: 'baoshan' },
-	{ cityName: 'zhaotong' },
-	{ cityName: 'lijiang' },
-	{ cityName: 'puer' },
-	{ cityName: 'lincang' },
-	{ cityName: 'chuxiong' },
-	{ cityName: 'honghe' },
-	{ cityName: 'wenshan' },
+	{ cityName: 'losangeles' },
+	{ cityName: 'sandiego' },
+	{ cityName: 'sanfrancisco' },
+	{ cityName: 'sacramento' },
+	{ cityName: 'fresno' },
+	{ cityName: 'oakland' },
+	{ cityName: 'sanjose' },
+	{ cityName: 'bakersfield' },
+	{ cityName: 'anaheim' },
+	{ cityName: 'riverside' },
+	{ cityName: 'stockton' },
 ];
 const linkageData = [
 	{
-		label: 'Yunnan',
+		label: 'California',
 		children: [
 			{
-				label: 'Kunming',
+				label: 'Los Angeles',
 				children: [
-					{ label: 'Panlong District' },
-					{ label: 'Wuhua District' },
-					{ label: 'Guandu District' },
-					{ label: 'Xishan District' },
-					{ label: 'Dongchuan District' },
+					{ label: 'Downtown' },
+					{ label: 'Hollywood' },
+					{ label: 'Beverly Hills' },
+					{ label: 'Santa Monica' },
+					{ label: 'Pasadena' },
 				],
 			},
 			{
-				label: 'Qujing',
+				label: 'San Francisco',
 				children: [
-					{ label: 'Qilin District' },
-					{ label: 'Zhanyi District' },
-					{ label: 'Malong County' },
-					{ label: 'Luliang County' },
-					{ label: 'Shizong County' },
-					{ label: 'Luoping County' },
+					{ label: 'Downtown' },
+					{ label: 'Mission District' },
+					{ label: 'North Beach' },
+					{ label: 'Chinatown' },
+					{ label: 'Haight-Ashbury' },
+					{ label: 'Castro' },
 				],
 			},
 			{
-				label: 'Yuxi',
+				label: 'San Diego',
 				children: [
-					{ label: 'Hongta District' },
-					{ label: 'Jiangchuan District' },
-					{ label: 'Chengjiang County' },
-					{ label: 'Tonghai County' },
-					{ label: 'Huaning County' },
+					{ label: 'Downtown' },
+					{ label: 'La Jolla' },
+					{ label: 'Pacific Beach' },
+					{ label: 'Mission Beach' },
+					{ label: 'Coronado' },
 				],
 			},
 			{
-				label: 'Baoshan',
+				label: 'Sacramento',
 				children: [
-					{ label: 'Longyang District' },
-					{ label: 'Shidian County' },
-					{ label: 'Longling County' },
-					{ label: 'Changning County' },
-					{ label: 'Tengchong City' },
-					{ label: 'Longling County' },
+					{ label: 'Downtown' },
+					{ label: 'Midtown' },
+					{ label: 'East Sacramento' },
+					{ label: 'Land Park' },
+					{ label: 'Natomas' },
+					{ label: 'Arden-Arcade' },
 				],
 			},
 			{
-				label: 'Lijiang',
-				children: [{ label: 'Gucheng District' }, { label: 'Yongsheng County' }, { label: 'Huaping County' }],
+				label: 'Oakland',
+				children: [{ label: 'Downtown' }, { label: 'Lake Merritt' }, { label: 'Rockridge' }],
 			},
 			{
-				label: "Pu'er",
+				label: 'San Jose',
 				children: [
-					{ label: 'Simao District' },
-					{ label: "Ning'er Hani and Yi Autonomous County" },
-					{ label: 'Mojiang Hani Autonomous County' },
-					{ label: 'Jingdong Yi Autonomous County' },
-					{ label: 'Jinggu Dai and Yi Autonomous County' },
+					{ label: 'Downtown' },
+					{ label: 'Willow Glen' },
+					{ label: 'Almaden Valley' },
+					{ label: 'Berryessa' },
+					{ label: 'Evergreen' },
 				],
 			},
 			{
-				label: 'Lincang',
+				label: 'Fresno',
 				children: [
-					{ label: 'Linxia District' },
-					{ label: 'Fengqing County' },
-					{ label: 'Yun County' },
-					{ label: 'Yongde County' },
-					{ label: 'Zhenkang County' },
+					{ label: 'Downtown' },
+					{ label: 'Tower District' },
+					{ label: 'River Park' },
+					{ label: 'Fig Garden' },
+					{ label: 'Woodward Park' },
 				],
 			},
 			{
-				label: 'Chuxiong',
+				label: 'Long Beach',
 				children: [
-					{ label: 'Chuxiong City' },
-					{ label: 'Shuangbai County' },
-					{ label: 'Mouding County' },
-					{ label: 'Nanhua County' },
-					{ label: "Yao'an County" },
-					{ label: 'Dayao County' },
+					{ label: 'Downtown' },
+					{ label: 'Belmont Shore' },
+					{ label: 'Bixby Knolls' },
+					{ label: 'Naples' },
+					{ label: 'Alamitos Beach' },
+					{ label: 'Rose Park' },
 				],
 			},
 			{
-				label: 'Honghe',
-				children: [
-					{ label: 'Gejiu City' },
-					{ label: 'Kaiyuan City' },
-					{ label: 'Mengzi City' },
-					{ label: 'Mile City' },
-					{ label: 'Pingbian Miao Autonomous County' },
-				],
+				label: 'Bakersfield',
+				children: [{ label: 'Downtown' }, { label: 'Rosedale' }, { label: 'Oildale' }, { label: 'Seven Oaks' }, { label: 'Stockdale' }],
 			},
 			{
-				label: 'Wenshan',
+				label: 'Anaheim',
 				children: [
-					{ label: 'Wenshan City' },
-					{ label: 'Yanshan County' },
-					{ label: 'Xichou County' },
-					{ label: 'Malipo County' },
-					{ label: 'Maguan County' },
-					{ label: 'Qiubei County' },
-					{ label: 'Guangnan County' },
-					{ label: 'Funing County' },
+					{ label: 'Downtown' },
+					{ label: 'Anaheim Hills' },
+					{ label: 'The Colony' },
+					{ label: 'The Platinum Triangle' },
+					{ label: 'West Anaheim' },
+					{ label: 'East Anaheim' },
+					{ label: 'South Anaheim' },
+					{ label: 'Resort District' },
 				],
 			},
 		],
 	},
 	{
-		label: 'Guangdong',
+		label: 'Texas',
 		children: [
 			{
-				label: 'Guangzhou',
+				label: 'Houston',
 				children: [
-					{ label: 'Tianhe District' },
-					{ label: 'Haizhu District' },
-					{ label: 'Liwan District' },
-					{ label: 'Yuexiu District' },
-					{ label: 'Baiyun District' },
-					{ label: 'Huangpu District' },
+					{ label: 'Downtown' },
+					{ label: 'Midtown' },
+					{ label: 'Heights' },
+					{ label: 'River Oaks' },
+					{ label: 'Memorial' },
+					{ label: 'Medical Center' },
 				],
 			},
 			{
-				label: 'Shenzhen',
+				label: 'Dallas',
 				children: [
-					{ label: 'Luohu District' },
-					{ label: 'Futian District' },
-					{ label: 'Nanshan District' },
-					{ label: "Bao'an District" },
-					{ label: 'Longgang District' },
-					{ label: 'Yantian District' },
+					{ label: 'Downtown' },
+					{ label: 'Uptown' },
+					{ label: 'Deep Ellum' },
+					{ label: 'Oak Lawn' },
+					{ label: 'Bishop Arts' },
+					{ label: 'Knox Henderson' },
 				],
 			},
 			{
-				label: 'Zhuhai',
-				children: [{ label: 'Xiangzhou District' }, { label: 'Doumen District' }, { label: 'Jinwan District' }],
-			},
-			{
-				label: 'Shantou',
-				children: [
-					{ label: 'Longhu District' },
-					{ label: 'Jinping District' },
-					{ label: 'Haojiang District' },
-					{ label: 'Chaoyang District' },
-					{ label: "Chao'an District" },
-					{ label: 'Chenghai District' },
-				],
+				label: 'Austin',
+				children: [{ label: 'Downtown' }, { label: 'South Congress' }, { label: 'East Austin' }],
 			},
 			{
-				label: 'Foshan',
+				label: 'San Antonio',
 				children: [
-					{ label: 'Chancheng District' },
-					{ label: 'Nanhai District' },
-					{ label: 'Shunde District' },
-					{ label: 'Sanshui District' },
-					{ label: 'Gaoming District' },
+					{ label: 'Downtown' },
+					{ label: 'Alamo Heights' },
+					{ label: 'Pearl District' },
+					{ label: 'King William' },
+					{ label: 'Stone Oak' },
 				],
 			},
 		],
 	},
 	{
-		label: 'Sichuan',
+		label: 'Illinois',
 		children: [
 			{
-				label: 'Chengdu',
+				label: 'Chicago',
 				children: [
-					{ label: 'Jinjiang District' },
-					{ label: 'Qingyang District' },
-					{ label: 'Jinniu District' },
-					{ label: 'Wuhou District' },
-					{ label: 'Chenghua District' },
-					{ label: 'Longquanyi District' },
+					{ label: 'Loop' },
+					{ label: 'River North' },
+					{ label: 'Lincoln Park' },
+					{ label: 'Wicker Park' },
+					{ label: 'Gold Coast' },
+					{ label: 'Lakeview' },
 				],
 			},
 			{
-				label: 'Mianyang',
+				label: 'Springfield',
 				children: [
-					{ label: 'Fucheng District' },
-					{ label: 'Youxian District' },
-					{ label: 'Anzhou District' },
-					{ label: 'Santai County' },
-					{ label: 'Yanting County' },
-					{ label: 'Zitong County' },
+					{ label: 'Downtown' },
+					{ label: 'West Side' },
+					{ label: 'East Side' },
+					{ label: 'North End' },
+					{ label: 'South Side' },
+					{ label: 'Jerome' },
 				],
 			},
 			{
-				label: 'Zigong',
+				label: 'Rockford',
 				children: [
-					{ label: 'Ziliujing District' },
-					{ label: 'Gongjing District' },
-					{ label: "Da'an District" },
-					{ label: 'Yantan District' },
-					{ label: 'Rong County' },
-					{ label: 'Fushun County' },
+					{ label: 'Downtown' },
+					{ label: 'East Side' },
+					{ label: 'North End' },
+					{ label: 'Rural Oaks' },
+					{ label: 'Churchill Grove' },
+					{ label: 'Signal Hill' },
 				],
 			},
 			{
-				label: 'Panzhihua',
+				label: 'Peoria',
 				children: [
-					{ label: 'Dong District' },
-					{ label: 'Xi District' },
-					{ label: 'Renhe District' },
-					{ label: 'Miyi County' },
-					{ label: 'Yanbian County' },
+					{ label: 'Downtown' },
+					{ label: 'West Bluff' },
+					{ label: 'East Bluff' },
+					{ label: 'North Valley' },
+					{ label: 'South Side' },
 				],
 			},
 		],
 	},
 	{
-		label: 'Beijing',
+		label: 'New York',
 		children: [
 			{
-				label: 'Beijing City',
+				label: 'New York City',
 				children: [
-					{ label: 'Dongcheng District' },
-					{ label: 'Xicheng District' },
-					{ label: 'Chaoyang District' },
-					{ label: 'Fengtai District' },
-					{ label: 'Shijingshan District' },
-					{ label: 'Haidian District' },
+					{ label: 'Manhattan' },
+					{ label: 'Brooklyn' },
+					{ label: 'Queens' },
+					{ label: 'The Bronx' },
+					{ label: 'Staten Island' },
+					{ label: 'Harlem' },
 				],
 			},
 		],
 	},
 	{
-		label: 'Zhejiang',
+		label: 'Washington',
 		children: [
 			{
-				label: 'Hangzhou',
+				label: 'Seattle',
 				children: [
-					{ label: 'Shangcheng District' },
-					{ label: 'Xiacheng District' },
-					{ label: 'Jianggan District' },
-					{ label: 'Gongshu District' },
-					{ label: 'Xihu District' },
-					{ label: 'Binjiang District' },
+					{ label: 'Downtown' },
+					{ label: 'Capitol Hill' },
+					{ label: 'Ballard' },
+					{ label: 'Fremont' },
+					{ label: 'Queen Anne' },
+					{ label: 'South Lake Union' },
 				],
 			},
 			{
-				label: 'Ningbo',
+				label: 'Spokane',
 				children: [
-					{ label: 'Haishu District' },
-					{ label: 'Jiangdong District' },
-					{ label: 'Jiangbei District' },
-					{ label: 'Beilun District' },
-					{ label: 'Zhenhai District' },
-					{ label: 'Yinzhou District' },
+					{ label: 'Downtown' },
+					{ label: 'South Hill' },
+					{ label: 'North Side' },
+					{ label: 'West Central' },
+					{ label: 'East Central' },
+					{ label: 'Riverside' },
 				],
 			},
 			{
-				label: 'Wenzhou',
+				label: 'Tacoma',
 				children: [
-					{ label: 'Lucheng District' },
-					{ label: 'Longwan District' },
-					{ label: 'Ouhai District' },
-					{ label: 'Dongtou District' },
-					{ label: 'Yongjia County' },
-					{ label: 'Pingyang County' },
+					{ label: 'Downtown' },
+					{ label: 'North End' },
+					{ label: 'South End' },
+					{ label: 'East Side' },
+					{ label: 'West End' },
+					{ label: 'Central' },
 				],
 			},
 			{
-				label: 'Jiaxing',
+				label: 'Vancouver',
 				children: [
-					{ label: 'Nanhu District' },
-					{ label: 'Xiuzhou District' },
-					{ label: 'Jiashan County' },
-					{ label: 'Haiyan County' },
-					{ label: 'Haining City' },
-					{ label: 'Pinghu City' },
+					{ label: 'Downtown' },
+					{ label: 'Uptown' },
+					{ label: 'Hazel Dell' },
+					{ label: 'Salmon Creek' },
+					{ label: "Fisher's Landing" },
+					{ label: 'Cascade Park' },
 				],
 			},
 			{
-				label: 'Huzhou',
+				label: 'Bellevue',
 				children: [
-					{ label: 'Wuxing District' },
-					{ label: 'Nanxun District' },
-					{ label: 'Deqing County' },
-					{ label: 'Changxing County' },
-					{ label: 'Anji County' },
+					{ label: 'Downtown' },
+					{ label: 'West Bellevue' },
+					{ label: 'Crossroads' },
+					{ label: 'Eastgate' },
+					{ label: 'Factoria' },
 				],
 			},
 		],
@@ -335,118 +318,124 @@ const linkageData = [
 ];
 const linkagDiffLabelKeyData = [
 	{
-		province: 'Yunnan',
+		province: 'California',
 		children: [
 			{
-				city: 'Kunming',
+				city: 'Los Angeles',
 				children: [
-					{ region: 'Panlong Qu' },
-					{ region: 'Wuhua Qu' },
-					{ region: 'Guandu Qu' },
-					{ region: 'Xishan Qu' },
-					{ region: 'Dongchuan Qu' },
-					{ region: 'Chenggong Qu' },
-					{ region: 'Jinning Qu' },
+					{ region: 'Downtown' },
+					{ region: 'Hollywood' },
+					{ region: 'Beverly Hills' },
+					{ region: 'Santa Monica' },
+					{ region: 'Pasadena' },
+					{ region: 'Venice Beach' },
+					{ region: 'Westwood' },
 				],
 			},
 			{
-				city: 'Qujing',
+				city: 'San Francisco',
 				children: [
-					{ region: 'Qilin Qu' },
-					{ region: 'Zhanyi Qu' },
-					{ region: 'Malong Xian' },
-					{ region: 'Luliang Xian' },
-					{ region: 'Shizong Xian' },
-					{ region: 'Luoping Xian' },
+					{ region: 'Downtown' },
+					{ region: 'Mission District' },
+					{ region: 'North Beach' },
+					{ region: 'Chinatown' },
+					{ region: 'Haight-Ashbury' },
+					{ region: 'Castro' },
 				],
 			},
 			{
-				city: 'Yuxi',
+				city: 'San Diego',
 				children: [
-					{ region: 'Hongta Qu' },
-					{ region: 'Jiangchuan Qu' },
-					{ region: 'Chengjiang Xian' },
-					{ region: 'Tonghai Xian' },
-					{ region: 'Huaning Xian' },
-					{ region: 'Yimen Xian' },
+					{ region: 'Downtown' },
+					{ region: 'La Jolla' },
+					{ region: 'Pacific Beach' },
+					{ region: 'Mission Beach' },
+					{ region: 'Coronado' },
+					{ region: 'North Park' },
 				],
 			},
 		],
 	},
 	{
-		province: 'Guizhou',
+		province: 'Florida',
 		children: [
 			{
-				city: 'Guiyang',
+				city: 'Miami',
 				children: [
-					{ region: 'Nanming Qu' },
-					{ region: 'Yunyan Qu' },
-					{ region: 'Huaxi Qu' },
-					{ region: 'Wudang Qu' },
-					{ region: 'Baiyun Qu' },
-					{ region: 'Guanshanhu Qu' },
+					{ region: 'Downtown' },
+					{ region: 'South Beach' },
+					{ region: 'Brickell' },
+					{ region: 'Coconut Grove' },
+					{ region: 'Little Havana' },
+					{ region: 'Coral Gables' },
 				],
 			},
 			{
-				city: 'Zunyi',
+				city: 'Orlando',
 				children: [
-					{ region: 'Honghuagang Qu' },
-					{ region: 'Huichuan Qu' },
-					{ region: 'Bozhou Qu' },
-					{ region: 'Tongzi Xian' },
-					{ region: 'Suiyang Xian' },
-					{ region: 'Zhengan Xian' },
+					{ region: 'Downtown' },
+					{ region: 'Winter Park' },
+					{ region: 'Lake Nona' },
+					{ region: 'College Park' },
+					{ region: 'Baldwin Park' },
+					{ region: 'Mills 50' },
 				],
 			},
 			{
-				city: 'Liupanshui',
-				children: [{ region: 'Zhongshan Qu' }, { region: 'Liuzhi Special District' }, { region: 'Shuicheng Xian' }, { region: 'Pan Xian' }],
+				city: 'Tampa',
+				children: [{ region: 'Downtown' }, { region: 'Hyde Park' }, { region: 'Ybor City' }, { region: 'Channelside' }],
 			},
 		],
 	},
 	{
-		province: 'Sichuan',
+		province: 'Illinois',
 		children: [
 			{
-				city: 'Chengdu',
+				city: 'Chicago',
 				children: [
-					{ region: 'Jinjiang Qu' },
-					{ region: 'Qingyang Qu' },
-					{ region: 'Jinniu Qu' },
-					{ region: 'Wuhou Qu' },
-					{ region: 'Chenghua Qu' },
-					{ region: 'Longquanyi Qu' },
+					{ region: 'Loop' },
+					{ region: 'River North' },
+					{ region: 'Lincoln Park' },
+					{ region: 'Wicker Park' },
+					{ region: 'Gold Coast' },
+					{ region: 'Lakeview' },
 				],
 			},
 			{
-				city: 'Mianyang',
+				city: 'Springfield',
 				children: [
-					{ region: 'Fucheng Qu' },
-					{ region: 'Youxian Qu' },
-					{ region: 'Anzhou Qu' },
-					{ region: 'Santai Xian' },
-					{ region: 'Yanling Xian' },
-					{ region: 'Zitong Xian' },
+					{ region: 'Downtown' },
+					{ region: 'West Side' },
+					{ region: 'East Side' },
+					{ region: 'North End' },
+					{ region: 'South Side' },
+					{ region: 'Jerome' },
 				],
 			},
 			{
-				city: 'Panzhihua',
-				children: [{ region: 'Dongqu' }, { region: 'Xiqu' }, { region: 'Renhe Qu' }, { region: 'Miyi Xian' }, { region: 'Yanbian Xian' }],
+				city: 'Peoria',
+				children: [
+					{ region: 'Downtown' },
+					{ region: 'West Bluff' },
+					{ region: 'East Bluff' },
+					{ region: 'North Valley' },
+					{ region: 'South Side' },
+				],
 			},
 		],
 	},
 	{
-		province: 'Beijing',
+		province: 'New York',
 		children: [
 			{
-				city: 'Beijing',
+				city: 'New York City',
 				children: [
-					{ region: 'Dongcheng Qu' },
-					{ region: 'Xicheng Qu' },
-					{ region: 'Chaoyang Qu' },
-					{ region: 'Fengtai Qu' },
-					{ region: 'Shijingshan Qu' },
-					{ region: 'Haidian Qu' },
+					{ region: 'Manhattan' },
+					{ region: 'Brooklyn' },
+					{ region: 'Queens' },
+					{ region: 'The Bronx' },
+					{ region: 'Staten Island' },
+					{ region: 'Harlem' },
 				],
 			},
 		],
@@ -454,156 +443,162 @@ const linkagDiffLabelKeyData = [
 ];
 const linkagCustomChildrenKeyData = [
 	{
-		label: 'YunNan',
+		label: 'California',
 		child: [
 			{
-				label: 'KunMing',
+				label: 'Los Angeles',
 				child: [
-					{ label: 'PanLongQu' },
-					{ label: 'WuHuaQu' },
-					{ label: 'GuanDuQu' },
-					{ label: 'XiShanQu' },
-					{ label: 'DongChuanQu' },
-					{ label: 'ChengGongQu' },
-					{ label: 'JinNingQu' },
+					{ label: 'Downtown' },
+					{ label: 'Hollywood' },
+					{ label: 'Beverly Hills' },
+					{ label: 'Santa Monica' },
+					{ label: 'Pasadena' },
+					{ label: 'Venice Beach' },
+					{ label: 'Westwood' },
 				],
 			},
 			{
-				label: 'QuJing',
+				label: 'San Francisco',
 				child: [
-					{ label: 'QiLinQu' },
-					{ label: 'ZhanYiQu' },
-					{ label: 'MaLongXian' },
-					{ label: 'LuLiangXian' },
-					{ label: 'ShiZongXian' },
-					{ label: 'LuoPingXian' },
+					{ label: 'Downtown' },
+					{ label: 'Mission District' },
+					{ label: 'North Beach' },
+					{ label: 'Chinatown' },
+					{ label: 'Haight-Ashbury' },
+					{ label: 'Castro' },
 				],
 			},
 			{
-				label: 'YuXi',
+				label: 'San Diego',
 				child: [
-					{ label: 'HongTaQu' },
-					{ label: 'JiangChuanQu' },
-					{ label: 'ChengJiangXian' },
-					{ label: 'TongHaiXian' },
-					{ label: 'HuaNingXian' },
-					{ label: 'YiMenXian' },
+					{ label: 'Downtown' },
+					{ label: 'La Jolla' },
+					{ label: 'Pacific Beach' },
+					{ label: 'Mission Beach' },
+					{ label: 'Coronado' },
+					{ label: 'North Park' },
 				],
 			},
 		],
 	},
 	{
-		label: 'GuiZhou',
+		label: 'Florida',
 		child: [
 			{
-				label: 'GuiYang',
+				label: 'Miami',
 				child: [
-					{ label: 'NanMingQu' },
-					{ label: 'YunYanQu' },
-					{ label: 'HuaXiQu' },
-					{ label: 'WuDangQu' },
-					{ label: 'BaiYunQu' },
-					{ label: 'GuanShanHuQu' },
+					{ label: 'Downtown' },
+					{ label: 'South Beach' },
+					{ label: 'Brickell' },
+					{ label: 'Coconut Grove' },
+					{ label: 'Little Havana' },
+					{ label: 'Coral Gables' },
 				],
 			},
 			{
-				label: 'ZunYi',
+				label: 'Orlando',
 				child: [
-					{ label: 'HongHuaGangQu' },
-					{ label: 'HuiChuanQu' },
-					{ label: 'BoZhouQu' },
-					{ label: 'TongZiXian' },
-					{ label: 'SuiYangXian' },
-					{ label: 'ZhengAnXian' },
+					{ label: 'Downtown' },
+					{ label: 'Winter Park' },
+					{ label: 'Lake Nona' },
+					{ label: 'College Park' },
+					{ label: 'Baldwin Park' },
+					{ label: 'Mills 50' },
 				],
 			},
 			{
-				label: 'LiuPanShui',
-				child: [{ label: 'ZhongShanQu' }, { label: 'LiuZhiTeQu' }, { label: 'ShuiChengXian' }, { label: 'PanXian' }],
+				label: 'Tampa',
+				child: [{ label: 'Downtown' }, { label: 'Hyde Park' }, { label: 'Ybor City' }, { label: 'Channelside' }],
 			},
 		],
 	},
 	{
-		label: 'SiChuan',
+		label: 'Illinois',
 		child: [
 			{
-				label: 'ChengDu',
+				label: 'Chicago',
 				child: [
-					{ label: 'JinJiangQu' },
-					{ label: 'QingYangQu' },
-					{ label: 'JinNiuQu' },
-					{ label: 'WuHouQu' },
-					{ label: 'ChengHuaQu' },
-					{ label: 'LongQuanYiQu' },
+					{ label: 'Loop' },
+					{ label: 'River North' },
+					{ label: 'Lincoln Park' },
+					{ label: 'Wicker Park' },
+					{ label: 'Gold Coast' },
+					{ label: 'Lakeview' },
 				],
 			},
 			{
-				label: 'MianYang',
+				label: 'Springfield',
 				child: [
-					{ label: 'FuChengQu' },
-					{ label: 'YouXianQu' },
-					{ label: 'AnZhouQu' },
-					{ label: 'SanTaiXian' },
-					{ label: 'YanTingXian' },
-					{ label: 'ZiTongXian' },
+					{ label: 'Downtown' },
+					{ label: 'West Side' },
+					{ label: 'East Side' },
+					{ label: 'North End' },
+					{ label: 'South Side' },
+					{ label: 'Jerome' },
 				],
 			},
 			{
-				label: 'PanZhiHua',
-				child: [{ label: 'DongQu' }, { label: 'XiQu' }, { label: 'RenHeQu' }, { label: 'MiYiXian' }, { label: 'YanBianXian' }],
+				label: 'Peoria',
+				child: [
+					{ label: 'Downtown' },
+					{ label: 'West Bluff' },
+					{ label: 'East Bluff' },
+					{ label: 'North Valley' },
+					{ label: 'South Side' },
+				],
 			},
 		],
 	},
 	{
-		label: 'BeiJing',
+		label: 'New York',
 		child: [
 			{
-				label: 'BeiJing',
+				label: 'New York City',
 				child: [
-					{ label: 'DongChengQu' },
-					{ label: 'XiChengQu' },
-					{ label: 'ChaoYangQu' },
-					{ label: 'FengTaiQu' },
-					{ label: 'ShiJingShanQu' },
-					{ label: 'HaiDianQu' },
+					{ label: 'Manhattan' },
+					{ label: 'Brooklyn' },
+					{ label: 'Queens' },
+					{ label: 'The Bronx' },
+					{ label: 'Staten Island' },
+					{ label: 'Harlem' },
 				],
 			},
 		],
 	},
 	{
-		label: 'ZheJiang',
+		label: 'Washington',
 		child: [
 			{
-				label: 'HangZhou',
+				label: 'Seattle',
 				child: [
-					{ label: 'XiHuQu' },
-					{ label: 'ShangChengQu' },
-					{ label: 'XiaChengQu' },
-					{ label: 'JiangGanQu' },
-					{ label: 'GongShuQu' },
-					{ label: 'BinJiangQu' },
+					{ label: 'Downtown' },
+					{ label: 'Capitol Hill' },
+					{ label: 'Ballard' },
+					{ label: 'Fremont' },
+					{ label: 'Queen Anne' },
+					{ label: 'South Lake Union' },
 				],
 			},
 			{
-				label: 'NingBo',
+				label: 'Spokane',
 				child: [
-					{ label: 'HaiShuQu' },
-					{ label: 'JiangDongQu' },
-					{ label: 'JiangBeiQu' },
-					{ label: 'BeiLunQu' },
-					{ label: 'ZhenHaiQu' },
-					{ label: 'YinZhouQu' },
+					{ label: 'Downtown' },
+					{ label: 'South Hill' },
+					{ label: 'North Side' },
+					{ label: 'West Central' },
+					{ label: 'East Central' },
+					{ label: 'Riverside' },
 				],
 			},
 			{
-				label: 'WenZhou',
+				label: 'Tacoma',
 				child: [
-					{ label: 'LuChengQu' },
-					{ label: 'LongWanQu' },
-					{ label: 'OuHaiQu' },
-					{ label: 'DongTouQu' },
-					{ label: 'YongJiaXian' },
-					{ label: 'PingYangXian' },
+					{ label: 'Downtown' },
+					{ label: 'North End' },
+					{ label: 'South End' },
+					{ label: 'East Side' },
+					{ label: 'West End' },
+					{ label: 'Central' },
 				],
 			},
 		],

+ 57 - 56
demo/src/routes/zh_CN/picker/+page.svelte

@@ -14,78 +14,72 @@
 	} from './data';
 
 	const datas = [{ data: someProvinceList }];
+
 	const col3Datas = [{ data: weekList }, { data: amOrPmList }, { data: timeList }];
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
-	let visible10 = false;
-	let visible11 = false;
-	let visible12 = false;
-	let visible13 = false;
-	let visible14 = false;
-	let visible15 = false;
-	let visible16 = false;
-	let visible17 = false;
-	let visible18 = false;
-	let visible19 = false;
-	let visible20 = false;
-	let visible21 = false;
-	let visible22 = false;
+	let visible1 = $state(false);
+	let visible2 = $state(false);
+	let visible3 = $state(false);
+	let visible4 = $state(false);
+	let visible5 = $state(false);
+	let visible6 = $state(false);
+	let visible7 = $state(false);
+	let visible8 = $state(false);
+	let visible9 = $state(false);
+	let visible10 = $state(false);
+	let visible11 = $state(false);
+	let visible12 = $state(false);
+	let visible13 = $state(false);
+	let visible14 = $state(false);
+	let visible15 = $state(false);
+	let visible16 = $state(false);
+	let visible17 = $state(false);
+	let visible18 = $state(false);
+	let visible19 = $state(false);
+	let visible20 = $state(false);
+	let visible21 = $state(false);
+	let visible22 = $state(false);
 
-	let currentDetail = '请选择';
-	const getCurrentDetailFunc = e => {
-		currentDetail = e.detail.items[0].label;
-	};
-	let allItems = [];
-	let allIndexs = [];
-	const getAllDataFunc = e => {
-		allItems = e.detail.items;
-		allIndexs = e.detail.indexs;
-	};
+	let currentDetail = $state('请选择');
+	let allItems = $state([]);
+	let allIndexs = $state([]);
 </script>
 
 <div class="py-4">
-	<Cell title="基础用法" on:click={() => (visible1 = true)} />
+	<Cell title="基础用法" onclick={() => (visible1 = true)} />
 	<Picker bind:visible={visible1} {datas} />
 
-	<Cell title="自定义标题" on:click={() => (visible2 = true)} />
+	<Cell title="自定义标题" onclick={() => (visible2 = true)} />
 	<Picker bind:visible={visible2} title="请选择省份" {datas} />
 
-	<Cell title="可见 7 行" on:click={() => (visible3 = true)} />
+	<Cell title="可见 7 行" onclick={() => (visible3 = true)} />
 	<Picker bind:visible={visible3} datas={[{ data: someProvinceList, showRow: 7 }]} />
 
-	<Cell title="关闭自动滚动至上次选定项" on:click={() => (visible4 = true)} />
+	<Cell title="关闭自动滚动至上次选定项" onclick={() => (visible4 = true)} />
 	<Picker bind:visible={visible4} {datas} autoScrollToLast={false} />
 
-	<Cell title="初始选定始终为第 4 项" on:click={() => (visible5 = true)} subTitle="需要关闭自动选定上次选中项" />
+	<Cell title="初始选定始终为第 4 项" onclick={() => (visible5 = true)} subTitle="需要关闭自动选定上次选中项" />
 	<Picker bind:visible={visible5} datas={[{ data: someProvinceList, initIndex: 3 }]} autoScrollToLast={false} />
 
-	<Cell title="自动滚动时取消动画" on:click={() => (visible6 = true)} />
+	<Cell title="自动滚动时取消动画" onclick={() => (visible6 = true)} />
 	<Picker bind:visible={visible6} datas={[{ data: someProvinceList, useAnimation: false }]} />
 
-	<Cell title="自定义 label 的 key 值" on:click={() => (visible7 = true)} />
+	<Cell title="自定义 label 的 key 值" onclick={() => (visible7 = true)} />
 	<Picker bind:visible={visible7} datas={[{ data: cityList, labelKey: 'cityName' }]} title="请选择城市" />
 
-	<Cell title="右侧展示选定项" detail={currentDetail} on:click={() => (visible8 = true)} />
-	<Picker bind:visible={visible8} {datas} on:confirm={getCurrentDetailFunc} />
+	<Cell title="右侧展示选定项" detail={currentDetail} onclick={() => (visible8 = true)} />
+	<Picker bind:visible={visible8} {datas} onconfirm={items => (currentDetail = items[0].label)} />
 
-	<Cell title="单列左对齐" on:click={() => (visible20 = true)} />
+	<Cell title="单列左对齐" onclick={() => (visible20 = true)} />
 	<Picker bind:visible={visible20} datas={[{ data: someProvinceList, align: 'left' }]} />
 
-	<Cell title="多列选择器" on:click={() => (visible9 = true)} />
+	<Cell title="多列选择器" onclick={() => (visible9 = true)} />
 	<Picker bind:visible={visible9} datas={col3Datas} />
 
-	<Cell title="不同列可见行数" on:click={() => (visible10 = true)} />
+	<Cell title="不同列可见行数" onclick={() => (visible10 = true)} />
 	<Picker bind:visible={visible10} datas={[{ data: weekList }, { data: amOrPmList, showRow: 3 }, { data: timeList, showRow: 7 }]} />
 
-	<Cell title="不同列 flex 比例" on:click={() => (visible11 = true)} />
+	<Cell title="不同列 flex 比例" onclick={() => (visible11 = true)} />
 	<Picker
 		bind:visible={visible11}
 		datas={[
@@ -95,7 +89,7 @@
 		]}
 	/>
 
-	<Cell title="多列不同对齐方式" on:click={() => (visible21 = true)} />
+	<Cell title="多列不同对齐方式" onclick={() => (visible21 = true)} />
 	<Picker
 		bind:visible={visible21}
 		datas={[
@@ -105,25 +99,25 @@
 		]}
 	/>
 
-	<Cell title="多级联动" on:click={() => (visible12 = true)} />
+	<Cell title="多级联动" onclick={() => (visible12 = true)} />
 	<Picker bind:visible={visible12} datas={linkageData} isLinkage />
 
-	<Cell title="多级联动不同可见行数" on:click={() => (visible13 = true)} />
+	<Cell title="多级联动不同可见行数" onclick={() => (visible13 = true)} />
 	<Picker bind:visible={visible13} datas={linkageData} linkageShowRows={[3, 5, 7]} isLinkage />
 
-	<Cell title="多级联动不同 flex 比例" on:click={() => (visible14 = true)} />
+	<Cell title="多级联动不同 flex 比例" onclick={() => (visible14 = true)} />
 	<Picker bind:visible={visible14} datas={linkageData} linkageFlexs={[1, 2, 3]} isLinkage />
 
-	<Cell title="多级联动自定义每级 label 的 key 值" on:click={() => (visible15 = true)} />
+	<Cell title="多级联动自定义每级 label 的 key 值" onclick={() => (visible15 = true)} />
 	<Picker bind:visible={visible15} datas={linkagDiffLabelKeyData} linkageLabelKeys={['province', 'city', 'region']} isLinkage />
 
-	<Cell title="多级联动自定义上下级 children 的 key 值" on:click={() => (visible16 = true)} />
+	<Cell title="多级联动自定义上下级 children 的 key 值" onclick={() => (visible16 = true)} />
 	<Picker bind:visible={visible16} datas={linkagCustomChildrenKeyData} linkageChildrenKey="child" isLinkage />
 
-	<Cell title="联动不同对齐方式" on:click={() => (visible22 = true)} />
+	<Cell title="联动不同对齐方式" onclick={() => (visible22 = true)} />
 	<Picker bind:visible={visible22} datas={linkageData} linkageAligns={['right', 'center', 'left']} isLinkage />
 
-	<Cell title="多级联动设置每列初始选定项" on:click={() => (visible17 = true)} />
+	<Cell title="多级联动设置每列初始选定项" onclick={() => (visible17 = true)} />
 	<Picker bind:visible={visible17} datas={linkageData} linkageInitIndexs={[0, 1, 8]} isLinkage />
 
 	<div class="px-4">
@@ -146,10 +140,17 @@
 			<div>请选定数据</div>
 		{/if}
 	</div>
-	<Cell title="获取选定数据" on:click={() => (visible18 = true)} />
-	<Picker bind:visible={visible18} datas={col3Datas} on:confirm={getAllDataFunc} />
+	<Cell title="获取选定数据" onclick={() => (visible18 = true)} />
+	<Picker
+		bind:visible={visible18}
+		datas={col3Datas}
+		onconfirm={(items, indexs) => {
+			allItems = items;
+			allIndexs = indexs;
+		}}
+	/>
 
-	<Cell title="顶部来点圆角" on:click={() => (visible19 = true)} />
+	<Cell title="顶部来点圆角" onclick={() => (visible19 = true)} />
 	<Picker bind:visible={visible19} {datas} popup={{ radius: 'xl' }} />
 </div>
 

+ 40 - 33
doc/components/picker/api.md

@@ -1,39 +1,46 @@
 ## Picker Props
 
-| 属性               | 类型    | 默认值                           | 可选值           | 必传 | 说明                                       |
-| ------------------ | ------- | -------------------------------- | ---------------- | ---- | ------------------------------------------ |
-| visible            | Boolean | false                            | true/false       | N    | 是否显示。                                 |
-| datas              | Array   | []                               | -                | Y    | 所有列数据,参考 Picker datas Props。      |
-| autoScrollToLast   | Boolean | true                             | true/false       | N    | 是否自动滚动到上次的选中项。               |
-| cancelText         | String  | 当前语言的 picker.defaultCancel  | -                | N    | 取消选项文本。                             |
-| confirmText        | String  | 当前语言的 picker.defaultConfirm | -                | N    | 确定选项文本。                             |
-| title              | String  | 当前语言的 picker.defaultTitle   | -                | N    | 中间标题文本。                             |
-| isLinkage          | Boolean | false                            | true/false       | N    | 是否多级联动。                             |
-| linkageInitIndexs  | Array   | []                               | -                | N    | 多级联动时,设置初始选中项。               |
-| linkageShowRows    | Array   | []                               | -                | N    | 多级联动时,设置每列显示行数。             |
-| linkageFlexs       | Array   | []                               | -                | N    | 多级联动时,设置每列的宽度。               |
-| linkageAligns      | Array   | []                               | -                | N    | 多级联动时,设置每列的对齐方式。           |
-| linkageLabelKeys   | Array   | []                               | -                | N    | 多级联动时,自定义每列 label 的 Key。      |
-| linkageChildrenKey | String  | 'children'                       | -                | N    | 多级联动时,自定义上下级 children 的 key。 |
-| popup              | Object  | {}                               | 参考 Popup Props | N    | 弹出层参数。                               |
+| 名称               | 类型                                                        | 默认值                           | 必传 | 说明                                       |
+| ------------------ | ----------------------------------------------------------- | -------------------------------- | ---- | ------------------------------------------ |
+| visible            | `boolean`                                                   | `false`                          | N    | 是否显示。                                 |
+| datas              | `PickerDatas[]\|PickerDataChild[]`                          | `[]`                             | Y    | 所有列数据,参考 Picker datas Props。      |
+| autoScrollToLast   | `boolean`                                                   | `true`                           | N    | 是否自动滚动到上次的选中项。               |
+| cancelText         | `string`                                                    | 当前语言的 picker.defaultCancel  | N    | 取消选项文本。                             |
+| confirmText        | `string`                                                    | 当前语言的 picker.defaultConfirm | N    | 确定选项文本。                             |
+| title              | `string`                                                    | 当前语言的 picker.defaultTitle   | N    | 中间标题文本。                             |
+| isLinkage          | `boolean`                                                   | `false`                          | N    | 是否多级联动。                             |
+| linkageInitIndexs  | `number[]`                                                  | `[]`                             | N    | 多级联动时,设置初始选中项。               |
+| linkageShowRows    | `number[]`                                                  | `[]`                             | N    | 多级联动时,设置每列显示行数。             |
+| linkageFlexs       | `number[]`                                                  | `[]`                             | N    | 多级联动时,设置每列的宽度。               |
+| linkageAligns      | `('left'\|'center'\|'right')[]`                             | `[]`                             | N    | 多级联动时,设置每列的对齐方式。           |
+| linkageLabelKeys   | `string[]`                                                  | `[]`                             | N    | 多级联动时,自定义每列 label 的 Key。      |
+| linkageChildrenKey | `string`                                                    | `'children'`                     | N    | 多级联动时,自定义上下级 children 的 key。 |
+| popup              | [`Popup`](https://stdf.design/#/components?nav=popup&tab=1) | `{}`                             | N    | 弹出层参数。                               |
 
-## Picker datas Props
+## Picker Events
 
-| 属性         | 类型    | 默认值   | 可选值                  | 必传 | 说明                  |
-| ------------ | ------- | -------- | ----------------------- | ---- | --------------------- |
-| data         | Array   | []       | -                       | Y    | 列数据。              |
-| showRow      | Number  | 5        | 3/5/7                   | N    | 列显示行数。          |
-| initIndex    | Number  | 0        | -                       | N    | 列初始选中项。        |
-| useAnimation | Boolean | true     | true/false              | N    | 滚动是否使用动画。    |
-| labelKey     | String  | 'label'  | -                       | N    | 自定义 label 的 key。 |
-| flex         | Number  | 1        | -                       | N    | 多列时此列宽度。      |
-| align        | String  | 'center' | 'left'/'center'/'right' | N    | 多列时此列对齐方式。  |
+| 名称      | 类型                                                             | 参数                                                                        | 描述                 |
+| --------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------- | -------------------- |
+| onclose   | `() => void`                                                     |                                                                             | 关闭时触发。         |
+| oncancel  | `() => void`                                                     |                                                                             | 点击左侧取消时触发。 |
+| onconfirm | `(items: { [key: string]: string }[], indexs: number[]) => void` | items - 选定多列数据组成的数组;<br />indexs - 选定多列数据索引组成的数组。 | 点击右侧确定时触发。 |
 
-## Picker Events
+## PickerDatas Props
+
+| 名称         | 类型                          | 默认值     | 必传 | 说明                  |
+| ------------ | ----------------------------- | ---------- | ---- | --------------------- |
+| data         | `{ [key: string]: string }[]` | `[]`       | Y    | 列数据。              |
+| showRow      | `3`\|`5`\|`7`                 | `5`        | N    | 列显示行数。          |
+| initIndex    | `number`                      | `0`        | N    | 列初始选中项。        |
+| useAnimation | `boolean`                     | `true`     | N    | 滚动是否使用动画。    |
+| labelKey     | `string`                      | `'label'`  | N    | 自定义 label 的 key。 |
+| flex         | `number`                      | `1`        | N    | 多列时此列宽度。      |
+| align        | `'left'\|'center'\|'right'`   | `'center'` | N    | 多列时此列对齐方式。  |
+
+## PickerDataChild Props
 
-| 名称    | 参数                                                                                                                             | 描述                 |
-| ------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
-| open    | -                                                                                                                                | 打开时触发。         |
-| close   | -                                                                                                                                | 关闭时触发。         |
-| cancel  | -                                                                                                                                | 点击左侧取消时触发。 |
-| confirm | event:事件对象,其中 detail 内有两个参数:<br />1. items:选定多列数据组成的数组;<br />2. indexs:选定多列数据索引组成的数组。 | 点击右侧确定时触发。 |
+| 名称          | 类型                                   | 默认值    | 必传 | 说明                  |
+| ------------- | -------------------------------------- | --------- | ---- | --------------------- |
+| children      | `PickerDatas[]`                        | `[]`      | Y    | 子数据。              |
+| [key: string] | `string\|PickerDataChild[]\|undefined` | `'label'` | N    | 自定义 label 的 key。 |
+|               |

+ 40 - 33
doc/components/picker/api_en.md

@@ -1,39 +1,46 @@
 ## Picker Props
 
-| Property           | Type    | Default Value                                 | Optional Values      | Required | Description                                                                          |
-| ------------------ | ------- | --------------------------------------------- | -------------------- | -------- | ------------------------------------------------------------------------------------ |
-| visible            | Boolean | false                                         | true/false           | N        | Whether the component is visible.                                                    |
-| datas              | Array   | []                                            | -                    | Y        | Data for all columns, refer to Picker datas Props.                                   |
-| autoScrollToLast   | Boolean | true                                          | true/false           | N        | Whether it automatically scrolls to the last selected item.                          |
-| cancelText         | String  | picker.defaultCancel in the current language  | -                    | N        | Text for the cancel button.                                                          |
-| confirmText        | String  | picker.defaultConfirm in the current language | -                    | N        | Text for the confirm button.                                                         |
-| title              | String  | picker.defaultTitle in the current language   | -                    | N        | Text for the title in the middle.                                                    |
-| isLinkage          | Boolean | false                                         | true/false           | N        | Whether it's a multi-level linkage.                                                  |
-| linkageInitIndexs  | Array   | []                                            | -                    | N        | Set the initial selected items when it's a multi-level linkage.                      |
-| linkageShowRows    | Array   | []                                            | -                    | N        | Set the number of rows displayed for each column in a multi-level linkage.           |
-| linkageFlexs       | Array   | []                                            | -                    | N        | Set the width for each column in a multi-level linkage.                              |
-| linkageAligns      | Array   | []                                            | -                    | N        | Set the alignment for each column in a multi-level linkage.                          |
-| linkageLabelKeys   | Array   | []                                            | -                    | N        | Set the custom label key for each column in a multi-level linkage.                   |
-| linkageChildrenKey | String  | 'children'                                    | -                    | N        | Set the key for the children of the upper and lower levels in a multi-level linkage. |
-| popup              | Object  | {}                                            | Refer to Popup Props | N        | Popup parameters.                                                                    |
+| Name               | Type                                                        | Default                                | Required | Description                                                |
+| ------------------ | ----------------------------------------------------------- | -------------------------------------- | -------- | ---------------------------------------------------------- |
+| visible            | `boolean`                                                   | `false`                                | N        | Whether to show the picker.                                |
+| datas              | `PickerDatas[]\|PickerDataChild[]`                          | `[]`                                   | Y        | All column data, refer to Picker datas Props.              |
+| autoScrollToLast   | `boolean`                                                   | `true`                                 | N        | Whether to automatically scroll to the last selected item. |
+| cancelText         | `string`                                                    | Current language picker.defaultCancel  | N        | Cancel button text.                                        |
+| confirmText        | `string`                                                    | Current language picker.defaultConfirm | N        | Confirm button text.                                       |
+| title              | `string`                                                    | Current language picker.defaultTitle   | N        | Title text.                                                |
+| isLinkage          | `boolean`                                                   | `false`                                | N        | Whether to enable multi-level linkage.                     |
+| linkageInitIndexs  | `number[]`                                                  | `[]`                                   | N        | Initial selected indexes for multi-level linkage.          |
+| linkageShowRows    | `number[]`                                                  | `[]`                                   | N        | Number of rows to display for each column in linkage mode. |
+| linkageFlexs       | `number[]`                                                  | `[]`                                   | N        | Width of each column in linkage mode.                      |
+| linkageAligns      | `('left'\|'center'\|'right')[]`                             | `[]`                                   | N        | Alignment of each column in linkage mode.                  |
+| linkageLabelKeys   | `string[]`                                                  | `[]`                                   | N        | Custom label keys for each column in linkage mode.         |
+| linkageChildrenKey | `string`                                                    | `'children'`                           | N        | Custom children key for parent-child data in linkage mode. |
+| popup              | [`Popup`](https://stdf.design/#/components?nav=popup&tab=1) | `{}`                                   | N        | Popup parameters.                                          |
 
-## Picker datas Props
+## Picker Events
 
-| Property     | Type    | Default Value | Optional Values         | Required | Description                                              |
-| ------------ | ------- | ------------- | ----------------------- | -------- | -------------------------------------------------------- |
-| data         | Array   | []            | -                       | Y        | Data for the column.                                     |
-| showRow      | Number  | 5             | 3/5/7                   | N        | Number of rows displayed for the column.                 |
-| initIndex    | Number  | 0             | -                       | N        | Initial selected item for the column.                    |
-| useAnimation | Boolean | true          | true/false              | N        | Whether to use animation for scrolling.                  |
-| labelKey     | String  | 'label'       | -                       | N        | Custom label key.                                        |
-| flex         | Number  | 1             | -                       | N        | Width of the column when there are multiple columns.     |
-| align        | String  | 'center'      | 'left'/'center'/'right' | N        | Alignment of the column when there are multiple columns. |
+| Name      | Type                                                             | Parameters                                                                      | Description                      |
+| --------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------- | -------------------------------- |
+| onclose   | `() => void`                                                     |                                                                                 | Triggered when closing.          |
+| oncancel  | `() => void`                                                     |                                                                                 | Triggered when clicking cancel.  |
+| onconfirm | `(items: { [key: string]: string }[], indexs: number[]) => void` | items - Array of selected column data;<br />indexs - Array of selected indexes. | Triggered when clicking confirm. |
 
-## Picker Events
+## PickerDatas Props
+
+| Name         | Type                          | Default    | Required | Description                              |
+| ------------ | ----------------------------- | ---------- | -------- | ---------------------------------------- |
+| data         | `{ [key: string]: string }[]` | `[]`       | Y        | Column data.                             |
+| showRow      | `3`\|`5`\|`7`                 | `5`        | N        | Number of rows to display.               |
+| initIndex    | `number`                      | `0`        | N        | Initial selected index.                  |
+| useAnimation | `boolean`                     | `true`     | N        | Whether to use animation when scrolling. |
+| labelKey     | `string`                      | `'label'`  | N        | Custom label key.                        |
+| flex         | `number`                      | `1`        | N        | Column width in multi-column mode.       |
+| align        | `'left'\|'center'\|'right'`   | `'center'` | N        | Column alignment in multi-column mode.   |
+
+## PickerDataChild Props
 
-| Name    | Parameters                                                                                                                                                                  | Description                                   |
-| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
-| open    | -                                                                                                                                                                           | Triggered when the component is opened.       |
-| close   | -                                                                                                                                                                           | Triggered when the component is closed.       |
-| cancel  | -                                                                                                                                                                           | Triggered when the cancel button is clicked.  |
-| confirm | event: event object, which has two parameters in detail:<br />1. items: an array of multiple selected data.<br />2. indexs: an array of indexes for multiple selected data. | Triggered when the confirm button is clicked. |
+| Name          | Type                                   | Default   | Required | Description       |
+| ------------- | -------------------------------------- | --------- | -------- | ----------------- |
+| children      | `PickerDatas[]`                        | `[]`      | Y        | Child data.       |
+| [key: string] | `string\|PickerDataChild[]\|undefined` | `'label'` | N        | Custom label key. |
+|               |

+ 2 - 2
doc/components/picker/guide.md

@@ -4,7 +4,7 @@ Picker 组件用于选择单条或多条数据,数据量较大或无法确定
 
 ## 传入数据
 
-非多级联动时,传入的数据 datas 是一个数组,数组中的每一项都是一个对象,对象中的属性参考 Picker data Props。其中 data 才是每一列的数据,每一列的数据都是一个数组。
+非多级联动时,传入的数据 datas 是一个数组,数组中的每一项都是一个对象,对象中的属性参考 PickerDatas Props。其中 data 才是每一列的数据,每一列的数据都是一个数组。
 
 多级联动时,传入的数据与非联动的结构将完全不一样,传入的是一个多层级的数组,由 Picker 内部自动处理。请参考示例。
 
@@ -22,7 +22,7 @@ Picker 组件返回的数据有两项,一项是选定的多列数据组成的
 
 非多级联动时:
 
-- 可以通过 Picker data Props 中的 labelKey 自定义传入的每列数据 label 属性名,如果不传入则默认使用 'label',请参考示例。
+- 可以通过 PickerDatas Props 中的 labelKey 自定义传入的每列数据 label 属性名,如果不传入则默认使用 'label',请参考示例。
 
 多级联动时:
 

+ 2 - 2
doc/components/picker/guide_en.md

@@ -4,7 +4,7 @@ The Picker component is used to select one or more pieces of data from a large a
 
 ## Incoming Data
 
-When there is no multi-level linkage, the incoming data `datas` is an array. Each item in the array is an object, and the properties of the object reference the `Picker data Props`. The `data` is the data for each column, and the data for each column is an array.
+When there is no multi-level linkage, the incoming data `datas` is an array. Each item in the array is an object, and the properties of the object reference the `PickerDatas Props`. The `data` is the data for each column, and the data for each column is an array.
 
 When there is multi-level linkage, the incoming data structure will be completely different from non-linked structures. You need to pass in a multi-level array that the Picker component processes automatically. Refer to the example for details.
 
@@ -22,7 +22,7 @@ In actual development, the data used for the Picker is usually obtained dynamica
 
 When there is no multi-level linkage:
 
-- You can customize the `label` property name for the column data passed in through the `Picker data Props` with `labelKey`. If not passed in, it defaults to `'label'`. See the example for details.
+- You can customize the `label` property name for the column data passed in through the `PickerDatas Props` with `labelKey`. If not passed in, it defaults to `'label'`. See the example for details.
 
 When there is multi-level linkage: