vue elementUI el-tree的样式,修改鼠标点击时点击后的颜色

最新推荐文章于 2024-05-27 14:23:55 发布

北觅_小太阳

最新推荐文章于 2024-05-27 14:23:55 发布

阅读量1.9k

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_52775179/article/details/130584234

版权

该文章展示了如何在Vue.js的El-Tree组件中通过绑定current-node-key和监听node-click事件实现节点点击高亮。同时，提供了SCSS代码片段来改变被点击节点及失焦时的背景颜色和字体颜色，以达到视觉突出的效果。

摘要由CSDN通过智能技术生成

!-- highlight-current 要添加高亮属性 -->
<el-tree ref="treeForm" current-node-key node-key="depart_id" :data="list" :props="defaultProps" @node-click="handleNodeClick" ></el-tree>

<style scoped lang='scss'>
  /* 改变被点击节点背景颜色，字体颜色 */
  .el-tree-node:focus > .el-tree-node__content {
    background-color: #4a9de7 !important;
    color: #fff !important;
  }
  /*节点失焦时的背景颜色*/
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
    background-color: #4a9de7 !important;
    color: #fff !important;
  }
</style>