✨(tree): 新增 title 插槽, 允许自定义节点

package/component/src/component/table/TableRow.vue

@@ -105,18 +105,24 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
               whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
             }"
           >
-
-
             <!-- 树表占位与缩进 -->
-            <span v-if="expandSpace && index === 0" :style="{'margin-right': currentIndentSize + 'px'}"></span> 
+            <span
+              v-if="expandSpace && index === 0"
+              :style="{ 'margin-right': currentIndentSize + 'px' }"
+            ></span>
 
-            <span v-if="expandSpace && (!data.children && !slot.expand) && index === 0" class="layui-table-cell-expand-icon-spaced"></span>
+            <span
+              v-if="
+                expandSpace && !data.children && !slot.expand && index === 0
+              "
+              class="layui-table-cell-expand-icon-spaced"
+            ></span>
 
             <lay-icon
-                v-if="(slot.expand || data.children) && index === 0"
-                class="layui-table-cell-expand-icon"
-                :type="expandIconType"
-                @click="handleExpand"
+              v-if="(slot.expand || data.children) && index === 0"
+              class="layui-table-cell-expand-icon"
+              :type="expandIconType"
+              @click="handleExpand"
             ></lay-icon>
 
             <lay-tooltip
@@ -142,11 +148,18 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
                 whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
               }"
             >
-
               <!-- 树表占位与缩进 -->
-              <span v-if="expandSpace && index === 0" :style="{'margin-right': currentIndentSize + 'px'}"></span> 
+              <span
+                v-if="expandSpace && index === 0"
+                :style="{ 'margin-right': currentIndentSize + 'px' }"
+              ></span>
 
-              <span v-if="expandSpace && (!data.children && !slot.expand) && index === 0" class="layui-table-cell-expand-icon-spaced"></span>
+              <span
+                v-if="
+                  expandSpace && !data.children && !slot.expand && index === 0
+                "
+                class="layui-table-cell-expand-icon-spaced"
+              ></span>
 
               <lay-icon
                 v-if="(slot.expand || data.children) && index === 0"
@@ -201,4 +214,4 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
       </table-row>
     </template>
   </template>
-</template>
+</template>

package/component/src/component/tree/TreeNode.vue

@@ -5,13 +5,13 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { StringOrNumber, CustomKey, CustomString } from "./tree.type";
 import { LayIcon } from "@layui/icons-vue";
 import LayCheckbox from "../checkbox/index.vue";
 import { Ref, useSlots } from "vue";
 import { Tree } from "./tree";
 import { Nullable } from "../../types";
 import LayTransition from "../transition/index.vue";
+import { StringOrNumber, CustomKey, CustomString } from "./tree.type";
 
 export interface TreeData {
   id: CustomKey;
@@ -131,7 +131,12 @@ function handleTitleClick(node: TreeData) {
           }"
           @click="handleTitleClick(node)"
         >
-          {{ node.title }}
+          <template v-if="slots.title">
+            <slot name="title" :data="node"></slot>
+          </template> 
+          <template v-else>
+            {{ node.title }}
+          </template>
         </span>
       </div>
     </div>
@@ -149,7 +154,11 @@ function handleTitleClick(node: TreeData) {
           :tree="tree"
           :only-icon-control="onlyIconControl"
           @node-click="recursiveNodeClick"
-        />
+        >
+          <template v-if="slots.title" v-slot:title="{ data }">
+            <slot name="title" :data="data"></slot>
+          </template>
+        </tree-node>
       </div>
     </lay-transition>
   </div>

package/component/src/component/tree/index.vue

@@ -3,19 +3,16 @@ export default {
   name: "LayTree",
 };
 </script>
+
 <script lang="ts" setup>
 import TreeNode from "./TreeNode.vue";
-import { computed } from "vue";
+import { computed, useSlots } from "vue";
 import { useTree } from "./useTree";
 import { TreeData } from "./tree";
+import { StringFn, StringOrNumber, KeysType, EditType } from "./tree.type";
 import "./index.less";
 
-type StringFn = () => string;
-type StringOrNumber = string | number;
-type KeysType = (number | string)[];
-type EditType = boolean | ("add" | "update" | "delete");
-
-interface OriginalTreeData {
+export interface OriginalTreeData {
   title: StringFn | string;
   id: StringOrNumber;
   field: StringFn | string;
@@ -23,7 +20,7 @@ interface OriginalTreeData {
   disabled?: boolean;
 }
 
-interface TreeProps {
+export interface TreeProps {
   checkedKeys?: KeysType;
   data: OriginalTreeData;
   showCheckbox?: boolean;
@@ -61,6 +58,8 @@ const props = withDefaults(defineProps<TreeProps>(), {
   },
 });
 
+const slots = useSlots();
+
 const emit = defineEmits<TreeEmits>();
 
 const className = computed(() => {
@@ -88,6 +87,10 @@ function handleClick(node: TreeData) {
       :collapse-transition="collapseTransition"
       :only-icon-control="onlyIconControl"
       @node-click="handleClick"
-    />
+    >
+      <template v-if="slots.title" v-slot:title="{ data }">
+          <slot name="title" :data="data"></slot>
+      </template>
+    </tree-node>
   </div>
 </template>

package/document/src/document/zh-CN/components/tree.md

@@ -253,6 +253,28 @@ import { ref } from 'vue';
 
 :::
 
+::: title 定义标题
+:::
+
+::: demo 使用 `title` 插槽自定义节点标题
+
+<template>
+  <lay-tree
+    :data="data"
+	collapse-transition
+  >	
+	<template v-slot:title="{ data }">
+		{{ data.id }}
+	</template>
+  </lay-tree>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+</script>
+
+:::
+
 ::: title Tree 属性
 :::
 

package/document/src/view/index.vue

@@ -43,7 +43,7 @@
             rel="nofollow"
             class="site-star"
           >
-            <i class="layui-icon"></i> Star <cite id="getStars">973</cite>
+            <i class="layui-icon"></i> Star <cite id="getStars">1054</cite>
           </a>
           <a
             href="https://gitee.com/layui-vue"