点击el-tree小三角后去除点击后的高亮背景样式,el-tree样式修改

2023-12-13 13:27:45

<div

? ? ? ? ? ? ? class="videoTree"

? ? ? ? ? ? ? v-loading="loadingTree"

? ? ? ? ? ? ? element-loading-text="加载中..."

? ? ? ? ? ? ? element-loading-spinner="el-icon-loading"

? ? ? ? ? ? ? element-loading-background="rgba(0, 0, 0, 0.8)"

? ? ? ? ? ? >

? ? ? ? ? ? ? <el-tree

? ? ? ? ? ? ? ? :default-expand-all="true"

? ? ? ? ? ? ? ? class="trees"

? ? ? ? ? ? ? ? :data="cameraData"

? ? ? ? ? ? ? ? :props="defaultProps"

? ? ? ? ? ? ? ? @node-click="handleNodeClick"

? ? ? ? ? ? ? ? :highlight-current="true"

? ? ? ? ? ? ? >

? ? ? ? ? ? ? </el-tree>

? ? ? ? ? ? </div>

// el-tree 点击三角去除默认高亮样式(这一句代码)

::v-deep .el-tree-node:focus > .el-tree-node__content {

? ? ? ? ? background-color: transparent !important;

? ? ? ? }

下面是设置el-tree样式的代码

.videoTree {

? ? ? ? height: calc(100% - 38px);

? ? ? ? overflow-y: auto;

? ? ? ? .el-tree--highlight-current

? ? ? ? ? .el-tree-node.is-current

? ? ? ? ? > .el-tree-node__content {

? ? ? ? ? background-color: transparent;

? ? ? ? ? background: rgba(128, 243, 232, 0.1);

? ? ? ? ? border-left: 2px solid #33fdff;

? ? ? ? ? color: #80f3e8;

? ? ? ? ? font-weight: bold;

? ? ? ? }

? ? ? ? .el-tree-node__content:hover {

? ? ? ? ? background-color: transparent;

? ? ? ? }

? ? ? ? .trees {

? ? ? ? ? background: transparent;

? ? ? ? ? color: #fff;

? ? ? ? }

? ? ? }

? ? ? ?

? ? }

文章来源:https://blog.csdn.net/wwf1225/article/details/134832697
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。