From 524f5670ee91c4ab2052884bf22f4bc33d85471e Mon Sep 17 00:00:00 2001
From: ctw <>
Date: Fri, 24 Jan 2025 09:44:36 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E9=97=A8=E6=A0=91=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=A4=9A=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DepTree/index.vue | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/DepTree/index.vue b/src/components/DepTree/index.vue
index 4883733..b107500 100644
--- a/src/components/DepTree/index.vue
+++ b/src/components/DepTree/index.vue
@@ -46,6 +46,8 @@
 				highlight-current
 				default-expand-all
 				@node-click="handleNodeClick"
+				show-checkbox
+				@check-change="handleCheckChange"
 			>
 				<template #default="{ node, data }" v-if="$slots.default">
 					<slot :node="node" :data="data" />
@@ -60,6 +62,7 @@
 				@change="handleTreeDeepSearch"
 				:inactive-text="switchInactiveText"
 				:active-text="switchActiveText"
+				:disabled="checkedTreeNodes.length > 0"
 			/>
 		</div>
 	</div>
@@ -102,9 +105,11 @@ const state = reactive({
 	isDeep: false,
 })
 
-const depTreeRef = ref()
+const depTreeRef = ref() // 树组件的引用
 const searchName = ref() // 查询关键字
 const isExpand = ref(true) // 是否展开所有节点
+// 被勾选的树节点
+const checkedTreeNodes = ref([])
 
 // 获取部门树形结构数据
 const getTreeData = () => {
@@ -143,6 +148,18 @@ const toggleRowExpansionAll = (status: boolean) => {
 	}
 }
 
+watch(checkedTreeNodes, (val) => {
+	if (checkedTreeNodes.value.length > 0) {
+		state.isDeep = false
+	}
+})
+
+// 勾选树节点时
+const handleCheckChange = (data: any, checked: boolean, indeterminate: boolean) => {
+	checkedTreeNodes.value = depTreeRef.value.getCheckedNodes()
+	// console.log(data, checked, indeterminate)
+}
+
 onMounted(() => {
 	getTreeData()
 })