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;
}
相关推荐
格林威6 分钟前
Baumer工业相机堡盟工业相机如何通过DeepOCR模型识别判断数值和字符串的范围和相似度(C#)
开发语言·人工智能·python·数码相机·计算机视觉·c#·视觉检测
sanggou8 分钟前
InterSystems IRIS安装部署
开发语言
初心w50t214 分钟前
Vue 前端开发性能优化攻略
前端·javascript·vue.js
presenttttt1 小时前
用Python和OpenCV从零搭建一个完整的双目视觉系统(五)
开发语言·python·opencv·计算机视觉
3Katrina1 小时前
前端面试之防抖节流(一)
前端·javascript·面试
kk_stoper1 小时前
使用Ruby接入实时行情API教程
java·开发语言·javascript·数据结构·后端·python·ruby
浏览器API调用工程师_Taylor1 小时前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
FogLetter1 小时前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
轻语呢喃2 小时前
js事件机制:监听、捕获、冒泡与委托
javascript
小李飞飞砖2 小时前
kotlin
开发语言·单例模式·kotlin