el-tree设置横向滚动条

最终效果:

el-tree设置横向滚动条_第1张图片

相关代码:

.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;
}

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

你可能感兴趣的:(vue.js,javascript,前端)