|
@@ -6,7 +6,7 @@
|
|
</template>
|
|
</template>
|
|
</el-input>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
- <div class="head-container">
|
|
|
|
|
|
+ <div ref="treeContainer" class="tree-container">
|
|
<el-tree
|
|
<el-tree
|
|
ref="treeRef"
|
|
ref="treeRef"
|
|
:data="deptList"
|
|
:data="deptList"
|
|
@@ -18,7 +18,7 @@
|
|
node-key="id"
|
|
node-key="id"
|
|
@node-click="handleNodeClick"
|
|
@node-click="handleNodeClick"
|
|
@node-contextmenu="handleRightClick"
|
|
@node-contextmenu="handleRightClick"
|
|
- style="height: 35em"
|
|
|
|
|
|
+ style="height: 52em"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
@@ -55,7 +55,13 @@ const handleRightClick = (event, { node, data }) => {
|
|
selectedNode = data; // 存储当前操作的节点数据 :ml-citation{ref="7" data="citationList"}
|
|
selectedNode = data; // 存储当前操作的节点数据 :ml-citation{ref="7" data="citationList"}
|
|
//menuVisible.value = true;
|
|
//menuVisible.value = true;
|
|
};
|
|
};
|
|
-
|
|
|
|
|
|
+const treeContainer = ref(null)
|
|
|
|
+const setHeight = () => {
|
|
|
|
+ if (!treeContainer.value) return
|
|
|
|
+ const windowHeight = window.innerHeight
|
|
|
|
+ const containerTop = treeContainer.value.offsetTop
|
|
|
|
+ treeContainer.value.style.height = `${windowHeight * 0.78}px` // 60px 底部预留
|
|
|
|
+}
|
|
const handleMenuClick = (action) => {
|
|
const handleMenuClick = (action) => {
|
|
switch(action) {
|
|
switch(action) {
|
|
case 'add':
|
|
case 'add':
|
|
@@ -97,6 +103,11 @@ watch(deptName, (val) => {
|
|
/** 初始化 */
|
|
/** 初始化 */
|
|
onMounted(async () => {
|
|
onMounted(async () => {
|
|
await getTree()
|
|
await getTree()
|
|
|
|
+ setHeight()
|
|
|
|
+ window.addEventListener('resize', setHeight)
|
|
|
|
+})
|
|
|
|
+onUnmounted(() => {
|
|
|
|
+ window.removeEventListener('resize', setHeight)
|
|
})
|
|
})
|
|
</script>
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@@ -119,4 +130,10 @@ onMounted(async () => {
|
|
.custom-menu li:hover {
|
|
.custom-menu li:hover {
|
|
background: #f5f5f5;
|
|
background: #f5f5f5;
|
|
}
|
|
}
|
|
|
|
+.tree-container {
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ min-width: 100%;
|
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|