最终效果:
element-ui图标对应的content在目录
node_modules/element-ui/packages/theme-chalk/src/icon.scss
<template>
<div class="indicator-tree">
<el-tree
:data="warningProcessData"
node-key="id"
default-expand-all
:props="{
children: 'children',
label: 'item_name'
}"
@node-drag-end="handleDragEnd"
:draggable="false"
:expand-on-click-node="false"
@node-click="nodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span :class="['tree-node', currentNodeKey === node.id ? 'active-tree-node' : '']">{{ node.label }}</span>
</span>
</el-tree>
</div>
</template>
<script>
data() {
return {
// 树列表
warningOptions:[
{
"item_id": "005",
"item_name": "不急不急",
"children": []
},
{
"item_id": "007",
"item_name": "一级1",
"children": [
{
"item_id": "007_001",
"item_name": "二级1",
"children": []
},
{
"item_id": "007_002",
"item_name": "二级2",
"children": []
}
]
},
{
"item_id": "007",
"item_name": "一级1",
"children": [
{
"item_id": "007_001",
"item_name": "二级1",
"children": [
{
"item_id": "007_001",
"item_name": "三级1",
"children": []
}
]
},
{
"item_id": "007_002",
"item_name": "二级2",
"children": []
}
]
}
],
}
}
</script>
<style lang="scss" scoped>
.indicator-tree {
::v-deep{
// 修改图标
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before {
content: "\e783";
font-size: 18px;
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
content: "\e781";
font-size: 18px;
}
// 修改选中样式
.el-tree-node__content:hover {
background-color: #deefff;
border-radius: 2px;
color: #1381e1 !important;
font-size: 14px;
}
.el-tree-node:focus>.el-tree-node__content{
background-color: #deefff !important;
color: #1381e1 !important;
}
// 设置树形组件节点的定位和左内边距
.el-tree-node {
position: relative;
}
// 设置树形组件节点的 before 伪类的样式
.el-tree-node:before {
width: 1px;
height: 100%;
content: '';
position: absolute;
top: -38px;
bottom: 0;
left: 0;
right: auto;
border-width: 1px;
border-left: 1px solid #d9d9d9ab;
}
// 设置树形组件节点的 after 伪类的样式
.el-tree-node:after {
width: 13px;
height: 13px;
content: '';
position: absolute;
left: 0;
right: auto;
top: 12px;
bottom: auto;
border-width: 1px;
border-top: 1px solid #d9d9d9ab;
}
// 设置树形组件首节点的左边框不显示
.el-tree > .el-tree-node:before {
border-left: none;
}
// 设置树形组件首节点的顶部边框不显示
.el-tree > .el-tree-node:after {
border-top: none;
}
// 设置树形组件末节点的 before 伪类的高度
.el-tree .el-tree-node:last-child:before {
height: 50px;
}
// 设置树形组件节点字体大小、以及取消左内边距
.el-tree .el-tree-node__content {
color: #000;
font-size: 14px;
padding-left: 0 !important;
}
// 设置树形组件孩子节点左内边距
.el-tree .el-tree-node__children {
padding-left: 11.5px;
.el-tree-node{
padding-left: 13px;
}
}
// 设置树形组件复选框左右外边距
.el-tree .el-tree-node__content > label.el-checkbox {
margin: 0 5px 0 5px !important;
}
// 设置树形组件展开图标定位、图层、内边距
.el-tree .el-tree-node__expand-icon {
position: relative;
z-index: 99;
}
// 设置树形组件叶子节点的默认图标不显示
.el-tree .el-tree-node__expand-icon.is-leaf {
display: none;
}
// 设置树形组件叶子节点的横线
.el-tree .leaf-node-line {
width: 23px;
height: 13px;
content: '';
position: absolute;
left: 13px;
right: auto;
top: 12px;
bottom: auto;
border-width: 1px;
border-top: 1px solid #d9d9d9ab;
}
// 设置树形组件有叶子节点的左外边距
.el-tree .el-tree-node__content:has(.is-leaf){
padding-left: 8px !important;
}
}
}
</style>