perf: add Coordinating the selection of provinces and cities (#534)

Co-authored-by: M69W <M69W@M69W>

perf: add Coordinating the selection of provinces and cities (#534)
Co-authored-by: M69W <M69W@M69W>
M69W · GitHub
1 parent 3ff70bb5
Showing 1 changed file with 97 additions and 0 deletions
src/views/demo/form/index.vue
@@ -19,6 +19,58 @@
   import { PageWrapper } from '/@/components/Page';
  
   import { optionsListApi } from '/@/api/demo/select';
+
+  const provincesOptions = [
+    {
+      id: 'guangdong',
+      label: '广东省',
+      value: '1',
+      key: '1',
+    },
+    {
+      id: 'jiangsu',
+      label: '江苏省',
+      value: '2',
+      key: '2',
+    },
+  ];
+  const citiesOptionsData = {
+    guangdong: [
+      {
+        label: '珠海市',
+        value: '1',
+        key: '1',
+      },
+      {
+        label: '深圳市',
+        value: '2',
+        key: '2',
+      },
+      {
+        label: '广州市',
+        value: '3',
+        key: '3',
+      },
+    ],
+    jiangsu: [
+      {
+        label: '南京市',
+        value: '1',
+        key: '1',
+      },
+      {
+        label: '无锡市',
+        value: '2',
+        key: '2',
+      },
+      {
+        label: '苏州市',
+        value: '3',
+        key: '3',
+      },
+    ],
+  };
+
   const schemas: FormSchema[] = [
     {
       field: 'field1',
@@ -236,6 +288,51 @@
         span: 8,
       },
     },
+    {
+      field: 'province',
+      component: 'Select',
+      label: '省份',
+      colProps: {
+        span: 8,
+      },
+      componentProps: ({ formModel, formActionType }) => {
+        return {
+          options: provincesOptions,
+          placeholder: '省份与城市联动',
+          onChange: (e: any) => {
+            // console.log(e)
+            let citiesOptions =
+              e == 1
+                ? citiesOptionsData[provincesOptions[0].id]
+                : citiesOptionsData[provincesOptions[1].id];
+            // console.log(citiesOptions)
+            if (e === undefined) {
+              citiesOptions = [];
+            }
+            formModel.city = undefined; //  reset city value
+            const { updateSchema } = formActionType;
+            updateSchema({
+              field: 'city',
+              componentProps: {
+                options: citiesOptions,
+              },
+            });
+          },
+        };
+      },
+    },
+    {
+      field: 'city',
+      component: 'Select',
+      label: '城市',
+      colProps: {
+        span: 8,
+      },
+      componentProps: {
+        options: [], // defalut []
+        placeholder: '省份与城市联动',
+      },
+    },
   ];
  
   export default defineComponent({