Elementui中el-tree点击关闭选中颜色问题

最新推荐文章于 2025-02-27 19:48:50 发布

「已注销」

最新推荐文章于 2025-02-27 19:48:50 发布

阅读量2.1k

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_44316317/article/details/122043266

版权

这篇博客介绍了在使用ElementUI的el-tree组件时遇到的选中高亮显示和关闭重新打开后选中状态保持的问题，以及如何在父组件中显示子节点数量。通过调整样式解决了点击后的背景色控制，并记录了悬浮状态的颜色修改方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elementui中el-tree实现选中高亮显示关闭重新打开选中不销毁效果在父组件中显示子个数

一.Element-UI tree 组件点击后高亮显示的样式修改(背景色)树，设置check-change时，点击行选中，点击三角符号可以展开，但是颜色不受控制

   <el-tree
          :data="treedata"
           accordion
           node-key="id"
           ref="tree"
           highlight-current
           :props="defaultProps"
           @check-change="handleCheckChange"
           check-on-click-node
    ></el-tree>

二. 记录一下悬浮颜色修改

/deep/ .el-tree-node__content:hover {

  background: rgba(255, 255, 255, 0.05);

}

/deep/.el-tree--highlight-current

  .el-tree-node.is-current

  > .el-tree-node__content {

  background-color:  rgba(35, 220, 205, 0.78);

}

/deep/.el-tree {

  background: #10498f;

  color: #ffffff;

}

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

  background-color:rgba(35, 220, 205, 0.78);

}

elementui 中给在父组件中显示子个数

   <el-tree :data="treeInnerSource" :props="defaultProps" accordion node-key="id" ref="tree" highlight-current  check-on-click-node  @node-click="handleNodeClickByInner">
              <div class="custom-tree-node flex" slot-scope="{ node, data }">
                <div>{{ data.name }}</div>
                <div v-if="data.pageVos&&data.pageVos.length" class="numberTips">
                  {{data.pageVos ? data.pageVos.length : ''}}
                </div>
              </div>
            </el-tree>