Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3aa194e

Browse files
feat: support node slot
1 parent 56fb410 commit 3aa194e

File tree

4 files changed

+55
-6
lines changed

4 files changed

+55
-6
lines changed

‎examples/Feature.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,30 @@
186186
</div>
187187
</div>
188188

189+
<!-- 自定义节点 -->
190+
<div class="panel">
191+
<div class="header">自定义节点</div>
192+
<div class="body">
193+
<div class="interface">
194+
<div style="height: 300px">
195+
<VTree :data="basicUsage">
196+
<template #node="{ node }">
197+
<button>{{ node.title }}</button>
198+
</template>
199+
</VTree>
200+
</div>
201+
</div>
202+
<div class="desc">
203+
<div class="desc-block">
204+
除了 render,也可以传入 slot 自定义树节点
205+
<pre>
206+
{{ nodeSlotDescText }}
207+
</pre>
208+
</div>
209+
</div>
210+
</div>
211+
</div>
212+
189213
<!-- 远程 -->
190214
<div class="panel">
191215
<div class="header">远程</div>
@@ -418,6 +442,14 @@ export default defineComponent({
418442
showLinePolyline.value = polyline
419443
}
420444
445+
const nodeSlotDescText = `
446+
<VTree :data="basicUsage">
447+
<template #node="{ node }">
448+
<button>{{ node.title }}</button>
449+
</template>
450+
</VTree>
451+
`
452+
421453
return {
422454
// 基本用法
423455
basicUsage,
@@ -454,6 +486,9 @@ export default defineComponent({
454486
showLinePolyline,
455487
onShowLinePolylineBtnClick,
456488
489+
// 自定义节点
490+
nodeSlotDescText,
491+
457492
// 远程
458493
remoteShow,
459494
remoteLoad,

‎src/components/Tree.vue‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,11 @@
2525
@select="handleNodeSelect"
2626
@expand="handleNodeExpand"
2727
@node-drop="handleNodeDrop"
28-
/>
28+
>
29+
<template #default="slotProps">
30+
<slot name="node" v-bind="slotProps"></slot>
31+
</template>
32+
</VTreeNode>
2933
<template v-if="expandAnimation.ready.value">
3034
<Transition
3135
name="vtree-expand-animation"
@@ -54,7 +58,11 @@
5458
@select="handleNodeSelect"
5559
@expand="handleNodeExpand"
5660
@node-drop="handleNodeDrop"
57-
/>
61+
>
62+
<template #default="slotProps">
63+
<slot name="node" v-bind="slotProps"></slot>
64+
</template>
65+
</VTreeNode>
5866
</div>
5967
</div>
6068
</Transition>
@@ -73,7 +81,11 @@
7381
@select="handleNodeSelect"
7482
@expand="handleNodeExpand"
7583
@node-drop="handleNodeDrop"
76-
/>
84+
>
85+
<template #default="slotProps">
86+
<slot name="node" v-bind="slotProps"></slot>
87+
</template>
88+
</VTreeNode>
7789
</template>
7890
<div :style="{ height: `${bottomSpaceHeight}px` }"></div>
7991
</div>

‎src/components/TreeNode.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,10 @@
5252
v-on="dragListeners"
5353
:draggable="draggable && !disableAll && !data?.disabled"
5454
>
55-
<component v-if="renderFunction" :is="renderComponent"></component>
56-
<template v-else>{{ data ? data[titleField] : '' }}</template>
55+
<slot :node="data">
56+
<component v-if="renderFunction" :is="renderComponent"></component>
57+
<template v-else>{{ data ? data[titleField] : '' }}</template>
58+
</slot>
5759
</div>
5860
</div>
5961
<div :class="dropAfterCls"></div>

‎src/components/TreeSearch.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
@set-data="onSetData"
4040
@checked-change="checkedChange"
4141
>
42-
<template v-for="(_, slot) in $slots" :name="slot"v-slot="scope">
42+
<template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
4343
<slot :name="slot" v-bind="scope"></slot>
4444
</template>
4545
</VTree>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /