fix(cascader): 修复三级懒加载问题 (#1872)

* fix(cascader): 修复三级懒加载问题

* chore: update lazy demo

* fix: 防止pick触发两次

Author: novlan1

src/cascader/cascader.tsx

@@ -148,19 +148,22 @@ export default defineComponent({
       }
     };
 
-    const handleSelect = (value: RadioValue, level: number) => {
+    const handleSelect = (value: RadioValue, level: number, emitPick = true) => {
       const keys = props.keys as KeysType;
       const index = items[level].findIndex((item: any) => lodashGet(item, keys?.value ?? 'value') === value);
       const item = items[level][index];
       if (lodashGet(item, keys?.disabled ?? 'disabled')) {
         return;
       }
-      props.onPick?.({
-        value: lodashGet(item, keys?.value ?? 'value'),
-        label: lodashGet(item, keys?.label ?? 'label'),
-        level,
-        index,
-      });
+
+      if (emitPick) {
+        props.onPick?.({
+          value: lodashGet(item, keys?.value ?? 'value'),
+          label: lodashGet(item, keys?.label ?? 'label'),
+          level,
+          index,
+        });
+      }
 
       if (props.checkStrictly && selectedValue.includes(String(value))) {
         cancelSelect(value, level, index, item);
@@ -223,10 +226,10 @@ export default defineComponent({
     watch(
       () => props.options,
       () => {
-        items.splice(0, items.length, ...[props.options ?? []]);
+        initWithValue();
 
         if (open.value) {
-          handleSelect(childrenInfo.value, childrenInfo.level);
+          handleSelect(childrenInfo.value, childrenInfo.level, false);
         }
       },
       {

src/cascader/demos/lazy.vue

@@ -30,11 +30,8 @@ const note = ref('请选择地址');
 
 const onPick = (value: string) => {
   const values = JSON.parse(JSON.stringify(value));
-  if (
-    options.value[values.index] &&
-    values.value === options.value[values.index].value &&
-    options.value[values.index].children?.length === 0
-  ) {
+  console.log('onPick', values);
+  const showToast = () => {
     Toast({
       theme: 'loading',
       message: '加载中...',
@@ -43,25 +40,46 @@ const onPick = (value: string) => {
       duration: 10000,
       preventScrollThrough: true,
     });
+  };
+
+  if (values.level === 1 && data.value[0].children[values.index]?.children?.length === 0) {
+    showToast();
+    setTimeout(() => {
+      const current = data.value[0].children[values.index];
+      current.children = [{ value: `${current.value}01`, label: `${current.label}街道` }];
+      Toast.clear();
+    }, 1000);
+    return;
+  }
+
+  if (
+    options.value[values.index] &&
+    values.value === options.value[values.index].value &&
+    options.value[values.index].children?.length === 0
+  ) {
+    showToast();
     // 模拟数据请求
     setTimeout(() => {
       data.value[0].children = [
-        { value: '440304', label: '福田区' },
-        { value: '440303', label: '罗湖区' },
-        { value: '440305', label: '南山区' },
-        { value: '440306', label: '宝安区' },
-        { value: '440307', label: '龙岗区' },
-        { value: '440308', label: '盐田区' },
-        { value: '440309', label: '龙华区' },
-        { value: '440310', label: '坪山区' },
-        { value: '440311', label: '光明区' },
+        { value: '440304', label: '福田区', children: [] },
+        { value: '440303', label: '罗湖区', children: [] },
+        { value: '440305', label: '南山区', children: [] },
+        { value: '440306', label: '宝安区', children: [] },
+        { value: '440307', label: '龙岗区', children: [] },
+        { value: '440308', label: '盐田区', children: [] },
+        { value: '440309', label: '龙华区', children: [] },
+        { value: '440310', label: '坪山区', children: [] },
+        { value: '440311', label: '光明区', children: [] },
       ];
       Toast.clear();
     }, 1000);
   }
 };
 const onChange = (value: string, options: any) => {
-  note.value = options?.map((item: any) => item.label).join('/');
+  note.value = options
+    ?.filter((item?: Array<{ label: string }>) => item)
+    ?.map((item: any) => item.label)
+    .join('/');
   visible.value = false;
 };