feat: support node slot

Author: ChuChencheng

examples/Feature.vue

@@ -186,6 +186,30 @@
       </div>
     </div>
 
+    <!-- 自定义节点 -->
+    <div class="panel">
+      <div class="header">自定义节点</div>
+      <div class="body">
+        <div class="interface">
+          <div style="height: 300px">
+            <VTree :data="basicUsage">
+              <template #node="{ node }">
+                <button>{{ node.title }}</button>
+              </template>
+            </VTree>
+          </div>
+        </div>
+        <div class="desc">
+          <div class="desc-block">
+            除了 render，也可以传入 slot 自定义树节点
+            <pre>
+              {{ nodeSlotDescText }}
+            </pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- 远程 -->
     <div class="panel">
       <div class="header">远程</div>
@@ -418,6 +442,14 @@ export default defineComponent({
       showLinePolyline.value = polyline
     }
 
+    const nodeSlotDescText = `
+<VTree :data="basicUsage">
+  <template #node="{ node }">
+    <button>{{ node.title }}</button>
+  </template>
+</VTree>
+    `
+
     return {
       // 基本用法
       basicUsage,
@@ -454,6 +486,9 @@ export default defineComponent({
       showLinePolyline,
       onShowLinePolylineBtnClick,
 
+      // 自定义节点
+      nodeSlotDescText,
+
       // 远程
       remoteShow,
       remoteLoad,

src/components/Tree.vue

@@ -25,7 +25,11 @@
           @select="handleNodeSelect"
           @expand="handleNodeExpand"
           @node-drop="handleNodeDrop"
-        />
+        >
+          <template #default="slotProps">
+            <slot name="node" v-bind="slotProps"></slot>
+          </template>
+        </VTreeNode>
         <template v-if="expandAnimation.ready.value">
           <Transition
             name="vtree-expand-animation"
@@ -54,7 +58,11 @@
                   @select="handleNodeSelect"
                   @expand="handleNodeExpand"
                   @node-drop="handleNodeDrop"
-                />
+                >
+                  <template #default="slotProps">
+                    <slot name="node" v-bind="slotProps"></slot>
+                  </template>
+                </VTreeNode>
               </div>
             </div>
           </Transition>
@@ -73,7 +81,11 @@
             @select="handleNodeSelect"
             @expand="handleNodeExpand"
             @node-drop="handleNodeDrop"
-          />
+          >
+            <template #default="slotProps">
+              <slot name="node" v-bind="slotProps"></slot>
+            </template>
+          </VTreeNode>
         </template>
         <div :style="{ height: `${bottomSpaceHeight}px` }"></div>
       </div>

src/components/TreeNode.vue

@@ -52,8 +52,10 @@
           v-on="dragListeners"
           :draggable="draggable && !disableAll && !data?.disabled"
         >
-          <component v-if="renderFunction" :is="renderComponent"></component>
-          <template v-else>{{ data ? data[titleField] : '' }}</template>
+          <slot :node="data">
+            <component v-if="renderFunction" :is="renderComponent"></component>
+            <template v-else>{{ data ? data[titleField] : '' }}</template>
+          </slot>
         </div>
       </div>
       <div :class="dropAfterCls"></div>

src/components/TreeSearch.vue

@@ -39,7 +39,7 @@
         @set-data="onSetData"
         @checked-change="checkedChange"
       >
-        <template v-for="(_, slot) in $slots" :name="slot" v-slot="scope">
+        <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
           <slot :name="slot" v-bind="scope"></slot>
         </template>
       </VTree>