<!--
author:金荣华
description:树型组件进行封装
date:2022-11-17
-->
<template>
<div class="tree-box">
<el-tree
:highlight-current="true"
:data="data"
accordion
node-key="id"
:default-expanded-keys="expandedKeys"
ref="tree"
@node-click="handleNodeClick"
>
<span class="custom-tree-node" slot-scope="{ data }">
<span>{{ data.name }}</span>
<span>
<!-- <i class="el-icon-arrow-down"></i> -->
<!-- <i class="el-icon-arrow-up"></i> -->
</span>
</span>
</el-tree>
</div>
</template>
<script>
export default {
props: {
// 接收的树型数组
data: {
type: Array
},
// 展开的key值
expandedKeys: {
type: Array
},
// 传入的当前key值
currentKey: {
type: String
}
},
watch: {
// 监听当前选中的key
currentKey(oldValue, newValue) {
console.log(oldValue)
console.log(newValue)
if (newValue) {
this.$refs.tree.setCurrentKey(newValue)
}
}
},
methods: {
handleNodeClick(data, node, obj) {
this.$emit('node-click', { data, node, obj })
}
}
}
</script>
<style lang="scss">
.tree-box {
// 移入树型样式
.el-tree-node__content:hover {
background: #f2f8f4;
color: #009a44;
// border-left: 4px solid #009A44;
}
// 选中当前node的样式
.el-tree-node.is-current > .el-tree-node__content {
background: #f2f8f4 !important;
color: #009a44 !important;
border-left: 4px solid #009a44;
}
// 树型图标样式调整
.el-tree-node__expand-icon {
position: absolute !important;
right: 2% !important;
}
// 文本
.el-tree-node__label {
padding-left: 15px !important;
}
// 树形结构样式
.el-tree-node__content {
padding-bottom: 6px !important;
padding-top: 3px !important;
border-bottom: 1px solid #f2f8f4 !important;
text-indent: 10px;
}
// 顶级背景颜色
.el-tree-node.is-expanded.is-focusable > .el-tree-node__content:first-child {
background-color: #009a44;
color: #ffffff;
font-weight: 400;
&:hover {
background: #f2f8f4 !important;
color: #009a44 !important;
.el-tree-node__expand-icon {
color: #606266 !important;
vertical-align: middle;
}
}
.el-tree-node__expand-icon {
color: #ffffff !important;
vertical-align: middle;
}
}
// 子级样式判断
.el-tree-node__children > .el-tree-node.is-expanded.is-focusable > .el-tree-node__content {
background-color: #fff;
color: #606266;
.el-tree-node__expand-icon {
color: #606266 !important;
vertical-align: middle;
}
}
}
</style>
效果图: