ElementUI中el-tree树形结构加线条 默认三角形改成加减号

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>