ElementUI中el-tree树形加线条 默认三角形改成加减号
前言
elementUI中el-tree树形结构加引导线使用css改变样式
实现样式
代码
<template>
<div ref="tree" :style="{height: treeHeight + 'px'}" class="tree-wrap treeCont">
<el-tree ref="group" class="menu cur-tree" :data="linkInfoTree" :props="dicProps" :default-expanded-keys="expandDefault" node-key="id" :highlight-current="true"
:current-node-key="activeId" :expand-on-click-node="false" @node-click="groupClick">
<template #default="{ node, data }">
<span class="custom-tree-node" style="display: flex;justify-content: center; align-items: center;">
<!-- 可用img 也可用icon -->
<!-- <img src="../../../assets/images/wenjian.png" style="width: 16px; height: 16px;margin-right:3px"> -->
<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em;margin-right: 5px; display: block;">
<el-icon-folder-checked style="height: 1.1em;width: 1.1em" />
</el-icon>
<span @click="getNode(node)">{{ node.label }}</span>
</span>
</template>
</el-tree>
</div>
</template>
<script>
export default {
data(){
return {
linkInfoTree:[],
dicProps: {
children: 'childrenNode',
label: 'name'
},
expandDefault:[],
activeId:""
}
}
}
</script>
<style scoped lang="scss">
// 虚线所需样式
::v-deep .treeCont {
.el-tree > .el-tree-node:after {
border-top: none;
}
.el-tree-node__children {
.el-tree-node {
position: relative;
padding-left: 16px;
}
}
//节点有间隙,隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
.el-tree-node__expand-icon.is-leaf{
width: 4px;
}
.el-tree-node__children {
padding-left: 16px;
}
.el-tree-node :last-child:before {
height: 44px;
}
.el-tree > .el-tree-node:before {
border-left: none;
}
.el-tree > .el-tree-node:after {
border-top: none;
}
.el-tree-node:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.el-tree-node:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.el-tree-node:before {
border-left: 1px dashed #c0c4cc;
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
}
.el-tree-node:after {
border-top: 1px dashed #c0c4cc;
height: 20px;
top: 18px;
width: 20px;
}
}
// 默认三角行换成加减号
::v-deep .treeCont {
.el-tree-node__content > .el-tree-node__expand-icon {
width: 14px;
}
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
//有子节点 且未展开
.el-tree .el-tree-node__expand-icon:before {
background: url("@/assets/images/jia.png") no-repeat 0;
content: "";
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
.custom-tree-node .el-icon svg{
display: block !important;
color: #000;
}
.el-icon svg {
display: none;
}
.is-leaf{
display: none;
}
//有子节点 且已展开
.el-tree .el-tree-node__expand-icon.expanded:before {
background: url("@/assets/images/jian.png") no-repeat 0;
content: "";
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
//没有子节点
.el-tree .el-tree-node__expand-icon.is-leaf::before {
background: none;
content: "";
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
}
</style>