<template>
|
<div class="LeftBox">
|
<el-tree
|
:data="LeftTreeData"
|
node-key="id"
|
ref="leftTree"
|
style="min-width: 160px"
|
show-checkbox
|
:props="defaultProps"
|
accordion
|
@check="setLeftCheckTree"
|
></el-tree>
|
</div>
|
<div class="rightBox">
|
<el-tree
|
:data="rightTreeData"
|
node-key="id"
|
ref="rightTree"
|
style="min-width: 160px"
|
show-checkbox
|
accordion
|
:props="defaultProps"
|
@check="setRightCheckTree"
|
></el-tree>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, nextTick } from "vue";
|
import historyLayer from "../assets/js/historyLayer";
|
import { ElTree } from "element-plus";
|
import type Node from "element-plus/es/components/tree/src/model/node";
|
interface Tree {
|
id: number;
|
label: string;
|
children?: Tree[];
|
}
|
const leftTree = ref<InstanceType<typeof ElTree>>();
|
const rightTree = ref<InstanceType<typeof ElTree>>();
|
const defaultProps = {
|
children: "children",
|
label: "name",
|
};
|
const LeftTreeData = ref([]);
|
const rightTreeData = ref([]);
|
const setLeftCheckTree = (treeNode, data) => {
|
if (data.checkedKeys.length == 0) {
|
historyLayer.removeLeftMapLayer();
|
return;
|
}
|
if (data.checkedKeys.length == 1) {
|
historyLayer.LeftInit(treeNode);
|
return;
|
}
|
if (data.checkedKeys.length > 1) {
|
leftTree.value.setCheckedKeys([treeNode.id], true);
|
historyLayer.LeftInit(treeNode);
|
}
|
};
|
const setRightCheckTree = (treeNode, data) => {
|
if (data.checkedKeys.length == 0) {
|
historyLayer.removeLeftMapLayer();
|
return;
|
}
|
if (data.checkedKeys.length == 1) {
|
historyLayer.RightInit(treeNode);
|
return;
|
}
|
if (data.checkedKeys.length > 1) {
|
rightTree.value.setCheckedKeys([treeNode.id], true);
|
historyLayer.RightInit(treeNode);
|
}
|
};
|
onMounted(() => {
|
LeftTreeData.value = historyData;
|
rightTreeData.value = historyData;
|
});
|
</script>
|
|
<style scoped lang="less">
|
.LeftBox {
|
position: absolute;
|
right: 51%;
|
top: 135px;
|
z-index: 40;
|
position: absolute;
|
background: url("../assets/img/menu/listbg.png") no-repeat;
|
background-size: 100% 100%;
|
padding: 10px;
|
border-radius: 5px;
|
height: 400px;
|
}
|
.rightBox {
|
position: absolute;
|
left: 51%;
|
top: 135px;
|
z-index: 40;
|
position: absolute;
|
background-image: url("../assets/img/menu/listbg.png");
|
background-size: 100% 100%;
|
padding: 10px;
|
border-radius: 5px;
|
height: 400px;
|
}
|
/* yhadd */
|
.el-tree {
|
background: transparent;
|
color: white;
|
height: 93%;
|
overflow: auto;
|
}
|
|
.el-tree /deep/ .el-tree-node__content {
|
background-color: transparent !important;
|
}
|
|
.el-tree /deep/ .el-tree-node__content:hover {
|
background-color: rgba(255, 255, 255, 0.4) !important;
|
}
|
|
.el-tree /deep/ .is-current > .el-tree-node__content {
|
background-color: rgba(255, 255, 255, 0.4) !important;
|
font-size: 14px;
|
}
|
|
::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 5px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 8px;
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动条 */
|
::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
background: rgba(218, 218, 218, 0.5);
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动槽 */
|
::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
.el-tree {
|
/deep/ .el-tree-node {
|
// css 让父级不现实checkbox
|
.is-leaf + .el-checkbox .el-checkbox__inner {
|
display: inline-block;
|
}
|
.el-checkbox .el-checkbox__inner {
|
display: none;
|
}
|
}
|
}
|
|
.el-tree .TreeNodeClass {
|
width: 100%;
|
flex: 1;
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
padding-right: 8px;
|
justify-content: space-between !important;
|
}
|
</style>
|
