fix(cascader): custom option

Tencent · Oct 18, 2024 · c483a80 · c483a80
1 parent aabeec5
commit c483a80
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 26 deletions.
diff --git a/src/cascader/components/Item.tsx b/src/cascader/components/Item.tsx
@@ -9,7 +9,9 @@ import TLoading from '../../loading';
 
 // type
 import { getKeepAnimationMixins } from '../../config-provider/config-receiver';
-import { CascaderContextType, TreeNodeValue, TreeNode } from '../interface';
+import {
+  CascaderContextType, TreeNodeValue, TreeNode, TdCascaderProps,
+} from '../interface';
 import { usePrefixClass, useCommonClassName } from '../../hooks/useConfig';
 import { useGlobalIcon } from '../../hooks/useGlobalIcon';
 import Ripple from '../../utils/ripple';
@@ -23,6 +25,9 @@ const props = {
       return {};
     },
   },
+  optionChild: {
+    type: [Object, Array] as PropType<TdCascaderProps['option']>,
+  },
   cascaderContext: {
     type: Object as PropType<CascaderContextType>,
   },
@@ -54,7 +59,7 @@ export default defineComponent({
   },
   render() {
     const {
-      iconClass, cascaderContext, itemClass, node, COMPONENT_NAME, onChange, ChevronRightIcon,
+      iconClass, cascaderContext, itemClass, node, COMPONENT_NAME, onChange, ChevronRightIcon, optionChild,
     } = this;
 
     function RenderLabelInner(node: TreeNode, cascaderContext: CascaderContextType) {
@@ -129,7 +134,10 @@ export default defineComponent({
           this.onMouseenter();
         }}
       >
-        {cascaderContext.multiple ? RenderCheckBox(node, cascaderContext) : RenderLabelContent(node, cascaderContext)}
+        {optionChild
+          || (cascaderContext.multiple
+            ? RenderCheckBox(node, cascaderContext)
+            : RenderLabelContent(node, cascaderContext))}
         {node.children
           && (node.loading ? <TLoading class={iconClass} size="small" /> : <ChevronRightIcon class={iconClass} />)}
       </li>

diff --git a/src/cascader/components/Panel.tsx b/src/cascader/components/Panel.tsx
@@ -4,6 +4,7 @@ import { TreeNode, CascaderContextType, CascaderValue } from '../interface';
 import CascaderProps from '../props';
 import { usePrefixClass, useConfig } from '../../hooks/useConfig';
 import { useTNodeDefault } from '../../hooks/tnode';
+import { getDefaultNode } from '../../hooks/render-tnode';
 
 import { getPanels } from '../core/helper';
 import { expendClickEffect, valueChangeEffect } from '../core/effect';
@@ -56,29 +57,38 @@ export default defineComponent({
       global, COMPONENT_NAME, handleExpand, renderTNodeJSXDefault, cascaderContext, panels, emit,
     } = this;
 
-    const renderItem = (node: TreeNode) => (
-      <Item
-        key={node.value}
-        node={node}
-        cascaderContext={cascaderContext}
-        {...{
-          props: {
-            node,
-            cascaderContext,
-            onClick: () => {
-              emit('click', node.value, node);
-              handleExpand(node, 'click');
-            },
-            onMouseenter: () => {
-              handleExpand(node, 'hover');
-            },
-            onChange: () => {
-              valueChangeEffect(node, cascaderContext);
+    const renderItem = (node: TreeNode, index: number) => {
+      const optionChild = node.data.content
+        ? getDefaultNode(node.data.content(this.$createElement))
+        : renderTNodeJSXDefault('option', {
+          params: { item: node.data, index },
+        });
+
+      return (
+        <Item
+          key={node.value}
+          node={node}
+          cascaderContext={cascaderContext}
+          {...{
+            props: {
+              node,
+              optionChild,
+              cascaderContext,
+              onClick: () => {
+                emit('click', node.value, node);
+                handleExpand(node, 'click');
+              },
+              onMouseenter: () => {
+                handleExpand(node, 'hover');
+              },
+              onChange: () => {
+                valueChangeEffect(node, cascaderContext);
+              },
             },
-          },
-        }}
-      />
-    );
+          }}
+        />
+      );
+    };
 
     const renderList = (treeNodes: TreeNode[], isFilter = false, segment = true, key = '1') => (
       <ul
@@ -92,7 +102,7 @@ export default defineComponent({
         ]}
         key={key}
       >
-        {treeNodes.map((node: TreeNode) => renderItem(node))}
+        {treeNodes.map((node: TreeNode, index: number) => renderItem(node, index))}
       </ul>
     );