在vue中修改el-tree前面的图标以及高亮点击的节点,点击父节点前图标展开和收缩子节点,点击父节点内容不展开和收缩子节点
默认图标:修改后的图标:代码:/*树节点前面的图标修改*/.el-tree .el-tree-node__expand-icon.expanded{-webkit-transform: rotate(0deg);transform: rotate(0deg);}.el-tree .el-icon-caret-right:before{b...
·
默认图标:
修改后的图标:
代码:
/*树节点前面的图标修改*/
.el-tree .el-tree-node__expand-icon.expanded
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before
{
background: url("../public/img/jia.png") no-repeat center center;
content: '';
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before
{
background: url("../public/img/jian.png") no-repeat center center;
content: '';
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.el-tree-node__expand-icon.is-leaf::before
{
display: none;
}
el-tree点击节点后,高亮当前点击节点的样式修改以及树节点hover时的样式修改:
需要给el-tree加上highlight-current属性
代码:
/*高亮当前选中的树节点*/
.el-tree-node.is-current > .el-tree-node__content {
background-color: #384959;
}
/*树节点点击时的样式设置*/
.el-tree-node:focus > .el-tree-node__content {
background-color: #384959;
}
/*树节点hover时的样式设置*/
.el-tree-node__content:hover {
background-color: #384959;
}
设置el-tree点击前面的图标时展开和收缩子节点,点击内容时不进行展开和收缩
:expand-on-click-node="false",//设为false即可
更多推荐
已为社区贡献2条内容
所有评论(0)