From accbaae6e4e1742dd39a2d9a791777051db5bb87 Mon Sep 17 00:00:00 2001 From: winixt Date: Mon, 14 Apr 2025 18:20:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20tree=20=E6=94=AF=E6=8C=81=E6=A0=B9?= =?UTF-8?q?=E8=8A=82=E7=82=B9=20label=20slot?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tree/props.ts | 2 ++ components/tree/tree.tsx | 31 ++++++++++++------------ components/tree/treeNode.tsx | 24 ++++++++++++------ docs/.vitepress/components/tree/index.md | 6 +++++ 4 files changed, 40 insertions(+), 23 deletions(-) diff --git a/components/tree/props.ts b/components/tree/props.ts index cdc3e867..ebfddef5 100644 --- a/components/tree/props.ts +++ b/components/tree/props.ts @@ -4,6 +4,7 @@ import type { InjectionKey, PropType, Ref, + Slots, } from 'vue'; import { extractPropsDefaultValue } from '../_util/utils'; import type { ExtractPublicPropTypes } from '../_util/interface'; @@ -121,6 +122,7 @@ export type TreeProps = ExtractPublicPropTypes; export interface TreeInst { props: TreeProps; + slots: Slots; selectNode: (value: TreeNodeKey, event: Event) => void; expandNode: (value: TreeNodeKey, event: Event) => void; checkNode: (value: TreeNodeKey, event: Event) => void; diff --git a/components/tree/tree.tsx b/components/tree/tree.tsx index fe752231..17630082 100644 --- a/components/tree/tree.tsx +++ b/components/tree/tree.tsx @@ -41,7 +41,7 @@ export default defineComponent({ 'dragend', 'drop', ], - setup(props, { emit, expose }) { + setup(props, { emit, expose, slots }) { useTheme(); const { nodeList, allKeys } = useData({ props, @@ -123,6 +123,7 @@ export default defineComponent({ provide(TREE_PROVIDE_KEY, { props, + slots, selectNode, expandNode, checkNode, @@ -188,22 +189,22 @@ export default defineComponent({ return () => props.virtualList && !props.inline ? ( - { - return source; - }} - estimateSize={32} - keeps={14} - observeResize={false} - class={prefixCls} - v-slots={{ default: renderDefault }} - /> + { + return source; + }} + estimateSize={32} + keeps={14} + observeResize={false} + class={prefixCls} + v-slots={{ default: renderDefault }} + /> ) : ( -
- {renderChildren(currentData.value)} -
+
+ {renderChildren(currentData.value)} +
); }, }); diff --git a/components/tree/treeNode.tsx b/components/tree/treeNode.tsx index f2c5f288..bbbdec1b 100644 --- a/components/tree/treeNode.tsx +++ b/components/tree/treeNode.tsx @@ -18,6 +18,7 @@ import FEllipsis from '../ellipsis'; import TextHightlight from '../text-highlight'; import { COMPONENT_NAME, INDENT } from './const'; import useTreeNode from './useTreeNode'; +import type { TreeOption } from './interface'; const prefixCls = getPrefixCls('tree-node'); @@ -27,7 +28,7 @@ const treeNodeProps = { required: true, }, label: { - type: [String, Function] as PropType VNodeChild)>, + type: [String, Function] as PropType VNodeChild)>, required: true, }, disabled: { @@ -191,9 +192,9 @@ export default defineComponent({ const icon = isLoading.value ? : ( - + ); return ( @@ -256,10 +257,17 @@ export default defineComponent({ }; const renderLabel = () => { + const node = root.nodeList.get(props.value); if (isFunction(props.label)) { return ( + ); + } else if (isFunction(root.slots.label)) { + return ( + ); } @@ -269,9 +277,9 @@ export default defineComponent({ > {root.props.filterTextHighlight && root.props.filterText ? ( - - {props.label} - + + {props.label} + ) : props.label } diff --git a/docs/.vitepress/components/tree/index.md b/docs/.vitepress/components/tree/index.md index ea039269..45ab8d18 100644 --- a/docs/.vitepress/components/tree/index.md +++ b/docs/.vitepress/components/tree/index.md @@ -125,6 +125,12 @@ app.use(FTree); | expandNode | 展开树节点 | (value) | | checkNode | check 节点 | (value) | +## Tree Slots + +| 名称 | 说明 | +| ------- | ------------------------------ | +| label | treeOption 优先级比这个高 | + ## TreeOption props | 属性 | 说明 | 类型 | 默认值 |