el-tree设置横向滚动条

最新推荐文章于 2024-06-13 16:02:55 发布

怎么吃不饱捏

最新推荐文章于 2024-06-13 16:02:55 发布

阅读量1.2k

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/song_song0927/article/details/135498704

版权

最终效果:

相关代码:

<div class="center-tree">
          <el-tree
            ref="structureRef"
            node-key="name"
            class="structure-tree"
            :data="structrueTreeData"
            :props="structureProps"
            style="height: 100%; display: inline-block; min-width: 100%"
            :default-expand-all="true"
          ></el-tree>
        </div>

.structure-tree ::v-deep .el-tree-node {
  position: relative;
  padding-left: 16px;
}
.structure-tree ::v-deep .el-tree-node__content {
  padding-left: 8px !important;
}
.structure-tree ::v-deep .el-tree-node__children {
  padding-left: 8px;
}

.structure-tree ::v-deep .el-tree-node :last-child:before {
  height: 40px;
}

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

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

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

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

.structure-tree ::v-deep .el-tree-node:before {
  border-left: 1px dashed #4386c6;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.structure-tree ::v-deep .el-tree-node:after {
  border-top: 1px dashed #4386c6;
  height: 20px;
  top: 13px;
  width: 18px;
}

水印给挡住了...但是还是能依稀看出来嗷