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

最新推荐文章于 2024-10-10 14:58:44 发布

WYB_Phil

最新推荐文章于 2024-10-10 14:58:44 发布

阅读量1w

点赞数 5

分类专栏： vue

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

版权

本文介绍了如何在elementUI的树形组件中添加连线和自定义图标。通过定义新的样式类并覆盖el-tree的默认样式，可以实现节点间的连线效果，并能自由调整线条属性。此外，利用scoped slot插槽和后台数据，可以在每个节点前展示自定义图标。

摘要由CSDN通过智能技术生成

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

.tre