fix(cascader): 动态加载在value-type为full时支持回显

src/cascader/_example/load.vue

@@ -1,5 +1,16 @@
 <template>
-  <t-cascader v-model="value" :options="options" clearable :load="load" />
+  <t-space direction="vertical">
+    <t-cascader v-model="value" :options="options" clearable :load="load" @change="handleChange" />
+    <t-cascader
+      v-model="value1"
+      value-type="full"
+      clearable
+      :options="options"
+      :load="load"
+      :input-props="inputProps"
+      @change="handleChange1"
+    />
+  </t-space>
 </template>
 <script>
 export default {
@@ -18,6 +29,10 @@ export default {
         },
       ],
       value: '',
+      value1: ['1', '1-1.0', '1-1.0-1.1'],
+      inputProps: {
+        value: '选项1 / 选项1.1 / 选项1.1.1',
+      },
     };
   },
   methods: {
@@ -29,10 +44,12 @@ export default {
             nodes = [
               {
                 label: `${node.label}.1`,
+                value: `${node.value}-1.${node.level}`,
                 children: node.level < 1,
               },
               {
                 label: `${node.label}.2`,
+                value: `${node.value}-2.${node.level}`,
                 children: node.level < 1,
               },
             ];
@@ -41,6 +58,16 @@ export default {
         }, 1000);
       });
     },
+    handleChange(value) {
+      console.log('value', value);
+    },
+    handleChange1(value, context) {
+      const { node } = context;
+      const path = node.getPath();
+      const labelPath = path.map((item) => item.label).join(' / ');
+      this.inputProps.value = labelPath;
+      console.log('value1', value);
+    },
   },
 };
 </script>

src/cascader/components/Panel.tsx

@@ -25,6 +25,8 @@ export default defineComponent({
     const renderTNodeJSXDefault = useTNodeDefault();
     const COMPONENT_NAME = usePrefixClass('cascader');
     const { global } = useConfig('cascader');
+    const { valueType, cascaderValue, treeStore } = props.cascaderContext;
+    const { config } = treeStore;
 
     const panels = computed(() => getPanels(props.cascaderContext.treeNodes));
 
@@ -33,6 +35,12 @@ export default defineComponent({
       expendClickEffect(propsTrigger, trigger, node, cascaderContext);
     };
 
+    // 异步加载回显时默认触发第一个值
+    if (config.load && valueType === 'full' && (cascaderValue as Array<string | number>).length > 0) {
+      const firstExpandNode = treeStore.nodes.find((node: TreeNode) => node.value === cascaderValue[0]);
+      handleExpand(firstExpandNode, 'click');
+    }
+
     return {
       global,
       panels,

src/cascader/hooks.ts

@@ -52,6 +52,7 @@ export const useContext = (
         showAllLevels,
         minCollapsedNum,
         valueType,
+        value,
       } = props;
       return {
         value: statusContext.scopeVal,
@@ -68,6 +69,7 @@ export const useContext = (
         minCollapsedNum,
         valueType,
         visible: innerPopupVisible.value,
+        cascaderValue: value,
         ...statusContext,
         setTreeNodes: (nodes: TreeNode[]) => {
           statusContext.treeNodes = nodes;
@@ -122,7 +124,7 @@ export const useCascaderContext = (props: TdCascaderProps) => {
     () => props.options,
     () => {
       const {
-        options, keys = {}, checkStrictly, lazy, load, valueMode,
+        options, keys = {}, checkStrictly, lazy, load, valueMode, value, valueType,
       } = props;
       const { treeStore } = statusContext;
 
@@ -145,6 +147,11 @@ export const useCascaderContext = (props: TdCascaderProps) => {
             nextTick(() => {
               store.refreshNodes();
               updatedTreeNodes();
+              // 异步加载时子级回显
+              if (load && valueType === 'full' && (value as Array<string | number>).length > store.expandedMap.size) {
+                const expanded = (value as Array<string | number>).slice(0, store.expandedMap.size + 1);
+                store.setExpanded(expanded);
+              }
             });
           },
         });

src/cascader/interface.tsx

@@ -32,6 +32,7 @@ export interface CascaderContextType
   inputVal: TdSelectInputProps['inputValue'];
   setInputVal: (val: TdSelectInputProps['inputValue']) => void;
   setExpend: (val: TreeNodeValue[]) => void;
+  cascaderValue: CascaderValue;
 }
 
 export { TreeNode } from '../_common/js/tree/tree-node';