el-tree组件选中高亮变色

最新推荐文章于 2024-12-18 20:18:23 发布

原创最新推荐文章于 2024-12-18 20:18:23 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

36 篇文章

订阅专栏

文章介绍了如何通过添加自定义CSS类来改变Vue.js中的el-tree组件在获得焦点时节点内容的颜色，提供了外层和组件自身的两种实现方式。

只需要给el-tree外层或者自身加上一个css即可

关键样式

/* tree选中变色 */
    .selecttree .el-tree-node:focus > .el-tree-node__content {
      color: yellow !important;
      /*background-color: rgba(135, 206, 235, 0.2);*/
    }

el-tree组件

外层
<el-scrollbar height="100%" class="selecttree">
   <el-tree :data="videoData" ref="sxttree" node-key="id" default-expand-all='true'
        :default-checked-keys="[]" :props="defaultProps" class="tree-style"
        :filter-node-method="filterNode" @node-click="nodeclick"/>
</el-scrollbar>



自身
<el-tree :data="videoData" ref="sxttree" node-key="id" default-expand-all='true'
   :default-checked-keys="[]" :props="defaultProps" class="tree-style selecttree"
:filter-node-method="filterNode" @node-click="nodeclick"/>