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

文字过长处理方案

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

一、示例代码

<div
            style="height: 600px;overflow: auto"
            class="text item"
          >
            <el-tree
              ref="tree"
              :data="treeData"
              :props="defaultProps"
              class="filter-tree"
              node-key="id"
              default-expand-all
              -click="getTableData"
            >
              <template
                slot-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>-->
                <span
                  v-if="node.label.length <= 10"
                  class="tree-text"
                > {{ node.label }}</span>
                <el-tooltip
                  v-else
                  effect="dark"
                  :content="node.label"
                  placement="top"
                >
                  <span class="tree-text"> {{ node.label }}</span>
                </el-tooltip>
              </template>
            </el-tree>
          </div>

二、关键代码

  1. 树形代码
    <span
        v-if="node.label.length <= 10"
                  class="tree-text"
                > {{ node.label }}</span>
                <el-tooltip
                  v-else
                  effect="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;
}

三、效果图

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++ 语法文件

程序运行时产生的数据都属于临时数据&#xff0c;程序结束就会被释放。 通过文件可以可以将数据持久化 c中对文件操作需要包含头文件fstream 文件的类型分为两种 1.文本文件 文件以文本的ASCII码形式存储在计算机中 2.二进制文件 稳重以文本的二进制形式存储在计算机中 用…

【云原生之kubernetes系列】--HPA自动伸缩

HPA自动伸缩 HorizontalPodAutoscaler&#xff08;简称 HPA &#xff09;自动更新工作负载资源&#xff08;例如Deployment或者Statefulset)&#xff0c;目的是让pod可以自动扩缩工作负载以满足业务需求。 水平扩缩意味着对增加的负载的响应是部署更多的Pod。这与“垂直&…

MIT_线性代数笔记:第 34 讲 总复习

目录 试题1试题2试题3试题4试题5 本讲为线性代数课程总复习&#xff0c;复习的方法就是做往年试题。 试题1 1&#xff09;已知 Ax [ 1 0 0 ] \begin{bmatrix} 1\\0\\0 \end{bmatrix} ​100​ ​ 无解&#xff0c;Ax [ 0 1 0 ] \begin{bmatrix} 0\\1\\0 \end{bmatrix} ​010​ …

锐捷VSU和M-LAG介绍

参考网站 堆叠、级联和集群的概念 什么是堆叠&#xff1f; 框式集群典型配置 RG-S6230[RG-S6501-48VS8CQ]系列交换机 RGOS 12.5(4)B1005版本 配置指南 总结 根据以上的几篇文章总结如下&#xff1a; 级联&#xff1a;简单&#xff0c;交换机相连就叫级联&#xff0c;跟搭…

2-1 动手学深度学习v2-Softmax回归-笔记

回归 VS 分类 回归估计一个连续值分类预测一个离散类别 从回归到多类分类 回归 单连续数值输出输出的区间&#xff1a;自然区间 R \mathbb{R} R损失&#xff1a;跟真实值的区别 分类 通常多个输出&#xff08;这个输出的个数是等于类别的个数&#xff09;输出的第 i i i…

0-MQTT基础使用教程【学习】

文件路径 MQTT基础使用教程1. MQTT1.1 MQTT简介1.1.1 什么是MQTT1.1.2 设计原则1.1.3 应用领域1.2 MQTT协议相关概念1.2.1 MQTT协议实现方式1.2.2 MQTT协议中的方法1.3 消息服务质量QoS1.3.1 消息服务质量QoS三个等级1.3.2 发布与订阅QoS1.4 Topic通配符匹配规则2. EMQX2.1 EMQ…

工程机械设备通讯如何选?CAN控制器 以太网控制器

在工程机械设备的通讯世界中&#xff0c;有四种主流的通讯方式各领风骚。它们各有特色&#xff0c;适用于不同的场景和需求。让我们一起来深入了解它们&#xff0c;看看如何为自己的设备选择最合适的通讯方式吧&#xff01; 以太网通讯 特点速览&#xff1a;高速、稳如磐石、…

IP代理在网络中解决了哪些问题?代理IP使用时效是什么意思?

随着互联网的普及和发展&#xff0c;IP代理作为一种网络工具&#xff0c;被广泛应用于各种场景。IP代理的使用可以解决很多网络中的问题&#xff0c;提高网络访问的速度和安全性。本文将详细介绍IP代理在网络中解决的问题&#xff0c;以及代理IP使用时效的含义。 一、IP代理在网…

用python实现pdf按页切割,以及将pdf转成图片

我们经常遇到需要切割pdf的时候&#xff0c;但是常规手段很难做到 我们可以利用python脚本来实现 需要安装几个库 tk PyPDF2 PyMuPDF pyinstaller 上图&#xff01; 查看结果 切割pdf转存成图像 那我们来详细说一下使用方法 1.输入PDF位置:这里没什么好说的&#xff0c…

vue3:24—组件通信方式

1、props 子组件也可以如下调用父组件的方法 2、自定义事件 &#xff08;emit&#xff09; 3、mitt&#xff08;任意组件的通讯&#xff09; 1. pubsub 2. $bus 3. mitt 接收数据的:提前绑定好事件(提前订阅消息)提供数据的:在合适的时候触发事件发布消息) 安装mitt npm i…

NLP深入学习:《A Survey of Large Language Models》详细学习(三)

文章目录 1. 前言2. 预训练2.1 数据搜集与准备2.1.1 数据源2.1.2 数据预处理2.1.3 数据调度 2.2 架构设计2.2.1 典型架构2.2.2 详细配置2.2.3 预训练任务2.2.4 长上下文建模2.2.5 解码策略 2.3 模型训练2.3.1 优化设置2.3.2 可扩展&#xff08;Scalable&#xff09;的训练技术 …

线性代数:矩阵的初等变换

目录 一、初等行变换 行阶梯 / 行最简 性质 二、矩阵的标准型 三、矩阵的等价 四、初等矩阵 五、重要性质与定理 一、初等行变换 行阶梯 / 行最简 性质 二、矩阵的标准型 三、矩阵的等价 四、初等矩阵 五、重要性质与定理

java日志框架总结(五、logback日志框架)

一、logback概述 Logback是由log4j创始人设计的又一个开源日志组件。 Logback当前分成三个模块&#xff1a; 1、logback-core, 2、logback- classic 3、logback-access。 1&#xff09;logback-core是其它两个模块的基础模块。 2&#xff09;logback-…

(三)elasticsearch 源码之启动流程分析

https://www.cnblogs.com/darcy-yuan/p/17007635.html 1.前面我们在《&#xff08;一&#xff09;elasticsearch 编译和启动》和 《&#xff08;二&#xff09;elasticsearch 源码目录 》简单了解下es&#xff08;elasticsearch&#xff0c;下同&#xff09;&#xff0c;现在我…

javascript第八个知识点:函数

如何定义函数&#xff1f; //绝对值函数 第一种方法&#xff1a;function abs(x){if(x>0){return x;}else if(x<0){return -x;} } 第二种方法&#xff1a;var abs function(x){if(x>0){return x;}else if(x<0){return -x;} } 调用函数&#xff1a;abs(10); abs…

智能优化算法 | Matlab实现合作优化算法(CSA)(内含完整源码)

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 智能优化算法 | Matlab实现合作优化算法(CSA)(内含完整源码) 源码设计 clear clc close SearchAgents_no=30; % Number of search agents Max_iteration=1000;

Snake: MoonBit版贪吃蛇来了!

什么是贪吃蛇&#xff1f; 贪吃蛇&#xff08;Snake&#xff09;是起源于1976年的街机游戏 Blockade。此类游戏在1990年代由于一些具有小型屏幕的移动电话的引入而再度流行起来&#xff0c;在现在的手机上基本都可安装此小游戏。版本亦有所不同。 在游戏中&#xff0c;玩家操…

算法学习——华为机考题库8(HJ46 - HJ55)

算法学习——华为机考题库8&#xff08;HJ46 - HJ50&#xff09; HJ46 截取字符串 描述 输入一个字符串和一个整数 k &#xff0c;截取字符串的前k个字符并输出 数据范围&#xff1a; 字符串长度满足 1≤n≤1000 &#xff0c; 1≤k≤n 输入描述&#xff1a; 1.输入待截取的…

spring boot学习第九篇:操作mongo的集合和集合中的数据

1、安装好了Mongodb 参考&#xff1a;ubuntu安装mongod、配置用户访问、添删改查-CSDN博客 2、pom.xml文件内容如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns…

洛谷_P1014 [NOIP1999 普及组] Cantor 表_python写法

这道题其实没什么特别的&#xff0c;最重要就是仔细分析找到其中的数学规律。 以斜着为行&#xff0c;每一行的数值就是与第几行有关。 那对于Z字形而言就是行数的奇偶判断。 n int(input()) ans 0 flag 0 l [0] while ans < n:flag 1ans flag ans - flag n - ans j …