el-table、el-menu、el-tree样式重置

最新推荐文章于 2024-08-13 00:11:49 发布

meetAlice

最新推荐文章于 2024-08-13 00:11:49 发布

阅读量1.5k

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_42129143/article/details/119345481

版权

前端专栏收录该内容

31 篇文章

订阅专栏

el-table样式重置

/deep/ .el-table,/deep/ .el-table__expanded-cell{
	background: transparent;
}
/deep/ .el-table th, /deep/ .el-table tr{
	background: transparent;
}
/deep/ .el-table td,/deep/ .el-table th.is-leaf{
	border: none;
}
//设置斑马纹的颜色
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td{
	background: rgba(16, 135, 255, 0.05);;
}
/deep/ .el-table--border::after, /deep/ .el-table--group::after, /deep/ .el-table::before{
	content:none;
}
/deep/ .el-table__body tr:hover>td{
	background-color: transparent;
}

el-menu样式重置

/*el-menu统一样式*/
.el_menu_yjbj /deep/{
	border-right: none;
	/*鼠标悬停时修改item背景颜色*/
	.el-menu-item:hover{
		background: rgba(16, 135, 255, 0.1)!important;
	}
	/*鼠标悬停时修改二级菜单的父菜单背景颜色*/
	.el-submenu__title:focus, .el-submenu__title:hover{
		outline: 0 !important;
		background: none !important;
		background: rgba(16, 135, 255, 0.1)!important;
	}
	/*设置二级菜单选中时 父菜单字体颜色也改变*/
	.el-submenu.is-active .el-submenu__title{
		color: #C4FFFF!important;
	}
}

el-tree样式重置

/*树状图统一样式*/
/* 去掉旋转效果 */
.el-tree{
	background: transparent;
}
/deep/ .el-tree-node__expand-icon{
	color: initial;
	transform: initial;
}
/*去掉统一设置的icon*/
/deep/.el-icon-caret-right:before{
	content: none;
}
/*设置父级icon*/
/deep/ .expanded{
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	font-size: 18px;
	background-size: 100% 100%;
}
/*设置子级icon*/
/deep/ .is-leaf{
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	font-size: 18px;
}
/*设置ztree字体颜色*/
/deep/ .el-tree-node__label{
	color: #fff;
	margin-left: 5px;
}
/*鼠标悬停的背景色*/
/deep/ .el-tree-node__content{
	height: 46px;
	&:hover{
		background-color: transparent;
	}
}
/*选中某个的背景色*/
/deep/ .el-tree-node.is-current > .el-tree-node__content {
	background: transparent;
}