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

Html

js 复制代码
  	 <el-card
        shadow="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>

样式

js 复制代码
/* 添加水平滚动条和纵向滚动条 */
.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
css 复制代码
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #318eff;
  color: #fff;
}
相关推荐
前端进阶者5 分钟前
天地图InfoWindow插入React自定义组件
前端·javascript
扶我起来还能学_7 分钟前
uniapp Android&iOS 定位权限检查
android·javascript·ios·前端框架·uni-app
爱学习的茄子15 分钟前
JavaScript闭包实战:防抖的优雅实现
前端·javascript·面试
前端付豪15 分钟前
9、前端日志埋点系统的架构设计
前端·javascript·架构
源猿人16 分钟前
基于 Cornerstone.js 的 Vue2 DICOM 医学图像浏览器开发实录
前端·javascript
双叶83619 分钟前
(C++)任务管理系统(正式版)(迭代器)(list列表基础教程)(STL基础知识)
c语言·开发语言·数据结构·c++·list
七七七七0732 分钟前
类与对象【下篇】-- 关于类的其它语法
c语言·开发语言·c++
削好皮的Pineapple!33 分钟前
C语言模块化编程思维以及直流电机控制(第四天)
c语言·开发语言·单片机
im_AMBER38 分钟前
python实践思路(草拟计划+方法)
开发语言·python
黄皮の电气鼠39 分钟前
C++:继承
开发语言·c++·算法