🐛(component): 修复 tree 组件 title 插槽不生效的问题

package/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.5.1",
+  "version": "1.6.0-alpha.2",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

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

@@ -172,7 +172,9 @@ const renderRowClassName = (data: any, index: number) => {
   return props.rowClassName(data, index);
 };
 
-const childrenIndentSize = computed(() => props.currentIndentSize + props.indentSize);
+const childrenIndentSize = computed(
+  () => props.currentIndentSize + props.indentSize
+);
 
 const renderFixedStyle = (column: any, columnIndex: number) => {
   if (column.fixed) {

package/component/src/component/table/index.vue

@@ -504,11 +504,13 @@ props.columns.map((value: any) => {
 
 const currentIndentSize = ref(0);
 const childrenExpandSpace = computed(() => {
-  return props.dataSource.find((value: any) => {
+  return (
-    if (value[props.childrenColumnName]) {
+    props.dataSource.find((value: any) => {
-      return true; 
+      if (value[props.childrenColumnName]) {
-    }
+        return true;
-  }) != undefined;
+      }
+    }) != undefined
+  );
 });
 
 /**

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

@@ -31,6 +31,7 @@ export interface TreeNodeProps {
   nodeList: TreeData[];
   showCheckbox: boolean;
   showLine: boolean;
+  selectedKey: any;
   checkStrictly: boolean;
   collapseTransition: boolean;
   onlyIconControl: boolean;
@@ -122,7 +123,7 @@ const isChildAllSelected = computed(() => {
     return res;
   }
 
-  return function (node: TreeData): boolean {
+  return (node: TreeData): boolean => {
     if (props.checkStrictly) {
       return false;
     } else {
@@ -157,7 +158,7 @@ const isChildAllSelected = computed(() => {
           />
         </span>
         <lay-checkbox
-          value="miss"
+          value=""
           skin="primary"
           :modelValue="node.isChecked"
           :disabled="node.isDisabled"
@@ -169,15 +170,11 @@ const isChildAllSelected = computed(() => {
           :class="{
             'layui-tree-txt': true,
             'layui-disabled': node.isDisabled,
+            'layui-this': selectedKey === node.id
           }"
           @click.stop="handleTitleClick(node)"
         >
-          <template v-if="slots.title">
+          <slot name="title" :data="node">{{ node.title }}</slot>
-            <slot name="title" :data="node"></slot>
-          </template>
-          <template v-else>
-            {{ node.title }}
-          </template>
         </span>
       </div>
     </div>
@@ -192,13 +189,14 @@ const isChildAllSelected = computed(() => {
           :node-list="node.children"
           :show-checkbox="showCheckbox"
           :show-line="showLine"
+          :selected-key="selectedKey"
           :collapse-transition="collapseTransition"
           :checkStrictly="checkStrictly"
           :only-icon-control="onlyIconControl"
           @node-click="recursiveNodeClick"
         >
-          <template v-if="slots.title">
+          <template v-if="$slots.title" v-slot:title="{ data }">
-            <slot name="title" :data="node"></slot>
+            <slot name="title" :data="data"></slot>
           </template>
         </tree-node>
       </div>

package/component/src/component/tree/index.less

@@ -13,6 +13,10 @@
   position: relative;
 }
 
+.layui-tree-txt.layui-this {
+  color: var(--global-checked-color)!important;
+}
+
 .layui-tree-pack {
   display: none;
   padding-left: 20px;

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

@@ -22,6 +22,7 @@ export interface OriginalTreeData {
 
 export interface TreeProps {
   checkedKeys?: KeysType;
+  selectedKey?: any;
   data: OriginalTreeData;
   showCheckbox?: boolean;
   checkStrictly?: boolean;
@@ -54,6 +55,7 @@ const props = withDefaults(defineProps<TreeProps>(), {
   onlyIconControl: false,
   disabled: false,
   showLine: true,
+  selectedKey: "",
   replaceFields: () => {
     return {
       id: "id",
@@ -136,14 +138,15 @@ function handleClick(node: TreeData) {
       :node-list="nodeList"
       :show-checkbox="showCheckbox"
       :show-line="showLine"
+      :selectedKey="selectedKey"
       :check-strictly="checkStrictly"
       :collapse-transition="collapseTransition"
       :only-icon-control="onlyIconControl"
       @node-click="handleClick"
     >
-      <template v-if="slots.title">
+        <template v-if="$slots.title" v-slot:title="{ data }">
-        <slot name="title" :data="data"></slot>
+          <slot name="title" :data="data"></slot>
-      </template>
+        </template>
     </tree-node>
   </div>
 </template>

package/component/src/component/tree/tree.ts

@@ -133,33 +133,36 @@ class Tree {
     return node;
   }
 
-  treeForeach (tree: any, func: Function) {
+  treeForeach(tree: any, func: Function) {
     tree.forEach((data: any) => {
-      data.children && this.treeForeach(data.children, func) // 遍历子树
+      data.children && this.treeForeach(data.children, func); // 遍历子树
-      func(data)
+      func(data);
-    })
+    });
   }
 
   setChildrenChecked(checked: boolean, nodes: TreeData[]) {
     var ableCount = 0;
     var checkCount = 0;
     const len = nodes.length;
-    this.treeForeach(nodes ,(node: any) => {
+    this.treeForeach(nodes, (node: any) => {
-      if(!node.isDisabled) {
+      if (!node.isDisabled) {
         ableCount = ableCount + 1;
-        if(node.isChecked) {
+        if (node.isChecked) {
           checkCount = checkCount + 1;
         }
       }
-    })
+    });
-    checkCount < ableCount ? checked = true : checked = false;
+    checkCount < ableCount ? (checked = true) : (checked = false);
     for (let i = 0; i < len; i++) {
-      if(!nodes[i].isDisabled || (nodes[i].isDisabled && nodes[i].children.length > 0)) {
+      if (
+        !nodes[i].isDisabled ||
+        (nodes[i].isDisabled && nodes[i].children.length > 0)
+      ) {
         nodes[i].isChecked = checked;
       }
       nodes[i].children &&
-      nodes[i].children.length > 0 &&
+        nodes[i].children.length > 0 &&
-      this.setChildrenChecked(checked, nodes[i].children);
+        this.setChildrenChecked(checked, nodes[i].children);
     }
   }
 

package/component/src/component/tree/useTree.ts

@@ -33,15 +33,6 @@ export const useTree: UseTree = (props: TreeProps, emit: TreeEmits) => {
     return nodes;
   });
 
-  watch(
-    () => nodeList,
-    (list) => {
-      const { checkedKeys, expandKeys } = tree.getKeys();
-      emit("update:checkedKeys", checkedKeys);
-    },
-    { deep: true }
-  );
-
   return {
     tree,
     nodeList,

package/component/src/component/treeSelect/index.vue

@@ -19,6 +19,7 @@ export interface LayTreeSelect {
   collapseTagsTooltip?: boolean;
   minCollapsedNum?: number;
   size?: string;
+  checkStrictly?: boolean;
 }
 
 export interface TreeSelectEmits {
@@ -34,13 +35,14 @@ const props = withDefaults(defineProps<LayTreeSelect>(), {
   allowClear: false,
   collapseTagsTooltip: true,
   minCollapsedNum: 3,
+  checkStrictly: true,
   size: "md",
 });
 
 const singleValue = ref();
 const multipleValue = ref(["1"]);
-const dropdownRef = ref();
 const openState = ref(false);
+const dropdownRef = ref();
 const emits = defineEmits<TreeSelectEmits>();
 
 const selectedValue = computed({
@@ -53,6 +55,16 @@ const selectedValue = computed({
   },
 });
 
+const checkedKeys = computed({
+  get() {
+    return props.multiple ? props.modelValue : [];
+  },
+  set(value) {
+    emits("update:modelValue", value);
+    emits("change", value);
+  }
+})
+
 watch(
   [selectedValue],
   () => {
@@ -60,12 +72,14 @@ watch(
       multipleValue.value = selectedValue.value.map((value: any) => {
         const node: any = getNode(props.data, value);
         node.label = node.title;
+        node.closable = !node.disabled;
         return node;
       });
     } else {
-      singleValue.value = props.data.find((item: any) => {
+      const node: any = getNode(props.data, selectedValue.value);
-        return item.value === selectedValue.value;
+      if(node) {
-      })?.label;
+        singleValue.value = node.title;
+      }
     }
   },
   { immediate: true, deep: true }
@@ -87,14 +101,14 @@ const handleClick = (node: any) => {
       @hide="openState = false"
     >
       <lay-tag-input
-        v-if="multiple"
-        v-model="multipleValue"
         :size="size"
         :allow-clear="allowClear"
         :placeholder="placeholder"
         :collapseTagsTooltip="collapseTagsTooltip"
         :minCollapsedNum="minCollapsedNum"
         :disabledInput="true"
+        v-model="multipleValue"
+        v-if="multiple"
       >
         <template #suffix>
           <lay-icon
@@ -124,7 +138,9 @@ const handleClick = (node: any) => {
             :data="data"
             :onlyIconControl="true"
             :show-checkbox="multiple"
-            v-model:checkedKeys="selectedValue"
+            :check-strictly="checkStrictly"
+            v-model:selectedKey="selectedValue"
+            v-model:checkedKeys="checkedKeys"
             @node-click="handleClick"
           ></lay-tree>
         </div>

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

@@ -26,22 +26,18 @@ import { ref } from 'vue';
 const data = ref([{
 	title: '一级1',
 	id: 1,
-	field: 'name1',
 	checked: true,
 	spread: true,
 	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,
@@ -50,29 +46,24 @@ const data = ref([{
 				{
 					title: '五级1-1-3-1-2',
 					id: 31,
-					field: ''
 				}]
 			}]
 		},
 		{
 			title: '三级1-1-1',
 			id: 7,
-			field: '',
 			children: [{
 				title: '四级1-1-1-1 可允许跳转',
 				id: 15,
-				field: '',
 				href: 'https://www.layui.com/doc/'
 			}]
 		},
 		{
 			title: '三级1-1-2',
 			id: 8,
-			field: '',
 			children: [{
 				title: '四级1-1-2-1',
 				id: 32,
-				field: ''
 			}]
 		}]
 	},
@@ -83,65 +74,53 @@ const data = ref([{
 		children: [{
 			title: '三级1-2-1',
 			id: 9,
-			field: '',
 			disabled: true
 		},
 		{
 			title: '三级1-2-2',
 			id: 10,
-			field: ''
 		}]
 	},
 	{
 		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,
-	field: '',
 	spread: true,
 	children: [{
 		title: '二级2-1',
 		id: 5,
-		field: '',
 		spread: true,
 		children: [{
 			title: '三级2-1-1',
 			id: 11,
-			field: ''
 		},
 		{
 			title: '三级2-1-2',
 			id: 12,
-			field: ''
 		}]
 	},
 	{
 		title: '二级2-2',
 		id: 6,
-		field: '',
 		children: [{
 			title: '三级2-2-1',
 			id: 13,
-			field: ''
 		},
 		{
 			title: '三级2-2-2',
 			id: 14,
-			field: '',
 			disabled: true
 		}]
 	}]
@@ -149,42 +128,35 @@ const data = ref([{
 {
 	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: ''
 		}]
 	}]
 }]);
 
 function handleClick(node) {
-  console.log(node)
+  console.log("Click Node:" + JSON.stringify(node));
 }
 </script>
 
@@ -193,45 +165,52 @@ function handleClick(node) {
 ::: title 选择节点
 :::
 
-::: demo 使用 `showCheckbox` 属性开启复选框
+::: demo 使用 `showCheckbox` 属性开启复选框, `checkedKeys` 属性设置选中项。
 
 <template>
   <lay-tree
-    :data="data3"
+    :data="data2"
-	v-model:checkedKeys="checkedKeys3"
+	:showCheckbox="showCheckbox2"
-	:showCheckbox="showCheckbox"
+	v-model:checkedKeys="checkedKeys2"
-    collapse-transition
   >
   </lay-tree>
-  <br/>
+  <br>
-  <lay-button @click="updateView">更新视图</lay-button>
+  <a-space>
-  <lay-button @click="updateCheckedKeys">更新checkedKeys</lay-button>
+    <lay-button @click="updateView2">更新数据</lay-button>
+  	<lay-button @click="updateCheckedKeys2">更新选择</lay-button>
+  	{{ checkedKeys2 }}
+  </a-space>
 </template>
 
 <script setup>
 import { ref } from 'vue';
-const updateCheckedKeys=()=>{
+
-  checkedKeys.value=[4]
+const checkedKeys2 = ref([]);
+const showCheckbox2 = ref(true);
+
+const updateCheckedKeys2=()=>{
+  checkedKeys2.value=[4]
 }
-const data3 = ref([{
+
+const updateView2=()=>{
+  data3.value[0].title='更新视图'
+}
+
+const data2 = ref([{
 	title: '一级1',
 	id: 1,
-	field: 'name1',
 	checked: true,
 	spread: true,
 	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,
@@ -240,29 +219,24 @@ const data3 = ref([{
 				{
 					title: '五级1-1-3-1-2',
 					id: 31,
-					field: ''
 				}]
 			}]
 		},
 		{
 			title: '三级1-1-1',
 			id: 7,
-			field: '',
 			children: [{
 				title: '四级1-1-1-1 可允许跳转',
 				id: 15,
-				field: '',
 				href: 'https://www.layui.com/doc/'
 			}]
 		},
 		{
 			title: '三级1-1-2',
 			id: 8,
-			field: '',
 			children: [{
 				title: '四级1-1-2-1',
 				id: 32,
-				field: ''
 			}]
 		}]
 	},
@@ -273,66 +247,53 @@ const data3 = ref([{
 		children: [{
 			title: '三级1-2-1',
 			id: 9,
-			field: '',
 			disabled: true
 		},
 		{
 			title: '三级1-2-2',
 			id: 10,
-			field: ''
 		}]
 	},
 	{
 		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,
-	field: '',
 	spread: true,
 	children: [{
 		title: '二级2-1',
 		id: 5,
-		field: '',
 		spread: true,
 		children: [{
 			title: '三级2-1-1',
 			id: 11,
-			field: ''
 		},
 		{
 			title: '三级2-1-2',
 			id: 12,
-			field: '',
-			disabled: true
 		}]
 	},
 	{
 		title: '二级2-2',
 		id: 6,
-		field: '',
 		children: [{
 			title: '三级2-2-1',
 			id: 13,
-			field: ''
 		},
 		{
 			title: '三级2-2-2',
 			id: 14,
-			field: '',
 			disabled: true
 		}]
 	}]
@@ -340,44 +301,32 @@ const data3 = ref([{
 {
 	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: ''
 		}]
 	}]
 }]);
-const updateView=()=>{
-  data2.value[0].title='更新视图'
-}
-const checkedKeys3 = ref([12, 14])
-const showCheckbox = ref(true)
 </script>
 
 :::
@@ -385,15 +334,14 @@ const showCheckbox = ref(true)
 ::: title 禁用级联
 :::
 
-::: demo 使用 `showCheckbox` 属性开启复选框
+::: demo 通过 `checkStrictly` 属性禁用父子关联选择, 让每个复选框都是独立的。
 
 <template>
   <lay-tree
-	v-model:checkedKeys="checkedKeys"
+	v-model:checkedKeys="checkedKeys3"
-	:showCheckbox="showCheckbox"
     :checkStrictly="true"
-	:collapse-transition="true"
+	:showCheckbox="true"
-	:data="data2"
+	:data="data3"
   >
   </lay-tree>
 </template>
@@ -401,25 +349,21 @@ const showCheckbox = ref(true)
 <script setup>
 import { ref } from 'vue';
 
-const data2 = ref([{
+const data3 = ref([{
 	title: '一级1',
 	id: 1,
-	field: 'name1',
 	checked: true,
 	spread: true,
 	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,
@@ -428,29 +372,24 @@ const data2 = ref([{
 				{
 					title: '五级1-1-3-1-2',
 					id: 31,
-					field: ''
 				}]
 			}]
 		},
 		{
 			title: '三级1-1-1',
 			id: 7,
-			field: '',
 			children: [{
 				title: '四级1-1-1-1 可允许跳转',
 				id: 15,
-				field: '',
 				href: 'https://www.layui.com/doc/'
 			}]
 		},
 		{
 			title: '三级1-1-2',
 			id: 8,
-			field: '',
 			children: [{
 				title: '四级1-1-2-1',
 				id: 32,
-				field: ''
 			}]
 		}]
 	},
@@ -461,65 +400,53 @@ const data2 = ref([{
 		children: [{
 			title: '三级1-2-1',
 			id: 9,
-			field: '',
 			disabled: true
 		},
 		{
 			title: '三级1-2-2',
 			id: 10,
-			field: ''
 		}]
 	},
 	{
 		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,
-	field: '',
 	spread: true,
 	children: [{
 		title: '二级2-1',
 		id: 5,
-		field: '',
 		spread: true,
 		children: [{
 			title: '三级2-1-1',
 			id: 11,
-			field: ''
 		},
 		{
 			title: '三级2-1-2',
 			id: 12,
-			field: ''
 		}]
 	},
 	{
 		title: '二级2-2',
 		id: 6,
-		field: '',
 		children: [{
 			title: '三级2-2-1',
 			id: 13,
-			field: ''
 		},
 		{
 			title: '三级2-2-2',
 			id: 14,
-			field: '',
 			disabled: true
 		}]
 	}]
@@ -527,42 +454,34 @@ const data2 = ref([{
 {
 	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: ''
 		}]
 	}]
 }]);
 
-const checkedKeys = ref([2,3])
+const checkedKeys3 = ref([2,3])
-const showCheckbox = ref(true)
 </script>
 
 :::
@@ -594,11 +513,8 @@ const showLine=ref(false)
 ::: demo 使用 `title` 插槽自定义节点标题
 
 <template>
-  <lay-tree
+  <lay-tree :data="data">	
-    :data="data"
+	<template #title="{ data }">
-	collapse-transition
-  >	
-	<template v-slot:title="{ data }">
 		{{ data.id }}
 	</template>
   </lay-tree>

package/document-component/src/document/zh-CN/components/treeSelect.md

@@ -13,7 +13,7 @@
 ::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。
 
 <template>
-  <lay-tree-select v-model="value" :data="data"></lay-tree-select> {{ value }}
+  <lay-tree-select v-model="value" :data="data"></lay-tree-select>
 </template>
 
 <script setup>
@@ -188,183 +188,6 @@ function handleClick(node) {
 
 :::
 
-::: title 启用多选
-:::
-
-::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。
-
-<template>
-  <lay-tree-select v-model="value1" :multiple="true" :data="data1" ></lay-tree-select> {{ value1 }}
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref([]);
-
-const data1 = ref([{
-	title: '一级1',
-	id: 1,
-	field: 'name1',
-	checked: true,
-	spread: true,
-	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,
-					field: ''
-				},
-				{
-					title: '五级1-1-3-1-2',
-					id: 31,
-					field: ''
-				}]
-			}]
-		},
-		{
-			title: '三级1-1-1',
-			id: 7,
-			field: '',
-			children: [{
-				title: '四级1-1-1-1 可允许跳转',
-				id: 15,
-				field: '',
-				href: 'https://www.layui.com/doc/'
-			}]
-		},
-		{
-			title: '三级1-1-2',
-			id: 8,
-			field: '',
-			children: [{
-				title: '四级1-1-2-1',
-				id: 32,
-				field: ''
-			}]
-		}]
-	},
-	{
-		title: '二级1-2',
-		id: 4,
-		spread: true,
-		children: [{
-			title: '三级1-2-1',
-			id: 9,
-			field: '',
-			disabled: true
-		},
-		{
-			title: '三级1-2-2',
-			id: 10,
-			field: ''
-		}]
-	},
-	{
-		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,
-	field: '',
-	spread: true,
-	children: [{
-		title: '二级2-1',
-		id: 5,
-		field: '',
-		spread: true,
-		children: [{
-			title: '三级2-1-1',
-			id: 11,
-			field: ''
-		},
-		{
-			title: '三级2-1-2',
-			id: 12,
-			field: ''
-		}]
-	},
-	{
-		title: '二级2-2',
-		id: 6,
-		field: '',
-		children: [{
-			title: '三级2-2-1',
-			id: 13,
-			field: ''
-		},
-		{
-			title: '三级2-2-2',
-			id: 14,
-			field: '',
-			disabled: true
-		}]
-	}]
-},
-{
-	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 禁用选择
 :::
 
@@ -584,8 +407,6 @@ const data = ref([{
 
 :::
 
- 
-
 ::: contributor transition
 :::
 

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -16,11 +16,13 @@
       <li> 
         <h3>1.6.0 <span class="layui-badge-rim">2022-10-08</span></h3> 
         <ul>
-          <li>[新增] tree-select 下拉选择树组件, 提供树结构数据选择。</li>
+          <li>[新增] tree 组件 selectedKey 属性, 支持单选节点高亮。</li>
           <li>[新增] tree 组件 checkStrictly 属性, 开启复选框时解除父子联动关系, 默认为 false。</li>
+          <li>[修复] tree 组件 title 自定义标题插槽, 不生效的问题。</li>
           <li>[修复] tree 组件 node 配置 disabled 启用时, @node-click 事件仍触发的问题。</li>
           <li>[修复] checkbox 组件 label 属性与 default 插槽不设置, layui-checkbox-label 元素仍存在的问题。</li>
           <li>[修复] tree 组件 show-checkbox 为 true 时, 复选框与标题间距过宽的问题。</li>
+          <li>[修复] tree 组件 node 配置 disabled 启用时, 仍会因为父子关联选择。</li>
           <li>[修复] table 组件 indentSize 属性, 在加载远程数据时不生效的问题。</li>
           <li>[调整] date-picker 组件 laydate-range-hover 前景色与背景色。</li>
         </ul> 

package/document-component/src/view/index.vue

@@ -83,22 +83,22 @@
         <lay-col :md="8" :sm="12" :xs="12">
           <div class="box">
             <div class="icon">☀️</div>
-            <h2 class="title">Setup script</h2>
+            <h2 class="title">Dark theme</h2>
-            <p class="details">use grammar sugar.</p>
+            <p class="details">provide theme variables.</p>
           </div>
         </lay-col>
         <lay-col :md="8" :sm="12" :xs="12">
           <div class="box">
             <div class="icon">🚀</div>
-            <h2 class="title">Classic design</h2>
+            <h2 class="title">Piu allegro</h2>
-            <p class="details">layui css.</p>
+            <p class="details">provide vscode plugin.</p>
           </div>
         </lay-col>
         <lay-col :md="8" :sm="12" :xs="12">
           <div class="box">
             <div class="icon">☁️</div>
-            <h2 class="title">Small volume</h2>
+            <h2 class="title">Complete ecology</h2>
-            <p class="details">only 14.9 MB.</p>
+            <p class="details">admin and form design.</p>
           </div>
         </lay-col>
         <lay-col :md="8" :sm="12" :xs="12">