部门树组件添加多选

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()
 })