From 31174a176a737b4255c8902f8c2f5527163a4de6 Mon Sep 17 00:00:00 2001
From: zkh <1650697374@qq.com>
Date: Tue, 28 Nov 2023 11:30:29 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=99=20TreeSelect=20=E6=B7=BB=E5=8A=A0=20t?=
 =?UTF-8?q?itle=20=E6=8F=92=E6=A7=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/treeSelect/index.vue        |  20 +-
 .../document/zh-CN/components/treeSelect.md   | 851 +++++++++++-------
 2 files changed, 527 insertions(+), 344 deletions(-)

diff --git a/package/component/src/component/treeSelect/index.vue b/package/component/src/component/treeSelect/index.vue
index d82637a3..77d960a5 100644
--- a/package/component/src/component/treeSelect/index.vue
+++ b/package/component/src/component/treeSelect/index.vue
@@ -6,8 +6,8 @@ export default {
 
 <script lang="ts" setup>
 import "./index.less";
-import { StyleValue, computed, ref, watch } from "vue";
-import { getNode } from "../../utils/index";
+import { StyleValue, computed, ref, watch, useSlots } from "vue";
+import { getNode } from "../../utils";
 import { TreeSelectSize } from "./interface";
 import { LayIcon } from "@layui/icons-vue";
 import LayInput from "../input/index.vue";
@@ -34,7 +34,9 @@ export interface TreeSelectProps {
 
 export interface TreeSelectEmits {
   (e: "update:modelValue", value: string | string[]): void;
+
   (e: "change", value: string | string[]): void;
+
   (e: "search", value: string | string[]): void;
 }
 
@@ -85,6 +87,9 @@ const checkedKeys = computed({
   },
 });
 
+const slots = useSlots();
+const hasTitleSlot = computed(() => slots.title != null);
+
 watch(
   [selectedValue, treeData],
   () => {
@@ -176,6 +181,7 @@ const handleRemove = (value: any) => {
 
 const filterNodeIds = (node: any) => {
   const nodeIds: any[] = [];
+
   function _findNodeIds(node: any, arr: any[]) {
     arr.push(node.id);
     if (node.children) {
@@ -184,6 +190,7 @@ const filterNodeIds = (node: any) => {
       });
     }
   }
+
   _findNodeIds(node, nodeIds);
   return nodeIds;
 };
@@ -321,8 +328,15 @@ watch(
             :check-strictly="checkStrictly"
             v-model:selectedKey="selectedValue"
             v-model:checkedKeys="checkedKeys"
+            :tail-node-icon="!hasTitleSlot"
             @node-click="handleClick"
-          ></lay-tree>
+          >
+            <template #title="{ data }">
+              <slot name="title" :data="data">
+                {{ data.title }}
+              </slot>
+            </template>
+          </lay-tree>
         </div>
       </template>
     </lay-dropdown>
diff --git a/package/document-component/src/document/zh-CN/components/treeSelect.md b/package/document-component/src/document/zh-CN/components/treeSelect.md
index 5e91937b..59eba187 100644
--- a/package/document-component/src/document/zh-CN/components/treeSelect.md
+++ b/package/document-component/src/document/zh-CN/components/treeSelect.md
@@ -16,8 +16,7 @@
   <lay-tree-select v-model="value1" :data="data1"></lay-tree-select>
 </template>
 
-<script setup>
-import { ref } from 'vue';
+<script setup>import {ref} from "vue";
 
 const value1 = ref(1);
 
@@ -25,150 +24,150 @@ const data1 = ref([]);
 
 setTimeout(() => {
 	data1.value = [{
-	title: '一级1',
+	title: "一级1",
 	id: 1,
-	field: 'name1',
+	field: "name1",
 	children: [{
-		title: '二级1-1 可允许跳转',
+		title: "二级1-1 可允许跳转",
 		id: 3,
-		field: 'name11',
-		href: 'https://www.layui.com/',
+		field: "name11",
+		href: "https://www.layui.com/",
 		children: [{
-			title: '三级1-1-3',
+			title: "三级1-1-3",
 			id: 23,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-3-1',
+				title: "四级1-1-3-1",
 				id: 24,
-				field: '',
+				field: "",
 				children: [{
-					title: '五级1-1-3-1-1',
+					title: "五级1-1-3-1-1",
 					id: 30,
 				},
 				{
-					title: '五级1-1-3-1-2',
+					title: "五级1-1-3-1-2",
 					id: 31,
 				}]
 			}]
 		},
 		{
-			title: '三级1-1-1',
+			title: "三级1-1-1",
 			id: 7,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-1-1 可允许跳转',
+				title: "四级1-1-1-1 可允许跳转",
 				id: 15,
-				href: 'https://www.layui.com/doc/'
+				href: "https://www.layui.com/doc/"
 			}]
 		},
 		{
-			title: '三级1-1-2',
+			title: "三级1-1-2",
 			id: 8,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-2-1',
+				title: "四级1-1-2-1",
 				id: 32,
 			}]
 		}]
 	},
 	{
-		title: '二级1-2',
+		title: "二级1-2",
 		id: 4,
 		spread: true,
 		children: [{
-			title: '三级1-2-1',
+			title: "三级1-2-1",
 			id: 9,
 		},
 		{
-			title: '三级1-2-2',
+			title: "三级1-2-2",
 			id: 10,
 		}]
 	},
 	{
-		title: '二级1-3',
+		title: "二级1-3",
 		id: 20,
-		field: '',
+		field: "",
 		children: [{
-			title: '三级1-3-1',
+			title: "三级1-3-1",
 			id: 21,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级1-3-2',
+			title: "三级1-3-2",
 			id: 22,
-			field: ''
+			field: ""
 		}]
 	}]
 },
 {
-	title: '一级2',
+	title: "一级2",
 	id: 2,
 	children: [{
-		title: '二级2-1',
+		title: "二级2-1",
 		id: 5,
 		spread: true,
 		children: [{
-			title: '三级2-1-1',
+			title: "三级2-1-1",
 			id: 11,
 		},
 		{
-			title: '三级2-1-2',
+			title: "三级2-1-2",
 			id: 12,
 		}]
 	},
 	{
-		title: '二级2-2',
+		title: "二级2-2",
 		id: 6,
 		children: [{
-			title: '三级2-2-1',
+			title: "三级2-2-1",
 			id: 13,
 		},
 		{
-			title: '三级2-2-2',
+			title: "三级2-2-2",
 			id: 14,
 		}]
 	}]
 },
 {
-	title: '一级3',
+	title: "一级3",
 	id: 16,
-	field: '',
+	field: "",
 	children: [{
-		title: '二级3-1',
+		title: "二级3-1",
 		id: 17,
-		field: '',
+		field: "",
 		fixed: true,
 		children: [{
-			title: '三级3-1-1',
+			title: "三级3-1-1",
 			id: 18,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级3-1-2',
+			title: "三级3-1-2",
 			id: 19,
-			field: ''
+			field: ""
 		}]
 	},
 	{
-		title: '二级3-2',
+		title: "二级3-2",
 		id: 27,
-		field: '',
+		field: "",
 		children: [{
-			title: '三级3-2-1',
+			title: "三级3-2-1",
 			id: 28,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级3-2-2',
+			title: "三级3-2-2",
 			id: 29,
-			field: ''
+			field: ""
 		}]
 	}]
-}]
-}, 2000)
+}];
+}, 2000);
 
 function handleClick(node) {
-  console.log(node)
+  console.log(node);
 }
 </script>
 
@@ -184,166 +183,166 @@ function handleClick(node) {
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const value2 = ref([23,5555]);
 
 const data2 = ref([{
-	title: '一级1',
+	title: "一级1",
 	id: 1,
-	field: 'name1',
+	field: "name1",
 	checked: true,
 	spread: true,
 	children: [{
-		title: '二级1-1 可允许跳转',
+		title: "二级1-1 可允许跳转",
 		id: 3,
-		field: 'name11',
-		href: 'https://www.layui.com/',
+		field: "name11",
+		href: "https://www.layui.com/",
 		children: [{
-			title: '三级1-1-3',
+			title: "三级1-1-3",
 			id: 23,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-3-1',
+				title: "四级1-1-3-1",
 				id: 24,
-				field: '',
+				field: "",
 				children: [{
-					title: '五级1-1-3-1-1',
+					title: "五级1-1-3-1-1",
 					id: 30,
-					field: ''
+					field: ""
 				},
 				{
-					title: '五级1-1-3-1-2',
+					title: "五级1-1-3-1-2",
 					id: 31,
-					field: ''
+					field: ""
 				}]
 			}]
 		},
 		{
-			title: '三级1-1-1',
+			title: "三级1-1-1",
 			id: 7,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-1-1 可允许跳转',
+				title: "四级1-1-1-1 可允许跳转",
 				id: 15,
-				field: '',
-				href: 'https://www.layui.com/doc/'
+				field: "",
+				href: "https://www.layui.com/doc/"
 			}]
 		},
 		{
-			title: '三级1-1-2',
+			title: "三级1-1-2",
 			id: 8,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-2-1',
+				title: "四级1-1-2-1",
 				id: 32,
-				field: ''
+				field: ""
 			}]
 		}]
 	},
 	{
-		title: '二级1-2',
+		title: "二级1-2",
 		id: 4,
 		spread: true,
 		children: [{
-			title: '三级1-2-1',
+			title: "三级1-2-1",
 			id: 9,
-			field: '',
+			field: "",
 			disabled: true
 		},
 		{
-			title: '三级1-2-2',
+			title: "三级1-2-2",
 			id: 10,
-			field: ''
+			field: ""
 		}]
 	},
 	{
-		title: '二级1-3',
+		title: "二级1-3",
 		id: 20,
-		field: '',
+		field: "",
 		children: [{
-			title: '三级1-3-1',
+			title: "三级1-3-1",
 			id: 21,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级1-3-2',
+			title: "三级1-3-2",
 			id: 22,
-			field: ''
+			field: ""
 		}]
 	}]
 },
 {
-	title: '一级2',
+	title: "一级2",
 	id: 2,
-	field: '',
+	field: "",
 	spread: true,
 	children: [{
-		title: '二级2-1',
+		title: "二级2-1",
 		id: 5,
-		field: '',
+		field: "",
 		spread: true,
 		children: [{
-			title: '三级2-1-1',
+			title: "三级2-1-1",
 			id: 11,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级2-1-2',
+			title: "三级2-1-2",
 			id: 12,
-			field: ''
+			field: ""
 		}]
 	},
 	{
-		title: '二级2-2',
+		title: "二级2-2",
 		id: 6,
-		field: '',
+		field: "",
 		children: [{
-			title: '三级2-2-1',
+			title: "三级2-2-1",
 			id: 13,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级2-2-2',
+			title: "三级2-2-2",
 			id: 14,
-			field: '',
+			field: "",
 			disabled: true
 		}]
 	}]
 },
 {
-	title: '一级3',
+	title: "一级3",
 	id: 16,
-	field: '',
+	field: "",
 	children: [{
-		title: '二级3-1',
+		title: "二级3-1",
 		id: 17,
-		field: '',
+		field: "",
 		fixed: true,
 		children: [{
-			title: '三级3-1-1',
+			title: "三级3-1-1",
 			id: 18,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级3-1-2',
+			title: "三级3-1-2",
 			id: 19,
-			field: ''
+			field: ""
 		}]
 	},
 	{
-		title: '二级3-2',
+		title: "二级3-2",
 		id: 27,
-		field: '',
+		field: "",
 		children: [{
-			title: '三级3-2-1',
+			title: "三级3-2-1",
 			id: 28,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级3-2-2',
+			title: "三级3-2-2",
 			id: 29,
-			field: ''
+			field: ""
 		}]
 	}]
 }]);
@@ -361,166 +360,166 @@ const data2 = ref([{
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const value3 = ref([]);
 
 const data3 = ref([{
-	title: '一级1',
+	title: "一级1",
 	id: 1,
-	field: 'name1',
+	field: "name1",
 	checked: true,
 	spread: true,
 	children: [{
-		title: '二级1-1 可允许跳转',
+		title: "二级1-1 可允许跳转",
 		id: 3,
-		field: 'name11',
-		href: 'https://www.layui.com/',
+		field: "name11",
+		href: "https://www.layui.com/",
 		children: [{
-			title: '三级1-1-3',
+			title: "三级1-1-3",
 			id: 23,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-3-1',
+				title: "四级1-1-3-1",
 				id: 24,
-				field: '',
+				field: "",
 				children: [{
-					title: '五级1-1-3-1-1',
+					title: "五级1-1-3-1-1",
 					id: 30,
-					field: ''
+					field: ""
 				},
 				{
-					title: '五级1-1-3-1-2',
+					title: "五级1-1-3-1-2",
 					id: 31,
-					field: ''
+					field: ""
 				}]
 			}]
 		},
 		{
-			title: '三级1-1-1',
+			title: "三级1-1-1",
 			id: 7,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-1-1 可允许跳转',
+				title: "四级1-1-1-1 可允许跳转",
 				id: 15,
-				field: '',
-				href: 'https://www.layui.com/doc/'
+				field: "",
+				href: "https://www.layui.com/doc/"
 			}]
 		},
 		{
-			title: '三级1-1-2',
+			title: "三级1-1-2",
 			id: 8,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-2-1',
+				title: "四级1-1-2-1",
 				id: 32,
-				field: ''
+				field: ""
 			}]
 		}]
 	},
 	{
-		title: '二级1-2',
+		title: "二级1-2",
 		id: 4,
 		spread: true,
 		children: [{
-			title: '三级1-2-1',
+			title: "三级1-2-1",
 			id: 9,
-			field: '',
+			field: "",
 			disabled: true
 		},
 		{
-			title: '三级1-2-2',
+			title: "三级1-2-2",
 			id: 10,
-			field: ''
+			field: ""
 		}]
 	},
 	{
-		title: '二级1-3',
+		title: "二级1-3",
 		id: 20,
-		field: '',
+		field: "",
 		children: [{
-			title: '三级1-3-1',
+			title: "三级1-3-1",
 			id: 21,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级1-3-2',
+			title: "三级1-3-2",
 			id: 22,
-			field: ''
+			field: ""
 		}]
 	}]
 },
 {
-	title: '一级2',
+	title: "一级2",
 	id: 2,
-	field: '',
+	field: "",
 	spread: true,
 	children: [{
-		title: '二级2-1',
+		title: "二级2-1",
 		id: 5,
-		field: '',
+		field: "",
 		spread: true,
 		children: [{
-			title: '三级2-1-1',
+			title: "三级2-1-1",
 			id: 11,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级2-1-2',
+			title: "三级2-1-2",
 			id: 12,
-			field: ''
+			field: ""
 		}]
 	},
 	{
-		title: '二级2-2',
+		title: "二级2-2",
 		id: 6,
-		field: '',
+		field: "",
 		children: [{
-			title: '三级2-2-1',
+			title: "三级2-2-1",
 			id: 13,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级2-2-2',
+			title: "三级2-2-2",
 			id: 14,
-			field: '',
+			field: "",
 			disabled: true
 		}]
 	}]
 },
 {
-	title: '一级3',
+	title: "一级3",
 	id: 16,
-	field: '',
+	field: "",
 	children: [{
-		title: '二级3-1',
+		title: "二级3-1",
 		id: 17,
-		field: '',
+		field: "",
 		fixed: true,
 		children: [{
-			title: '三级3-1-1',
+			title: "三级3-1-1",
 			id: 18,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级3-1-2',
+			title: "三级3-1-2",
 			id: 19,
-			field: ''
+			field: ""
 		}]
 	},
 	{
-		title: '二级3-2',
+		title: "二级3-2",
 		id: 27,
-		field: '',
+		field: "",
 		children: [{
-			title: '三级3-2-1',
+			title: "三级3-2-1",
 			id: 28,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级3-2-2',
+			title: "三级3-2-2",
 			id: 29,
-			field: ''
+			field: ""
 		}]
 	}]
 }]);
@@ -538,148 +537,148 @@ const data3 = ref([{
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const value4 = ref([]);
 
 const data4 = ref([{
-	title: '一级1',
+	title: "一级1",
 	id: 1,
-	field: 'name1',
+	field: "name1",
 	children: [{
-		title: '二级1-1 可允许跳转',
+		title: "二级1-1 可允许跳转",
 		id: 3,
-		field: 'name11',
-		href: 'https://www.layui.com/',
+		field: "name11",
+		href: "https://www.layui.com/",
 		children: [{
-			title: '三级1-1-3',
+			title: "三级1-1-3",
 			id: 23,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-3-1',
+				title: "四级1-1-3-1",
 				id: 24,
-				field: '',
+				field: "",
 				children: [{
-					title: '五级1-1-3-1-1',
+					title: "五级1-1-3-1-1",
 					id: 30,
 				},
 				{
-					title: '五级1-1-3-1-2',
+					title: "五级1-1-3-1-2",
 					id: 31,
 				}]
 			}]
 		},
 		{
-			title: '三级1-1-1',
+			title: "三级1-1-1",
 			id: 7,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-1-1 可允许跳转',
+				title: "四级1-1-1-1 可允许跳转",
 				id: 15,
-				href: 'https://www.layui.com/doc/'
+				href: "https://www.layui.com/doc/"
 			}]
 		},
 		{
-			title: '三级1-1-2',
+			title: "三级1-1-2",
 			id: 8,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-2-1',
+				title: "四级1-1-2-1",
 				id: 32,
 			}]
 		}]
 	},
 	{
-		title: '二级1-2',
+		title: "二级1-2",
 		id: 4,
 		spread: true,
 		children: [{
-			title: '三级1-2-1',
+			title: "三级1-2-1",
 			id: 9,
 		},
 		{
-			title: '三级1-2-2',
+			title: "三级1-2-2",
 			id: 10,
 		}]
 	},
 	{
-		title: '二级1-3',
+		title: "二级1-3",
 		id: 20,
-		field: '',
+		field: "",
 		children: [{
-			title: '三级1-3-1',
+			title: "三级1-3-1",
 			id: 21,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级1-3-2',
+			title: "三级1-3-2",
 			id: 22,
-			field: ''
+			field: ""
 		}]
 	}]
 },
 {
-	title: '一级2',
+	title: "一级2",
 	id: 2,
 	children: [{
-		title: '二级2-1',
+		title: "二级2-1",
 		id: 5,
 		spread: true,
 		children: [{
-			title: '三级2-1-1',
+			title: "三级2-1-1",
 			id: 11,
 		},
 		{
-			title: '三级2-1-2',
+			title: "三级2-1-2",
 			id: 12,
 		}]
 	},
 	{
-		title: '二级2-2',
+		title: "二级2-2",
 		id: 6,
 		children: [{
-			title: '三级2-2-1',
+			title: "三级2-2-1",
 			id: 13,
 		},
 		{
-			title: '三级2-2-2',
+			title: "三级2-2-2",
 			id: 14,
 		}]
 	}]
 },
 {
-	title: '一级3',
+	title: "一级3",
 	id: 16,
-	field: '',
+	field: "",
 	children: [{
-		title: '二级3-1',
+		title: "二级3-1",
 		id: 17,
-		field: '',
+		field: "",
 		fixed: true,
 		children: [{
-			title: '三级3-1-1',
+			title: "三级3-1-1",
 			id: 18,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级3-1-2',
+			title: "三级3-1-2",
 			id: 19,
-			field: ''
+			field: ""
 		}]
 	},
 	{
-		title: '二级3-2',
+		title: "二级3-2",
 		id: 27,
-		field: '',
+		field: "",
 		children: [{
-			title: '三级3-2-1',
+			title: "三级3-2-1",
 			id: 28,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级3-2-2',
+			title: "三级3-2-2",
 			id: 29,
-			field: ''
+			field: ""
 		}]
 	}]
 }]);
@@ -697,148 +696,148 @@ const data4 = ref([{
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const value5 = ref();
 
 const data5 = ref([{
-	title: '一级1',
+	title: "一级1",
 	id: 1,
-	field: 'name1',
+	field: "name1",
 	children: [{
-		title: '二级1-1 可允许跳转',
+		title: "二级1-1 可允许跳转",
 		id: 3,
-		field: 'name11',
-		href: 'https://www.layui.com/',
+		field: "name11",
+		href: "https://www.layui.com/",
 		children: [{
-			title: '三级1-1-3',
+			title: "三级1-1-3",
 			id: 23,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-3-1',
+				title: "四级1-1-3-1",
 				id: 24,
-				field: '',
+				field: "",
 				children: [{
-					title: '五级1-1-3-1-1',
+					title: "五级1-1-3-1-1",
 					id: 30,
 				},
 				{
-					title: '五级1-1-3-1-2',
+					title: "五级1-1-3-1-2",
 					id: 31,
 				}]
 			}]
 		},
 		{
-			title: '三级1-1-1',
+			title: "三级1-1-1",
 			id: 7,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-1-1 可允许跳转',
+				title: "四级1-1-1-1 可允许跳转",
 				id: 15,
-				href: 'https://www.layui.com/doc/'
+				href: "https://www.layui.com/doc/"
 			}]
 		},
 		{
-			title: '三级1-1-2',
+			title: "三级1-1-2",
 			id: 8,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-2-1',
+				title: "四级1-1-2-1",
 				id: 32,
 			}]
 		}]
 	},
 	{
-		title: '二级1-2',
+		title: "二级1-2",
 		id: 4,
 		spread: true,
 		children: [{
-			title: '三级1-2-1',
+			title: "三级1-2-1",
 			id: 9,
 		},
 		{
-			title: '三级1-2-2',
+			title: "三级1-2-2",
 			id: 10,
 		}]
 	},
 	{
-		title: '二级1-3',
+		title: "二级1-3",
 		id: 20,
-		field: '',
+		field: "",
 		children: [{
-			title: '三级1-3-1',
+			title: "三级1-3-1",
 			id: 21,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级1-3-2',
+			title: "三级1-3-2",
 			id: 22,
-			field: ''
+			field: ""
 		}]
 	}]
 },
 {
-	title: '一级2',
+	title: "一级2",
 	id: 2,
 	children: [{
-		title: '二级2-1',
+		title: "二级2-1",
 		id: 5,
 		spread: true,
 		children: [{
-			title: '三级2-1-1',
+			title: "三级2-1-1",
 			id: 11,
 		},
 		{
-			title: '三级2-1-2',
+			title: "三级2-1-2",
 			id: 12,
 		}]
 	},
 	{
-		title: '二级2-2',
+		title: "二级2-2",
 		id: 6,
 		children: [{
-			title: '三级2-2-1',
+			title: "三级2-2-1",
 			id: 13,
 		},
 		{
-			title: '三级2-2-2',
+			title: "三级2-2-2",
 			id: 14,
 		}]
 	}]
 },
 {
-	title: '一级3',
+	title: "一级3",
 	id: 16,
-	field: '',
+	field: "",
 	children: [{
-		title: '二级3-1',
+		title: "二级3-1",
 		id: 17,
-		field: '',
+		field: "",
 		fixed: true,
 		children: [{
-			title: '三级3-1-1',
+			title: "三级3-1-1",
 			id: 18,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级3-1-2',
+			title: "三级3-1-2",
 			id: 19,
-			field: ''
+			field: ""
 		}]
 	},
 	{
-		title: '二级3-2',
+		title: "二级3-2",
 		id: 27,
-		field: '',
+		field: "",
 		children: [{
-			title: '三级3-2-1',
+			title: "三级3-2-1",
 			id: 28,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级3-2-2',
+			title: "三级3-2-2",
 			id: 29,
-			field: ''
+			field: ""
 		}]
 	}]
 }]);
@@ -856,152 +855,322 @@ const data5 = ref([{
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const value5 = ref([]);
 
 const change = (value) => {
 	console.log(value);
-}
+};
 
 const data5 = ref([{
-	title: '一级1',
+	title: "一级1",
+	id: 1,
+	field: "name1",
+	children: [{
+		title: "二级1-1 可允许跳转",
+		id: 3,
+		field: "name11",
+		href: "https://www.layui.com/",
+		children: [{
+			title: "三级1-1-3",
+			id: 23,
+			field: "",
+			children: [{
+				title: "四级1-1-3-1",
+				id: 24,
+				field: "",
+				children: [{
+					title: "五级1-1-3-1-1",
+					id: 30,
+				},
+				{
+					title: "五级1-1-3-1-2",
+					id: 31,
+				}]
+			}]
+		},
+		{
+			title: "三级1-1-1",
+			id: 7,
+			field: "",
+			children: [{
+				title: "四级1-1-1-1 可允许跳转",
+				id: 15,
+				href: "https://www.layui.com/doc/"
+			}]
+		},
+		{
+			title: "三级1-1-2",
+			id: 8,
+			field: "",
+			children: [{
+				title: "四级1-1-2-1",
+				id: 32,
+			}]
+		}]
+	},
+	{
+		title: "二级1-2",
+		id: 4,
+		spread: true,
+		children: [{
+			title: "三级1-2-1",
+			id: 9,
+		},
+		{
+			title: "三级1-2-2",
+			id: 10,
+		}]
+	},
+	{
+		title: "二级1-3",
+		id: 20,
+		field: "",
+		children: [{
+			title: "三级1-3-1",
+			id: 21,
+			field: ""
+		},
+		{
+			title: "三级1-3-2",
+			id: 22,
+			field: ""
+		}]
+	}]
+},
+{
+	title: "一级2",
+	id: 2,
+	children: [{
+		title: "二级2-1",
+		id: 5,
+		spread: true,
+		children: [{
+			title: "三级2-1-1",
+			id: 11,
+		},
+		{
+			title: "三级2-1-2",
+			id: 12,
+		}]
+	},
+	{
+		title: "二级2-2",
+		id: 6,
+		children: [{
+			title: "三级2-2-1",
+			id: 13,
+		},
+		{
+			title: "三级2-2-2",
+			id: 14,
+		}]
+	}]
+},
+{
+	title: "一级3",
+	id: 16,
+	field: "",
+	children: [{
+		title: "二级3-1",
+		id: 17,
+		field: "",
+		fixed: true,
+		children: [{
+			title: "三级3-1-1",
+			id: 18,
+			field: ""
+		},
+		{
+			title: "三级3-1-2",
+			id: 19,
+			field: ""
+		}]
+	},
+	{
+		title: "二级3-2",
+		id: 27,
+		field: "",
+		children: [{
+			title: "三级3-2-1",
+			id: 28,
+			field: ""
+		},
+		{
+			title: "三级3-2-2",
+			id: 29,
+			field: ""
+		}]
+	}]
+}]);
+</script>
+
+:::
+
+::: title Title插槽
+:::
+
+::: demo 通过 `change` 属性开启清空操作。
+
+<template>
+  <lay-tree-select v-model="value6" :data="data6" placeholder="请选择" @change="change" :multiple="true">
+    <template #title="{data}">
+        <div>
+            <lay-icon type="layui-icon-addition"/>
+            {{ data.title }}
+        </div>
+    </template>
+  </lay-tree-select>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value6 = ref([]);
+
+const change = (value) => {
+	console.log(value);
+};
+
+const data6 = ref([{
+	title: "一级1",
 	id: 1,
-	field: 'name1',
+	field: "name1",
 	children: [{
-		title: '二级1-1 可允许跳转',
+		title: "二级1-1 可允许跳转",
 		id: 3,
-		field: 'name11',
-		href: 'https://www.layui.com/',
+		field: "name11",
+		href: "https://www.layui.com/",
 		children: [{
-			title: '三级1-1-3',
+			title: "三级1-1-3",
 			id: 23,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-3-1',
+				title: "四级1-1-3-1",
 				id: 24,
-				field: '',
+				field: "",
 				children: [{
-					title: '五级1-1-3-1-1',
+					title: "五级1-1-3-1-1",
 					id: 30,
 				},
 				{
-					title: '五级1-1-3-1-2',
+					title: "五级1-1-3-1-2",
 					id: 31,
 				}]
 			}]
 		},
 		{
-			title: '三级1-1-1',
+			title: "三级1-1-1",
 			id: 7,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-1-1 可允许跳转',
+				title: "四级1-1-1-1 可允许跳转",
 				id: 15,
-				href: 'https://www.layui.com/doc/'
+				href: "https://www.layui.com/doc/"
 			}]
 		},
 		{
-			title: '三级1-1-2',
+			title: "三级1-1-2",
 			id: 8,
-			field: '',
+			field: "",
 			children: [{
-				title: '四级1-1-2-1',
+				title: "四级1-1-2-1",
 				id: 32,
 			}]
 		}]
 	},
 	{
-		title: '二级1-2',
+		title: "二级1-2",
 		id: 4,
 		spread: true,
 		children: [{
-			title: '三级1-2-1',
+			title: "三级1-2-1",
 			id: 9,
 		},
 		{
-			title: '三级1-2-2',
+			title: "三级1-2-2",
 			id: 10,
 		}]
 	},
 	{
-		title: '二级1-3',
+		title: "二级1-3",
 		id: 20,
-		field: '',
+		field: "",
 		children: [{
-			title: '三级1-3-1',
+			title: "三级1-3-1",
 			id: 21,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级1-3-2',
+			title: "三级1-3-2",
 			id: 22,
-			field: ''
+			field: ""
 		}]
 	}]
 },
 {
-	title: '一级2',
+	title: "一级2",
 	id: 2,
 	children: [{
-		title: '二级2-1',
+		title: "二级2-1",
 		id: 5,
 		spread: true,
 		children: [{
-			title: '三级2-1-1',
+			title: "三级2-1-1",
 			id: 11,
 		},
 		{
-			title: '三级2-1-2',
+			title: "三级2-1-2",
 			id: 12,
 		}]
 	},
 	{
-		title: '二级2-2',
+		title: "二级2-2",
 		id: 6,
 		children: [{
-			title: '三级2-2-1',
+			title: "三级2-2-1",
 			id: 13,
 		},
 		{
-			title: '三级2-2-2',
+			title: "三级2-2-2",
 			id: 14,
 		}]
 	}]
 },
 {
-	title: '一级3',
+	title: "一级3",
 	id: 16,
-	field: '',
+	field: "",
 	children: [{
-		title: '二级3-1',
+		title: "二级3-1",
 		id: 17,
-		field: '',
+		field: "",
 		fixed: true,
 		children: [{
-			title: '三级3-1-1',
+			title: "三级3-1-1",
 			id: 18,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级3-1-2',
+			title: "三级3-1-2",
 			id: 19,
-			field: ''
+			field: ""
 		}]
 	},
 	{
-		title: '二级3-2',
+		title: "二级3-2",
 		id: 27,
-		field: '',
+		field: "",
 		children: [{
-			title: '三级3-2-1',
+			title: "三级3-2-1",
 			id: 28,
-			field: ''
+			field: ""
 		},
 		{
-			title: '三级3-2-2',
+			title: "三级3-2-2",
 			id: 29,
-			field: ''
+			field: ""
 		}]
 	}]
 }]);
@@ -1014,19 +1183,19 @@ const data5 = ref([{
 
 ::: table
 
-| 属性                             | 描述                                      | 类型          | 可选值          |默认值          |
-| -------------------------------- | ---------------------------------------- | --------------- | --------------- | --------------- |
-| v-model                          | 选中值                                    |  --            | --            | --            |
-| data                             | 树数据                                    |  --            | --            | --            |
-| multiple                         | 开启多选                                  |  --            | --            | --            |
-| allow-clear                      | 允许清空                                  |  --            | --            | --            |
-| disabled                         | 禁用选择                                  |  --            | --            | --            |
-| placeholder                      | 输入提示                                  |  --            | --            | --            |
-| checkStrictly                    | 禁用级联复选                              |  --            | --            | --            |
-| collapseTagsTooltip              | 折叠提示                                  |  --            | --            | --            |
-| checkStrictly                    | 禁用级联复选                              |  --            | --            | --            |
-| minCollapsedNum                  | 超过指定标签后开启折叠                     |  --            | --            | --            |
-| size                             | 尺寸大小                                  |  --            | --            | --            |
+| 属性                  | 描述          | 类型 | 可选值 | 默认值 |
+|---------------------|-------------|----|-----|-----|
+| v-model             | 选中值         | -- | --  | --  |
+| data                | 树数据         | -- | --  | --  |
+| multiple            | 开启多选        | -- | --  | --  |
+| allow-clear         | 允许清空        | -- | --  | --  |
+| disabled            | 禁用选择        | -- | --  | --  |
+| placeholder         | 输入提示        | -- | --  | --  |
+| checkStrictly       | 禁用级联复选      | -- | --  | --  |
+| collapseTagsTooltip | 折叠提示        | -- | --  | --  |
+| checkStrictly       | 禁用级联复选      | -- | --  | --  |
+| minCollapsedNum     | 超过指定标签后开启折叠 | -- | --  | --  |
+| size                | 尺寸大小        | -- | --  | --  |
 
 :::
 
@@ -1035,9 +1204,9 @@ const data5 = ref([{
 
 ::: table
 
-| 名称       | 描述     | 参数 |
-| ---------- | --------------- | --------------- |
-| change     | 选中值变化事件   | --              |
+| 名称     | 描述      | 参数 |
+|--------|---------|----|
+| change | 选中值变化事件 | -- |
 
 :::
 
-- 
Gitee