element自定义树形结构

最新推荐文章于 2024-10-09 17:49:21 发布

m0_46701899

最新推荐文章于 2024-10-09 17:49:21 发布

阅读量661

点赞数

文章标签： css vue.js elementui

本文链接：https://blog.csdn.net/m0_46701899/article/details/122103609

版权

本文主要介绍了如何结合CSS、HTML和JavaScript，利用ElementUI框架自定义一款满足特定需求的树形结构组件。首先，详细讲解了CSS部分的样式设置，接着阐述了HTML结构的构建，最后探讨了JavaScript在实现树形结构交互中的关键代码。

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

1css样式部分

.centerChapter-box .el-tree-node__content {
				height: 100%;
				width: 100%;
				
			}
.centerChapter-box .el-tree-node > .el-tree-node__children{
				overflow:inherit;
			}
.tree-b-box {
	position: relative;
	width: 100%;

}
.tree-box-w {
	height: 100%;
	position: relative;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
}

.tree-box {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
}
.tree_content_box {
	display: flex !important;
	align-items: center;
}
.tree-iocn-box {
	width: 24px;
	height: 24px;
}
.tree-iocn-box img {
	width: 100%;
	height: 100%;
}
.tree-t {
	margin-left: 10px;
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.finish-box {
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #969696 !important;
}
.share-box {
	position: absolute;
	top: 0;
	box-shadow: 0px 2px 9px