element树样式的修改,可以参考一下,实现效果和代码有展示

有关树控件样式的修改,实现效果如下:

贴上html代码:

<div class="treegroup">
            <div class="righttree">
            // 一共有三个数并排展示,由于截图大小原因这个没有截出来,所以代码省略,跟下面的树一样的,一个掌握了,想要实现N多树都是一样的道理
            </div>
            <div class="righttree">
              <el-tree
                class="tree"
                ref="operationstree"
                :data="operationsTressdata"
                default-expand-all
                @node-click="handleNodeClick"
              ></el-tree>
            </div>
            <div class="righttree">
              <el-tree
                class="tree"
                ref="commandstree"
                :data="commandsTressdata"
                default-expand-all
                @node-click="handleNodeClick"
              ></el-tree>
            </div>
     </div>

贴上css样式,这里是重点
可以根据自己的需求来增加删改里面的样式

  //权限树的样式
  .treegroup {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-around;
    .tree {
      // flex:1;
      padding: 0 60px;
    }
  }
  
  .righttree {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
  }

  //  .tree /deep/ .el-tree-node__expand-icon.expanded {
  //   display: none;
  // }

  // /deep/ .el-icon-caret-right:before {
  //   //   display: none;
  // }

  /deep/ .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  .tree /deep/ .el-tree-node {
    position: relative;
    padding-left: 16px;
  }

  .tree /deep/ .el-tree-node__children {
    padding-left: 16px;
  }

  .tree /deep/ .el-tree-node :last-child:before {
    height: 38px;
  }

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

  .tree-container /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
  }

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

  .tree /deep/ .el-tree-node__children .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 2px;
  }

  .tree /deep/ .el-tree-node__children .el-tree-node:before {
    border-left: 2px dashed #ffd791;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
    // z-index: 999;
    // position: absolute;
  }

  .tree /deep/ .el-tree-node:after {
    border-top: 2px dashed #ffd791;
    height: 35px;
    top: 10px;
    width: 24px;
  }

  /deep/ .el-tree-node__children .el-tree-node__label {
    flex: 1;
    background-color: #fc9053;
    color: #fff;
    height: 25px;
    line-height: 25px;
    padding-left: 10px;
  }

  /deep/ .el-tree-node__content {
    // margin-left: 25px;
    margin-bottom: 8px;
  }

  /deep/ .el-tree-node__children .el-tree-node__content {
    margin-left: 5px;
  }

  /deep/ .el-tree-node__children .el-tree-node__content {
    padding-left: 0 !important;
  }

❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
❤如果喜欢比卡丘分享的文章，就给比卡丘点个关注吧！(๑′ᴗ‵๑)づ╭❤～
❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论(请勿发表攻击言论)

拿走,不用谢!!!送人玫瑰,手留余香