el-tree设置每个节点的连接线修改展开图标为加减号（附效果图）

落樱不及刘姑娘

于 2024-06-07 17:44:16 发布

阅读量407

点赞数 10

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/sh11223312/article/details/139532684

版权

  ::v-deep .treeCont {
 .el-tree > .el-tree-node:nth-of-type(1){
  border-top: none !important;
  color: red;
}
    .el-tree > .el-tree-node:after {
      border-top: none;
    }
    .el-tree :first-child{
      border-top: none !important;
    }
    .el-tree-node{
      margin-left: 10px;
    }
    .el-tree-node__children {
       .el-tree-node {
        position: relative;
        padding-left: 10px;

      }
    }
    .el-tree-node__expand-icon.is-leaf{
      width: 4px;
    }
    .el-tree-node__children {
      padding-left:10px;
      position: relative;
      top: -15px;
    }

    .el-tree-node :last-child:before {
      height: 44px;
    }
    .el-tree-node ::nth-of-type(1) {
      border-top: none !important;
      color: red;
    }

    .el-tree > .el-tree-node:before {
      border-left: none;

    }
    .el-tree-node:before {
      content: "";
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }

    .el-tree-node:after {
      content: "";
      left: 23px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }

    .el-tree-node:before {
      border-left: 1px dashed #c0c4cc;
      // bottom: 10px;
      height: 100% !important;
      left: 23px;
      top: -13px;
      width: 15px !important;
    }
    .el-tree-node:after {
      // border-top: 1px dashed #c0c4cc;
      height: 100% !important;
      width: 20px;
    }
    .el-tree-node:after {
      border-bottom: 1px dashed #c0c4cc; 
      position: absolute;
      top: -13px;
    }
}

 .el-tree ::v-deep .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.el-tree ::v-deep .el-icon-caret-right:before {
   background: url("../../views/sirmCredit/creditrating/industry/img/plus-square.png") no-repeat 0;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
.el-tree
  ::v-deep
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
   background: url("../../views/sirmCredit/creditrating/industry/img/plus-square.png") no-repeat 0;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
.el-tree ::v-deep .el-tree-node__expand-icon.is-leaf::before {
   background: none;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}