feat(Picker): support cascade columns (#4247)

src/picker/demo/data.js

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

src/picker/demo/index.vue

@@ -12,7 +12,7 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="$t('showToolbar')">
       <van-picker
         show-toolbar
         :title="$t('title')"
@@ -22,6 +22,28 @@
       />
     </demo-block>
 
+    <demo-block :title="$t('cascade')">
+      <van-picker
+        show-toolbar
+        :title="$t('title')"
+        :columns="$t('cascadeColumns')"
+        @cancel="onCancel"
+        @confirm="onConfirm"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('disableOption')">
+      <van-picker :columns="$t('column2')" />
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-picker :columns="columns" @change="onChange2" />
+    </demo-block>
+
+    <demo-block :title="$t('loadingStatus')">
+      <van-picker loading :columns="columns" />
+    </demo-block>
+
     <demo-block :title="$t('withPopup')">
       <van-field
         readonly
@@ -40,32 +62,24 @@
         />
       </van-popup>
     </demo-block>
-
-    <demo-block :title="$t('title2')">
-      <van-picker :columns="$t('column2')" />
-    </demo-block>
-
-    <demo-block :title="$t('title4')">
-      <van-picker :columns="columns" @change="onChange2" />
-    </demo-block>
-
-    <demo-block :title="$t('loadingStatus')">
-      <van-picker loading :columns="columns" />
-    </demo-block>
   </demo-section>
 </template>
 
 <script>
+import { cascadeColumns } from './data';
+
 export default {
   i18n: {
     'zh-CN': {
       city: '城市',
-      title2: '禁用选项',
-      title3: '展示顶部栏',
       title4: '多列联动',
-      defaultIndex: '默认选中项',
+      cascade: '级联选择',
       withPopup: '搭配弹出层使用',
       chooseCity: '选择城市',
+      showToolbar: '展示顶部栏',
+      defaultIndex: '默认选中项',
+      disableOption: '禁用选项',
+      cascadeColumns: cascadeColumns['zh-CN'],
       column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
       column2: [
         { text: '杭州', disabled: true },
@@ -80,12 +94,14 @@ export default {
     },
     'en-US': {
       city: 'City',
-      title2: 'Disable Option',
-      title3: 'Show Toolbar',
       title4: 'Multi Columns',
-      defaultIndex: 'Default Index',
+      cascade: 'Cascade',
       withPopup: 'With Popup',
       chooseCity: 'Choose City',
+      showToolbar: 'Show Toolbar',
+      defaultIndex: 'Default Index',
+      disableOption: 'Disable Option',
+      cascadeColumns: cascadeColumns['en-US'],
       column1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
       column2: [
         { text: 'Delaware', disabled: true },