el-tree树结构添加指引线

最新推荐文章于 2024-06-30 10:22:34 发布

zou-dev

最新推荐文章于 2024-06-30 10:22:34 发布

阅读量931

点赞数 12

分类专栏： vue element 文章标签： elementui 前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_59423799/article/details/135993633

版权

vue 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

element

7 篇文章 0 订阅

订阅专栏

用element的el-tree树时，展开收缩的数据当数据量大时就会显示的杂乱，不容易查看，所以希望是能像zTree一样支持有指引线。

重点就是需要在el-tree标签上添加class="treeLine"

css

.treeLine {
	::v-deep .el-tree-node {
		position: relative;
		padding-left: 16px;
	}
	::v-deep .el-tree-node__children {
		padding-left: 16px;
	}
	// 竖线
	::v-deep .el-tree-node::before {
		content: '';
		height: 100%;
		width: 1px;
		position: absolute;
		left: -3px;
		top: -26px;
		border-width: 1px;
		border-left: 1px dashed #ccc;
	}
	::v-deep .el-tree-node:last-child::before {
		height: 38px;
	}
	// 横线
	::v-deep .el-tree-node::after {
		content: '';
		width: 24px;
		height: 20px;
		position: absolute;
		left: -3px;
		top: 12px;
		border-width: 1px;
		border-top: 1px dashed #ccc;
	}
	& > ::v-deep .el-tree-node::after {
		border-top: none;
	}
	& > ::v-deep .el-tree-node::before {
		border-left: none;
	}
	::v-deep .el-tree-node__expand-icon {
		font-size: 16px;
		::v-deep &.is-leaf {
			color: transparent;
		}
	}
}