您的位置:首页 > 科技 > 能源 > element 树组件 tree 横向纵向滚动条

element 树组件 tree 横向纵向滚动条

2024/12/23 9:17:46 来源:https://blog.csdn.net/weixin_43848576/article/details/139656937  浏览:    关键词:element 树组件 tree 横向纵向滚动条

在这里插入图片描述

Html

  	 <el-cardshadow="hover"class="solo flex-2"style="height: calc(100vh - 1.6rem); border: 1px solid #ebeef5"><div slot="header" class="clearfix"><span>问题分类</span></div><div class="scroll-tree"><el-scrollbar style="height: 100%"><el-tree:data="data":props="defaultProps"@node-click="handleNodeClick"node-key="id"></el-tree></el-scrollbar></div></el-card>

样式

/* 添加水平滚动条和纵向滚动条 */
.scroll-tree {overflow: auto;height: calc(100vh - 1.6rem - 60px);
}
.scroll-tree ::-webkit-scrollbar {width: 10px;height: 10px;
}
.el-tree {display: inline-block;min-width: 100%;
}
/deep/.solo .el-card__body {padding: 0px;
}

点击节点高亮

  • tree 标签添加属性 highlight-current
/deep/.el-tree--highlight-current.el-tree-node.is-current> .el-tree-node__content {background-color: #318eff;color: #fff;
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com