elementUI树形组件添加连线和自定义图标

最新推荐文章于 2024-08-25 21:18:07 发布

1024_Byte

最新推荐文章于 2024-08-25 21:18:07 发布

阅读量1.3k

点赞数 2

分类专栏： css vue 文章标签： vue css js html

原文链接：https://blog.csdn.net/XiaoBo_S/article/details/104593412

版权

vue 同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

1.elementUI的树形组件官网样例节点之间是没有连线的，想要实现如下图节点之间出现连线需要自己定义树形插件的样式覆盖el-tree内部的样式类

首先要给el-tree添加两个样式类

一个添加到el-tree本身的class上，另外一个添加到包裹el-tree的外层div,具体的样式代码如下

/* 树形结构节点添加连线 */
.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:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
.tree /deep/ .el-tree-node__expand-icon.is-leaf {
  display: none;
}
 
.tree /deep/ .el-tree-node:before {
  border-left: 1px dashed #b8b9bb;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}
 
.tree /deep/ .el-tree-node:after {
  border-top: 1px dashed #b8b9bb;
  height: 20px;
  top: 12px;
  width: 24px;
}

这样就可以实现各个节点之间的连线，自己也可以自定义连线的颜色线条粗细等一系列属性