【el-tree 文字过长处理方案】

文字过长处理方案

  • 一、示例代码
  • 二、关键代码
  • 三、效果图

一、示例代码

<divstyle="height: 600px;overflow: auto"class="text item"><el-treeref="tree":data="treeData":props="defaultProps"class="filter-tree"node-key="id"default-expand-all-click="getTableData"><templateslot-scope="{node}"class="custom-tree-node"><!--                <span>{{ node.label }}</span>--><!--                <span v-show="!data.children"><el-button type="text" size="mini" ="() => crud.toAdd(data)">新增</el-button></span>--><spanv-if="node.label.length <= 10"class="tree-text"> {{ node.label }}</span><el-tooltipv-elseeffect="dark":content="node.label"placement="top"><span class="tree-text"> {{ node.label }}</span></el-tooltip></template></el-tree></div>

二、关键代码

  1. 树形代码
    <spanv-if="node.label.length <= 10"class="tree-text"> {{ node.label }}</span><el-tooltipv-elseeffect="dark":content="node.label"placement="top"><span class="tree-text"> {{ node.label }}</span></el-tooltip>
  1. 样式代码
.tree-text {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;display: inline-block;min-width: 300px;
}

三、效果图

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

fast.ai 深度学习笔记(四)

深度学习 2&#xff1a;第 2 部分第 8 课 原文&#xff1a;medium.com/hiromi_suenaga/deep-learning-2-part-2-lesson-8-5ae195c49493 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 来自 fast.ai 课程的个人笔记。随着我继续复习课程以“真正”理解它&#xff0c;这…

6.0 Zookeeper session 基本原理详解教程

客户端与服务端之间的连接是基于 TCP 长连接&#xff0c;client 端连接 server 端默认的 2181 端口&#xff0c;也就 是 session 会话。 从第一次连接建立开始&#xff0c;客户端开始会话的生命周期&#xff0c;客户端向服务端的ping包请求&#xff0c;每个会话都可以设置一个…

数据分析基础之《pandas(6)—高级处理》

一、缺失值处理 1、如何处理nan 两种思路&#xff1a; &#xff08;1&#xff09;如果样本量很大&#xff0c;可以删除含有缺失值的样本 &#xff08;2&#xff09;如果要珍惜每一个样本&#xff0c;可以替换/插补&#xff08;计算平均值或中位数&#xff09; 2、判断数据是否…

爬虫练习——动态网页的爬取(股票和百度翻译)

动态网页也是字面意思&#xff1a;实时更新的那种 还有就是你在股票这个网站上&#xff0c;翻页。他的地址是不变的 是动态的加载&#xff0c;真正我不太清楚&#xff0c;只知道他是不变的。如果用静态网页的方法就不可行了。 静态网页的翻页&#xff0c;是网址是有规律的。 …

【正在更新】从零开始认识语音识别:DNN-HMM混合系统语音识别(ASR)原理

摘要 | Abstract TO-BE-FILLED 1.前言 | Introduction 近期想深入了解语音识别(ASR)中隐马尔可夫模型(HMM)和深度神经网络-隐马尔可夫(DNN-HMM)混合模型&#xff0c;但是尽管网络上有许多关于DNN-HMM的介绍&#xff0c;如李宏毅教授的《深度学习人类语言处理》[1]&#xff0c;…

office 2021安装教程(官方自动批量激活,无付费)

全程不需要第三方软件&#xff0c;所有用到的工具都是微软官方的&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 基于KMS的 GVLK&#xff1a;https://learn.microsoft.com/zh-cn/deployoffice/vlactivation/gvlks 首先我们需要去下载 office 软件部署工具&a…

二、数据结构

链表 单链表 https://www.acwing.com/problem/content/828/ #include<iostream> using namespace std; const int N 1e5 10; //head:头节点的指向 e[i]:当前节点i的值 ne[i]:当前节点i的next指针 idx:当前存储的点 int head, e[N], ne[N], idx;//初始化 void i…

01动力云客之环境准备+前端Vite搭建VUE项目入门+引入Element PLUS

1. 技术选型 前端&#xff1a;Html、CSS、JavaScript、Vue、Axios、Element Plus 后端&#xff1a;Spring Boot、Spring Security、MyBatis、MySQL、Redis 相关组件&#xff1a;HiKariCP&#xff08;Spring Boot默认数据库连接池&#xff09;、Spring-Data-Redis&#xff08;S…

【多模态大模型】视觉大模型SAM:如何使模型能够处理任意图像的分割任务?

SAM&#xff1a;如何使模型能够处理任意图像的分割任务&#xff1f; 核心思想起始问题: 如何使模型能够处理任意图像的分割任务&#xff1f;5why分析5so分析 总结子问题1: 如何编码输入图像以适应分割任务&#xff1f;子问题2: 如何处理各种形式的分割提示&#xff1f;子问题3:…

43.1k star, 免费开源的 markdown 编辑器

简介 项目名&#xff1a; MarkText-- 简单而优雅的开源 Markdown 编辑器 Github 开源地址&#xff1a; https://github.com/marktext/marktext 官网&#xff1a; https://www.marktext.cc/ 支持平台&#xff1a; Linux, macOS 以及 Windows。 操作界面&#xff1a; 在操作界…

vueRouter中Hash模式和History模式有什么区别

VueRouter是Vue.js官方推荐的前端路由库&#xff0c;它提供了一种方便的方式来构建单页应用&#xff08;SPA&#xff09;。在使用VueRouter时&#xff0c;我们可以选择不同的路由模式&#xff0c;其中最常见的是Hash模式和History模式。本文将深入探讨这两种模式的区别&#xf…

资产管理系统技术架构设计与实现

资产管理系统在现代金融领域扮演着至关重要的角色。它不仅帮助机构有效管理和优化资产配置&#xff0c;还提供了风险控制、绩效评估等功能。本文将探讨资产管理系统的技术架构设计与实现&#xff0c;以帮助读者深入了解该系统&#xff0c;并为其开发和部署提供参考。 1. 概述资…

【算法与数据结构】496、503、LeetCode下一个更大元素I II

文章目录 一、496、下一个更大元素 I二、503、下一个更大元素II三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、496、下一个更大元素 I 思路分析&#xff1a;本题思路和【算法与数据结构】739、LeetCode每日温度类似…

spring boot和spring cloud项目中配置文件application和bootstrap中的值与对应的配置类绑定处理

在前面的文章基础上 https://blog.csdn.net/zlpzlpzyd/article/details/136065211 加载完文件转换为 Environment 中对应的值之后&#xff0c;接下来需要将对应的值与对应的配置类进行绑定&#xff0c;方便对应的组件取值处理接下来的操作。 对应的配置值与配置类绑定通过 Con…

排序算法---堆排序

原创不易&#xff0c;转载请注明出处。欢迎点赞收藏~ 堆排序&#xff08;Heap Sort&#xff09;是一种基于二叉堆数据结构的排序算法。它将待排序的元素构建成一个最大堆&#xff08;或最小堆&#xff09;&#xff0c;然后逐步将堆顶元素与堆的最后一个元素交换位置&#xff0c…

AI助力农作物自动采摘,基于YOLOv5全系列【n/s/m/l/x】参数模型开发构建作番茄采摘场景下番茄成熟度检测识别计数分析系统

去年十一那会无意间刷到一个视频展示的就是德国机械收割机非常高效自动化地24小时不间断地在超广阔的土地上采摘各种作物&#xff0c;专家设计出来了很多用于采摘不同农作物的大型机械&#xff0c;看着非常震撼&#xff0c;但是我们国内农业的发展还是相对比较滞后的&#xff0…

Mysql-数据库优化-客户端连接参数

客户端参数 原文地址 # 连接池配置 # 初始化连接数 spring.datasource.druid.initial-size1 # 最小空闲连接数&#xff0c;一般设置和initial-size一致 spring.datasource.druid.min-idle1 # 最大活动连接数&#xff0c;一个数据库能够支撑最大的连接数是多少呢&#xff1f; …

PKI - 借助Nginx 实现Https_使用CA签发证书

文章目录 Pre概述操作步骤1. 生成 CA 密钥对2. 生成自签名的 CA 证书3. 生成服务器密钥对和证书签名请求 (CSR)4. 使用 CA 签署服务器证书 Nginx Https 自签证书1. 生成自签名证书和私钥2. 配置 Nginx 使用 CA签发的 HTTPS 证书3. 重启 Nginx 服务4. 直接访问5. 不验证证书直接…

【书生·浦语大模型实战营】学习笔记1

大模型成为发展通用人工智能的重要途经 专用模型&#xff1a;针对特定任务&#xff0c;一个模型解决一个问题 通用大模型&#xff1a;一个模型应对多种任务、多种模态 书生浦语大模型系列 上海人工智能实验室 轻量级、中量级、重量级 7B 和 123B的轻量级和中量级大模型都是开源…

【数据结构】二叉树的顺序结构及实现(堆)

目录 1.二叉树的顺序结构 2.堆的概念及结构 3.堆的实现 3.1堆向下调整算法 3.2堆的创建 3.3建堆的时间复杂度 3.4堆的插入 3.5堆的删除 3.6堆的代码实现 3.7堆的应用 3.71堆排序 3.72 TOP-K问题 1.二叉树的顺序结构 普通的二叉树是不适合用数组来存储的&#xff0c;因…