|
@@ -59,8 +59,10 @@ const postListTreeApi = async () => {
|
|
|
data[0].id = 1;
|
|
|
}
|
|
|
dataTree.value = data;
|
|
|
+ let dataId = { data: "" };
|
|
|
+ dataId.data = dataTree.value[0];
|
|
|
nextTick(() => {
|
|
|
- handleNodeClick(dataTree.value[0]);
|
|
|
+ handleNodeClick(dataId);
|
|
|
});
|
|
|
}
|
|
|
};
|
|
@@ -145,9 +147,17 @@ const tableData = reactive({
|
|
|
organizationType: "dept"
|
|
|
}
|
|
|
});
|
|
|
+const selectedNodeId = ref();
|
|
|
const handleNodeClick = data => {
|
|
|
- Object.assign(deptList.value, data);
|
|
|
- UserTable.value.handleNodeClick(data, "dept");
|
|
|
+ selectedNodeId.value = data.id;
|
|
|
+ // nextTick(() => {
|
|
|
+ // const nodeElement = treeRef.value.$el.querySelector(`[data-node-key="${data.id}"]`);
|
|
|
+ // if (nodeElement) {
|
|
|
+ // nodeElement.classList.add('custom-node-class'); // 在此修改类名
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ Object.assign(deptList.value, data.data);
|
|
|
+ UserTable.value.handleNodeClick(data.data, "dept");
|
|
|
// tableData.params.organizationCode = data.deptCode;
|
|
|
// postOrganizationUserPageApi();
|
|
|
};
|
|
@@ -173,6 +183,10 @@ const filterNode = (value: string, data: any) => {
|
|
|
watch(realName, val => {
|
|
|
treeRef.value!.filter(val);
|
|
|
});
|
|
|
+// function handleDropdownClick(node) {
|
|
|
+// // 您的逻辑
|
|
|
+// console.log(1111,node)
|
|
|
+// }
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
@@ -198,7 +212,7 @@ watch(realName, val => {
|
|
|
/>
|
|
|
<!-- 配置角色 -->
|
|
|
<changeRole ref="changeRoleRef" v-model="changeRoleShow" />
|
|
|
- <!-- 主体内容 -->
|
|
|
+ <!-- 主体内容 @node-click="handleNodeClick" -->
|
|
|
<div class="box-left">
|
|
|
<el-input
|
|
|
v-model="realName"
|
|
@@ -218,12 +232,16 @@ watch(realName, val => {
|
|
|
:expand-on-click-node="false"
|
|
|
highlight-current
|
|
|
:filter-node-method="filterNode"
|
|
|
- @node-click="handleNodeClick"
|
|
|
>
|
|
|
<template #default="{ node }">
|
|
|
- <div class="flex-1 flex justify-between items-center">
|
|
|
- <div class="w-[150px] ellipsis">{{ node.label }}</div>
|
|
|
- <el-dropdown trigger="click" @click.stop>
|
|
|
+ <div
|
|
|
+ class="flex-1 flex justify-between items-center"
|
|
|
+ :class="{ 'custom-node-class': selectedNodeId === node.id }"
|
|
|
+ >
|
|
|
+ <div class="w-[120px] ellipsis" @click="handleNodeClick(node)">
|
|
|
+ {{ node.label }}
|
|
|
+ </div>
|
|
|
+ <el-dropdown trigger="click">
|
|
|
<span>
|
|
|
<el-icon>
|
|
|
<Operation />
|
|
@@ -345,11 +363,15 @@ watch(realName, val => {
|
|
|
// line-height: 10px;
|
|
|
// border: 1px solid red;
|
|
|
// }
|
|
|
-::v-deep(
|
|
|
- .el-tree--highlight-current
|
|
|
- .el-tree-node.is-current
|
|
|
- > .el-tree-node__content
|
|
|
- ) {
|
|
|
+// ::v-deep(
|
|
|
+// .el-tree--highlight-current
|
|
|
+// .el-tree-node.is-current
|
|
|
+// > .el-tree-node__content
|
|
|
+// ) {
|
|
|
+// color: #0052d9;
|
|
|
+// background-color: #ecf2fe !important;
|
|
|
+// }
|
|
|
+.custom-node-class {
|
|
|
color: #0052d9;
|
|
|
background-color: #ecf2fe !important;
|
|
|
}
|