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

news2024/10/7 12:28:06

在这里插入图片描述

Html

  	 <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>

样式

/* 添加水平滚动条和纵向滚动条 */
.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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1818904.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

千万级流量冲击下,如何保证极致性能

1 简要介绍 随着互联网的快速发展&#xff0c;网络应用的流量规模不断攀升&#xff0c;特别是在电商大促、明星直播、重大赛事、头条热搜等热点事件中&#xff0c;秒级100w请求成为了常态。在这样的流量冲击下&#xff0c;如何确保系统稳定、高效地处理每一个请求&#xff0c;为…

ip地址公和内有什么区别

在数字化世界中&#xff0c;IP地址扮演着至关重要的角色。它不仅是网络设备的身份标识&#xff0c;更是信息传输的桥梁。然而&#xff0c;并非所有IP地址都拥有相同的属性和功能。公有IP地址和私有IP地址&#xff0c;作为IP地址的两大类别&#xff0c;它们存在着显著的差异。虎…

【网络编程】基于TCP的服务器端/客户端

TCP是Transmission Control Protocol(传输控制协议)简写。因为TCP套接字是面向连接的&#xff0c;因此又称为基于流的套接字。 把协议分为多个层次&#xff0c;设计更容易&#xff0c;通过标准化操作设计开放式系统 网络层介绍 链路层 链路层是物理连接领域标准化的结果&…

车牌号识别(低级版)

import cv2 from matplotlib import pyplot as plt import os import numpy as np from paddleocr import PaddleOCR, draw_ocr from PIL import Image, ImageDraw, ImageFont# 利用paddelOCR进行文字扫描&#xff0c;并输出结果 def text_scan(img_path):ocr PaddleOCR(use_a…

自养号测评避坑指南

朋友们&#xff0c;今天来聊一聊关于自养号测评的一些重要知识点——自养号测评避坑指南。 在跨境电商领域中&#xff0c;自养号测评是每个卖家必需要会的技术。它能帮助商家提升店铺的权重和产品排名&#xff0c;从而带来曝光率和销售量。 但这个过程里也有不少坑&#xff0…

失眠焦虑的解脱之道:找回内心的平静

&#x1f343; 在这个快节奏的时代&#xff0c;失眠与焦虑似乎成了许多人的隐形敌人。每当夜幕降临&#xff0c;它们便悄悄潜入心底&#xff0c;扰乱我们的思绪&#xff0c;让宁静的夜晚变得无比漫长。然而&#xff0c;生活总有办法让我们找回内心的平静&#xff0c;只需稍作调…

OLED柔性屏的显示效果如何

OLED柔性屏的显示效果非常出色&#xff0c;具有多方面的优势。以下是关于OLED柔性屏显示效果的详细分析&#xff1a; 色彩表现&#xff1a;OLED柔性屏的每个像素都可以独立发光&#xff0c;因此色彩准确性极高。黑色呈现得非常深邃&#xff0c;而亮部则展现出鲜明而生动的细节。…

2024网络安全学习路线 非常详细 推荐学习

关键词&#xff1a;网络安全入门、渗透测试学习、零基础学安全、网络安全学习路线 首先咱们聊聊&#xff0c;学习网络安全方向通常会有哪些问题 1、打基础时间太长 学基础花费很长时间&#xff0c;光语言都有几门&#xff0c;有些人会倒在学习 linux 系统及命令的路上&#…

【云原生】Kubernetes----Rancher助力Kubernetes监控

目录 引言 一、为什么需要监控K8s集群&#xff1f; 二、Rancher监控K8s集群的优势 三、Rancher和k8s的区别 四、Rancher 安装及配置 &#xff08;一&#xff09;安装rancher 1.下载镜像 2.运行容器 3.登录Rancher平台 4.添加集群 5.查看集群 6.Rancher 部署监控系统…

私域引流宝PHP源码 以及搭建教程

私域引流宝PHP源码 以及搭建教程

uni-date-picker 禁用日期功能

在uni-datetime-picker组件中 calendar.vue <template><view class"uni-calendar" mouseleave"leaveCale"><view v-if"!insert && show" class"uni-calendar__mask" :class"{uni-calendar--mask-show:an…

Linux服务器快速下载GoogleDriver小技巧——利用gdown工具

Linux服务器快速下载GoogleDriver小技巧——利用gdown工具 1. 安装gdown pip install gdown安装好后如果在终端输入gdown显示如下错误&#xff1a;gdown: command not found&#xff0c;则说明gdown默认安装的位置需要软链接一下&#xff0c;执行以下命令&#xff1a; sudo …

坑记(MySQL之delete操作)

背景知识 我们知道MySQL有两种删除操作&#xff1a;delete和truncate。 二者之间是否一样&#xff0c;且看以下内容&#xff1a; 操作名称操作简介deleteDML中的一种&#xff0c;操作对象是记录&#xff0c;即table中的一行&#xff0c;可恢复&#xff0c;速度慢truncateDDL中…

怎么防止源代码泄露?9种方法教会你!

怎么防止源代码泄露&#xff1f;首先要了解员工可以通过哪些方式将源代码传输出去&#xff01; 物理方法&#xff1a; — 网线直连&#xff0c;即把网线从墙上插头拔下来&#xff0c;然后和一个非受控电脑直连; — winPE启动&#xff0c;通过光盘或U盘的winPE启动&#xff0c;甚…

execl拷贝图片

1&#xff1a;拷贝图片 #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h>int main(int argc, const char *argv[]) {//在子进程拥有和父进程一样的拷贝文件(确保拷贝文件为空)int fp_…

SSC30KD SigmaStar 摄像头主控芯片

SSC30KD SigmaStar 摄像头主控芯片

# RocketMQ 实战:模拟电商网站场景综合案例(十一)

RocketMQ 实战&#xff1a;模拟电商网站场景综合案例&#xff08;十一&#xff09; 一、RocketMQ 实战&#xff1a;模拟电商网站场景综合案例-- web 端项目开发 1、在 shop-order-web 工程模块中&#xff0c;创建 Controller 类 OrderControllre.java /*** shop\shop-order…

Threejs-09、贴图的加载与环境遮蔽强度设置

1、创建文理加载器 let textureLoader new THREE.TextureLoader();2、加载贴图 // 加载文理 let texture textureLoader.load("./img/image.png") // 加载ao贴图 let aoMap textureLoader.load("./img/image.png");3、创建一个平面 let planeGeomet…

这总商务会议图怎么绘制?一行代码搞定...

今天这篇推文小编给大家介绍一个一直想绘制的图表-议会图(parliament diagrams),当然这也是柱形图系列变形的一种。绘制这种图表也是超级简单的&#xff0c;只需使用R-ggpol包进行绘制即可&#xff0c;当然&#xff0c;改包还提供其他优秀的绘图函数&#xff0c;下面就一起来看…

Final Cut Pro:剪辑之巅,创意无界

Final Cut Pro是一款由Apple推出的专业视频剪辑软件&#xff0c;以其强大的功能和卓越的性能&#xff0c;成为众多影视制作人员、广告设计师和视频编辑师的首选工具。 Final Cut Pro获取 Final Cut Pro提供了丰富的剪辑功能&#xff0c;包括多轨道编辑、精确剪辑控制、实时预览…