树组件
<template>
<div class="left-tree">
<el-tree
:data="treeData.data"
node-key="id"
:props="defaultProps"
:default-expanded-keys="[0]"
:default-checked-keys="[0]"
@node-click="nodeclick"
>
<template #default="scope">
<div class="custom-node">
<i
class="tree-icon"
:class="{
'el-icon-caret-right': !scope.node.expanded,
'el-icon-caret-bottom': scope.node.expanded,
'el-icon-wlj-yuandian': scope.data.is_leaf === 1
}"
:style="{ color: scope.data.is_leaf === 1 ? 'rgb(54,229,150)' : '#409eff' }"
/>
<span>{{ scope.node.label }}</span>
</div>
</template>
</el-tree>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { getDept } from "@/api/asset"
// 定义派发事件
const emit = defineEmits(['tree-node-click'])
const nodeclick = (data, node, component) => {
// console.log('子组件category的节点被点击', data, node, component)
// 向父组件发送事件;
emit('tree-node-click', data, node, component)
}
let defaultProps = reactive({
children: 'children',
label: 'name',
})
let treeData: any = reactive({ data: [] })
async function getDeptTree() {
const data: any = await getDept({ POST_TYPE: 1 })
treeData.data = data.lists
console.log(treeData)
}
onMounted(async () => {
getDeptTree()
})
</script>
<style lang="scss" scoped>
//tree
.el-tree-node__content:hover {
background-color: rgb(255, 207, 131);
}
.el-tree-node:focus > .el-tree-node__content {
background-color: rgb(255, 207, 131);
}
.el-tree-node__label {
font-size: 1.5vh;
}
.el-tree-node__expand-icon {
color: transparent;
cursor: default;
}
//tree
.left-tree {
height: 73vh;
overflow: auto;
}
/*修改滚动条样式*/
.left-tree::-webkit-scrollbar {
width: 10px;
height: 10px;
/**/
}
.left-tree::-webkit-scrollbar-track {
background: rgb(104, 108, 143);
border-radius: 10px;
}
.left-tree::-webkit-scrollbar-thumb {
background: rgb(54, 229, 150);
border-radius: 10px;
}
// .left-tree::-webkit-scrollbar-thumb:hover{
// background: #333;
// }
// .left-tree::-webkit-scrollbar-corner{
// background: #179a16;
// }
.tree-icon {
margin-right: 1vh;
margin-left: -2vh;
}
.el-tree {
background: none;
color: #fff;
}
</style>
父组件
<dept-tree @tree-node-click="treenodeclick"/>
const treenodeclick = (data, node, component) => {
console.log(data);
}