From 49fcb42d9ecb90ccc46db6958395121876175aff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sun, 2 Oct 2022 22:25:02 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20=E5=A4=84=E7=90=86=20tr?=
 =?UTF-8?q?ee=20=E7=BB=84=E4=BB=B6=20n=20=E5=A4=9A=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/checkbox/index.vue          |   6 +-
 .../component/src/component/tree/TreeNode.vue |  35 +-
 .../component/src/component/tree/index.vue    |   7 +
 package/component/src/component/tree/tree.ts  |  17 +-
 .../component/src/component/tree/tree.type.ts |   2 +-
 .../component/src/component/tree/useTree.ts   |   1 +
 .../src/component/treeSelect/index.less       |  17 +
 .../src/component/treeSelect/index.vue        | 111 ++++--
 package/component/src/index.ts                |   2 +-
 package/component/src/utils/treeUtil.ts       |  34 ++
 .../src/document/zh-CN/components/tree.md     | 185 +++++++++
 .../document/zh-CN/components/treeSelect.md   | 354 ++++++++++++++++++
 .../src/document/zh-CN/guide/changelog.md     |  15 +
 .../document-component/src/router/zh-CN.ts    |   3 +-
 14 files changed, 737 insertions(+), 52 deletions(-)
 create mode 100644 package/component/src/component/treeSelect/index.less
 create mode 100644 package/component/src/utils/treeUtil.ts

diff --git a/package/component/src/component/checkbox/index.vue b/package/component/src/component/checkbox/index.vue
index b49123a2..630f90cb 100644
--- a/package/component/src/component/checkbox/index.vue
+++ b/package/component/src/component/checkbox/index.vue
@@ -6,7 +6,7 @@ export default {
 
 <script setup lang="ts">
 import { LayIcon } from "@layui/icons-vue";
-import { computed, inject } from "vue";
+import { computed, inject, useSlots } from "vue";
 import "./index.less";
 
 export interface LayCheckboxProps {
@@ -38,6 +38,8 @@ const isGroup = computed(() => {
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
+const slots = useSlots();
+
 const isChecked = computed({
   get() {
     if (isGroup.value) {
@@ -123,7 +125,7 @@ const isDisabled = computed(() => {
       }"
       :lay-skin="skin"
     >
-      <span class="layui-checkbox-label">
+      <span class="layui-checkbox-label" v-if="slots.default || label">
         <slot>{{ label }}</slot>
       </span>
       <lay-icon
diff --git a/package/component/src/component/tree/TreeNode.vue b/package/component/src/component/tree/TreeNode.vue
index d6b2297f..79535c23 100644
--- a/package/component/src/component/tree/TreeNode.vue
+++ b/package/component/src/component/tree/TreeNode.vue
@@ -31,6 +31,7 @@ export interface TreeNodeProps {
   nodeList: TreeData[];
   showCheckbox: boolean;
   showLine: boolean;
+  checkStrictly: boolean;
   collapseTransition: boolean;
   onlyIconControl: boolean;
 }
@@ -75,7 +76,7 @@ function recursiveNodeClick(node: TreeData) {
 }
 
 function handleChange(checked: boolean, node: TreeData) {
-  props.tree.setCheckedKeys(checked, node);
+  props.tree.setCheckedKeys(checked, props.checkStrictly, node);
 }
 
 function handleIconClick(node: TreeData) {
@@ -86,8 +87,11 @@ function handleTitleClick(node: TreeData) {
   if (!props.onlyIconControl) {
     handleIconClick(node);
   }
-  emit("node-click", node);
+  if (!node.isDisabled) {
+    emit("node-click", node);
+  }
 }
+
 function handleRowClick(node: TreeData) {
   if (!props.showLine) {
     handleTitleClick(node);
@@ -96,6 +100,7 @@ function handleRowClick(node: TreeData) {
 
 //判断是否半选
 const isChildAllSelected = computed(() => {
+
   function _isChildAllSelected(node: TreeData): boolean {
     if (!props.showCheckbox) {
       return false;
@@ -117,9 +122,14 @@ const isChildAllSelected = computed(() => {
     }
     return res;
   }
+
   return function (node: TreeData): boolean {
-    let res = _isChildAllSelected(node);
-    return res;
+    if(props.checkStrictly) {
+      return false;
+    } else {
+      let res = _isChildAllSelected(node);
+      return res;
+    }
   };
 });
 </script>
@@ -147,18 +157,14 @@ const isChildAllSelected = computed(() => {
             @click.stop="handleIconClick(node)"
           />
         </span>
-        <lay-checkbox
-          v-if="showCheckbox"
+        <lay-checkbox          
+          value="miss"
+          skin="primary"
           :modelValue="node.isChecked"
           :disabled="node.isDisabled"
-          skin="primary"
-          value=""
-          @change="
-            (checked) => {
-              handleChange(checked, node);
-            }
-          "
           :isIndeterminate="isChildAllSelected(node)"
+          @change="(checked) => handleChange(checked, node)"
+          v-if="showCheckbox"
         />
         <span
           :class="{
@@ -183,11 +189,12 @@ const isChildAllSelected = computed(() => {
         style="display: block"
       >
         <tree-node
+          :tree="tree"
           :node-list="node.children"
           :show-checkbox="showCheckbox"
           :show-line="showLine"
           :collapse-transition="collapseTransition"
-          :tree="tree"
+          :checkStrictly="checkStrictly"
           :only-icon-control="onlyIconControl"
           @node-click="recursiveNodeClick"
         >
diff --git a/package/component/src/component/tree/index.vue b/package/component/src/component/tree/index.vue
index 60d3dbda..e172527b 100644
--- a/package/component/src/component/tree/index.vue
+++ b/package/component/src/component/tree/index.vue
@@ -24,6 +24,7 @@ export interface TreeProps {
   checkedKeys?: KeysType;
   data: OriginalTreeData;
   showCheckbox?: boolean;
+  checkStrictly: boolean;
   edit?: EditType;
   collapseTransition?: boolean;
   onlyIconControl?: boolean;
@@ -49,6 +50,7 @@ const props = withDefaults(defineProps<TreeProps>(), {
   showCheckbox: false,
   edit: false,
   collapseTransition: true,
+  checkStrictly: false,
   onlyIconControl: false,
   disabled: false,
   showLine: true,
@@ -77,11 +79,13 @@ let tree = ref();
 let nodeList = ref();
 const unWatch = ref(false);
 const initStatus = ref(false);
+
 const loadNodeList = () => {
   let { tree: _tree, nodeList: _nodeList } = useTree(props, emit);
   tree.value = _tree;
   nodeList.value = _nodeList.value;
 };
+
 watch(
   () => props.data,
   () => {
@@ -89,6 +93,7 @@ watch(
   },
   { deep: true, immediate: true }
 );
+
 watch(
   () => props.checkedKeys,
   () => {
@@ -97,6 +102,7 @@ watch(
     }
   }
 );
+
 watch(
   tree,
   () => {
@@ -130,6 +136,7 @@ function handleClick(node: TreeData) {
       :node-list="nodeList"
       :show-checkbox="showCheckbox"
       :show-line="showLine"
+      :check-strictly="checkStrictly"
       :collapse-transition="collapseTransition"
       :only-icon-control="onlyIconControl"
       @node-click="handleClick"
diff --git a/package/component/src/component/tree/tree.ts b/package/component/src/component/tree/tree.ts
index 4173fcf2..a0e3d7fe 100644
--- a/package/component/src/component/tree/tree.ts
+++ b/package/component/src/component/tree/tree.ts
@@ -25,6 +25,7 @@ interface ReplaceFields {
 }
 
 interface TreeConfig {
+  checkStrictly: boolean;
   showCheckbox: boolean;
   checkedKeys: StringOrNumber[];
   expandKeys: StringOrNumber[];
@@ -156,15 +157,15 @@ class Tree {
     }
   }
 
-  setCheckedKeys(checked: boolean, node: TreeData) {
+  setCheckedKeys(checked: boolean, checkStrictly: boolean, node: TreeData) {
     node.isChecked = checked;
-    // 处理上级
-    if (node.parentNode) {
-      this.setParentChecked(checked, node.parentNode);
-    }
-    // 处理下级
-    if (node.children) {
-      this.setChildrenChecked(checked, node.children);
+    if (!checkStrictly) {
+      if (node.parentNode) {
+        this.setParentChecked(checked, node.parentNode);
+      }
+      if (node.children) {
+        this.setChildrenChecked(checked, node.children);
+      }
     }
   }
 
diff --git a/package/component/src/component/tree/tree.type.ts b/package/component/src/component/tree/tree.type.ts
index cc96b424..0dc87be3 100644
--- a/package/component/src/component/tree/tree.type.ts
+++ b/package/component/src/component/tree/tree.type.ts
@@ -15,6 +15,7 @@ export interface TreeProps {
   checkedKeys?: KeysType;
   expandKeys?: KeysType;
   data: OriginalTreeData;
+  checkStrictly?: boolean;
   showCheckbox?: boolean;
   edit?: EditType;
   collapseTransition?: boolean;
@@ -26,7 +27,6 @@ export interface TreeProps {
     title?: string;
   };
 }
-
 export interface TreeEmits {
   (e: "update:checkedKeys", keys: KeysType): void;
   (e: "update:expandKeys", keys: KeysType): void;
diff --git a/package/component/src/component/tree/useTree.ts b/package/component/src/component/tree/useTree.ts
index b0bd756e..7d9c8c04 100644
--- a/package/component/src/component/tree/useTree.ts
+++ b/package/component/src/component/tree/useTree.ts
@@ -23,6 +23,7 @@ export const useTree: UseTree = (props: TreeProps, emit: TreeEmits) => {
       showCheckbox: props.showCheckbox ?? false,
       checkedKeys: props.checkedKeys ?? [],
       expandKeys: props.expandKeys ?? [],
+      checkStrictly: props.checkStrictly ?? false
     },
     props.data
   );
diff --git a/package/component/src/component/treeSelect/index.less b/package/component/src/component/treeSelect/index.less
new file mode 100644
index 00000000..897de80a
--- /dev/null
+++ b/package/component/src/component/treeSelect/index.less
@@ -0,0 +1,17 @@
+.layui-tree-select {
+  width: 220px;
+}
+
+.layui-tree-select-content {
+  padding: 10px;
+}
+
+.layui-tree-select .layui-icon-triangle-d {
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  color: var(--global-neutral-color-8);
+}
+
+.layui-tree-select .layui-icon-triangle-d.triangle {
+  transform: rotate(180deg);
+}
diff --git a/package/component/src/component/treeSelect/index.vue b/package/component/src/component/treeSelect/index.vue
index ce9d27c6..885547a2 100644
--- a/package/component/src/component/treeSelect/index.vue
+++ b/package/component/src/component/treeSelect/index.vue
@@ -5,12 +5,20 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import "./index.less";
+import { computed, ref, watch } from "vue";
+import { getNode } from "../../utils/treeUtil";
 
 export interface LayTreeSelect {
-  data: any,
-  modelValue: string;
-  disabled: boolean;
+  data: any;
+  modelValue: any;
+  disabled?: boolean;
+  placeholder?: string;
+  multiple?: boolean;
+  allowClear?: boolean;
+  collapseTagsTooltip?: boolean;
+  minCollapsedNum?: number;
+  size?: string;
 }
 
 export interface TreeSelectEmits {
@@ -20,13 +28,21 @@ export interface TreeSelectEmits {
 }
 
 const props = withDefaults(defineProps<LayTreeSelect>(), {
-  disabled: false
+  disabled: false,
+  placeholder: "请选择",
+  multiple: false,
+  allowClear: false,
+  collapseTagsTooltip: true,
+  minCollapsedNum: 3,
+  size: "md",
 });
 
 const singleValue = ref();
+const multipleValue = ref(["1"]);
 const dropdownRef = ref();
 const openState = ref(false);
 const emits = defineEmits<TreeSelectEmits>();
+
 const selectedValue = computed({
   get() {
     return props.modelValue;
@@ -34,40 +50,85 @@ const selectedValue = computed({
   set(value) {
     emits("update:modelValue", value);
     emits("change", value);
-  }
-})
+  },
+});
+
+watch(
+  [selectedValue],
+  () => {
+    if (props.multiple) {
+      multipleValue.value = selectedValue.value.map((value: any) => {
+        const node: any = getNode(props.data, value);
+        node.label = node.title;
+        return node;
+      });
+    } else {
+      singleValue.value = props.data.find((item: any) => {
+        return item.value === selectedValue.value;
+      })?.label;
+    }
+  },
+  { immediate: true, deep: true }
+);
 
 const handleClick = (node: any) => {
   dropdownRef.value.hide();
   selectedValue.value = node.id;
-  singleValue.value = node.title; 
-}
+};
 </script>
 
 <template>
-  <div class="layui-tree-select">
-    <lay-dropdown       
+  <div class="layui-tree-select" :class="{ 'layui-disabled': disabled }">
+    <lay-dropdown
       ref="dropdownRef"
       :disabled="disabled"
       :update-at-scroll="true"
       @show="openState = true"
-      @hide="openState = false">
-      <lay-input v-model="singleValue"></lay-input>
+      @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"
+      >
+        <template #suffix>
+          <lay-icon
+            type="layui-icon-triangle-d"
+            :class="{ triangle: openState }"
+          ></lay-icon>
+        </template>
+      </lay-tag-input>
+      <lay-input
+        v-else
+        v-model="singleValue"
+        :size="size"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="true"
+      >
+        <template #suffix>
+          <lay-icon
+            type="layui-icon-triangle-d"
+            :class="{ triangle: openState }"
+          ></lay-icon>
+        </template>
+      </lay-input>
       <template #content>
         <div class="layui-tree-select-content">
-          <lay-tree :data="data" :onlyIconControl="true" @node-click="handleClick"></lay-tree>
+          <lay-tree
+            :data="data"
+            :onlyIconControl="true"
+            :show-checkbox="multiple"
+            v-model:checkedKeys="selectedValue"
+            @node-click="handleClick"
+          ></lay-tree>
         </div>
       </template>
-  </lay-dropdown>
+    </lay-dropdown>
   </div>
 </template>
-
-<style scoped>
-.layui-tree-select {
-  width: 220px;
-}
-
-.layui-tree-select-content {
-  padding: 10px;
-}
-</style>
diff --git a/package/component/src/index.ts b/package/component/src/index.ts
index 8e62a432..c46e21af 100644
--- a/package/component/src/index.ts
+++ b/package/component/src/index.ts
@@ -181,7 +181,7 @@ const components: Record<string, Plugin> = {
   LaySpace,
   LayTag,
   LayTagInput,
-  LayTreeSelect
+  LayTreeSelect,
 };
 
 const install = (app: App, options?: InstallOptions): void => {
diff --git a/package/component/src/utils/treeUtil.ts b/package/component/src/utils/treeUtil.ts
new file mode 100644
index 00000000..df246eaa
--- /dev/null
+++ b/package/component/src/utils/treeUtil.ts
@@ -0,0 +1,34 @@
+export function getNode(root: any, id: string) {
+	let resultNode = null;
+	findNode(root, id);
+	function findNode(root: any, id: string){
+		if(!!root) {
+			let type = Object.prototype.toString.call(root);
+			if(type === '[object Object]') {
+				if(root.id && root.id === id) {
+					resultNode = root
+				} else {
+					let node = root.children || null
+					findNode(node, id);
+				}
+			}else if(type === '[object Array]') {
+				let needNode = root.find((i:any) => !!i === true && i.id === id);
+				if(!!needNode) {
+					resultNode = needNode;
+				} else {
+					if(root.length) {
+						root.forEach((item: any)=>{
+							if(item && item.children) {
+								let node = item.children
+								if(node && node.length){
+									findNode(node, id);
+								}
+							}
+						})
+					}
+				}
+			}
+		}
+	}
+	return resultNode;
+}
\ No newline at end of file
diff --git a/package/document-component/src/document/zh-CN/components/tree.md b/package/document-component/src/document/zh-CN/components/tree.md
index 2dca3b6b..7a31b7b8 100644
--- a/package/document-component/src/document/zh-CN/components/tree.md
+++ b/package/document-component/src/document/zh-CN/components/tree.md
@@ -381,6 +381,191 @@ const showCheckbox = ref(true)
 
 :::
 
+::: title 禁用级联
+:::
+
+::: demo 使用 `showCheckbox` 属性开启复选框
+
+<template>
+  <lay-tree
+	v-model:checkedKeys="checkedKeys"
+	:showCheckbox="showCheckbox"
+    :checkStrictly="true"
+	:collapse-transition="true"
+	:data="data2"
+  >
+  </lay-tree>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+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,
+					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: ''
+		}]
+	}]
+}]);
+
+const checkedKeys = ref([2,3])
+const showCheckbox = ref(true)
+</script>
+
+:::
+
 ::: title 关闭连线
 :::
 
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 77af48eb..d21a9c72 100644
--- a/package/document-component/src/document/zh-CN/components/treeSelect.md
+++ b/package/document-component/src/document/zh-CN/components/treeSelect.md
@@ -188,6 +188,360 @@ 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 禁用选择
+:::
+
+::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。
+
+<template>
+  <lay-tree-select v-model="value" :data="data" :disabled="true"></lay-tree-select>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref();
+
+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,
+					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 Tree 属性
 :::
 
diff --git a/package/document-component/src/document/zh-CN/guide/changelog.md b/package/document-component/src/document/zh-CN/guide/changelog.md
index 4b0a6f00..61b8a004 100644
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@@ -10,6 +10,21 @@
 ::: demo
 <template>
 <lay-timeline>
+  <lay-timeline-item title="1.6.x">
+    <ul> 
+      <a name="1-6-0"></a> 
+      <li> 
+        <h3>1.6.0 <span class="layui-badge-rim">2022-10-08</span></h3> 
+        <ul>
+          <li>[新增] tree-select 下拉选择树组件, 提供树结构数据选择。</li>
+          <li>[新增] tree 组件 checkStrictly 属性, 开启复选框时解除父子联动关系, 默认为 false。</li>
+          <li>[修复] tree 组件 node 配置 disabled 启用时, @node-click 事件仍触发的问题。</li>
+          <li>[修复] checkbox 组件 label 属性与 default 插槽不设置, layui-checkbox-label 元素仍存在的问题。</li>
+          <li>[修复] tree 组件 show-checkbox 为 true 时, 复选框与标题间距过宽的问题。</li>
+        </ul> 
+      </li>
+    </ul>
+  </lay-timeline-item>
   <lay-timeline-item title="1.5.x">
       <ul> 
       <a name="1-5-1"></a> 
diff --git a/package/document-component/src/router/zh-CN.ts b/package/document-component/src/router/zh-CN.ts
index ad10c1f2..a4acad30 100644
--- a/package/document-component/src/router/zh-CN.ts
+++ b/package/document-component/src/router/zh-CN.ts
@@ -238,7 +238,8 @@ const zhCN = [
           },
           {
             path: "/zh-CN/components/treeSelect",
-            component: () => import("../document/zh-CN/components/treeSelect.md"),
+            component: () =>
+              import("../document/zh-CN/components/treeSelect.md"),
             meta: { title: "下拉树组件" },
           },
           {