＜el-tree＞左边线条样式

最新推荐文章于 2023-06-09 14:29:36 发布

TA_KA_GI

最新推荐文章于 2023-06-09 14:29:36 发布

阅读量180

点赞数

文章标签： vue.js javascript elementui Powered by 金山文档

本文链接：https://blog.csdn.net/TA_KA_GI/article/details/128917367

版权

<div class="tree-box">
  <el-tree
   ref="tree"
   class="filter-tree"
   :indent="0"
   :data="treeData"
   :props="defaultProps"
    :default-expand-all="false"
   :expand-on-click-node="false"
   :highlight-current="true"
   node-key="deptId"
   :default-expanded-keys="defaultExpandedKeys"
   @node-click="clickNode"
  />
</div>

.tree-body{
  overflow-y: hidden;
  overflow-x: auto;
}
.tree-box{
  min-width: 207px;
  // width: auto;
  display:inline-block;
}
::v-deep{
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  .el-tree > .el-tree-node{
    padding:0
  }
  .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotateX(0deg);
      transform: rotateX(0deg);
  }
  .expanded.el-tree-node__expand-icon.el-icon-caret-right:before {
      // display: block;
      // font-size: 12px;
      // // padding-left: 3.5px;
      // // padding-bottom:13px;
      // width: 15px;
      // height: 15px;
      // border: 1px solid #C0C4CC;
      // border-radius: 50%;
      // overflow:hidden;
      content: "–";
  }
  .el-icon-caret-right:before {
      display: block;
      font-size: 12px;
      width: 15px;
      height: 15px;
      text-align: center;
      line-height: 12px;
      border: 1px solid #C0C4CC;
      border-radius: 50%;
      content: "+";
      overflow:hidden;
  }
  .is-leaf.el-tree-node__expand-icon.el-icon-caret-right:before{
    width: 3px;
    border: 0px solid #C0C4CC;
  }
  .el-tree-node__expand-icon.is-leaf{
    width: 0px;
    padding: 3px;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }
  .el-tree-node :last-child:before {
    height: 38px;
  }
  .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 #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }
  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }