Element Ui el-table列表中的tooltip内容过长超出屏幕换行显示

elementui-table组件列表中的tooltip内容过长超出屏幕换行显示内容,虽然el-table列属性中带的有show-overflow-tooltip,可以设置内容超出列宽度显示为…,且有tooltip提示全部内容,但是内容过多时,提示会超出屏幕: 只有全屏才能展示 很不友好
在这里插入图片描述
el-table组件自带的属性无法修改为自动换行,也无法控制弹框的宽度太长了不友好
解决方法:

<el-table-column v-if="value.prop == 'remark'" :key="index" :prop="value.prop" :label="value.label":width="value.width || 220"><template slot-scope="scope"><el-tooltip placement="top"><div slot="content" class="text_content">{{ scope.row.remark }}</div><div class="text_els">{{ scope.row.remark }}</div></el-tooltip></template></el-table-column>

css
然后设置显示内容样式,宽度为多少就是tooltip多宽时换行,text_content为tip的样式,text_els为表格里的样式

  .text_content {display: block;max-width: 700px;white-space: wrap;font-size: 14px;}.text_els {width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

效果
在这里插入图片描述

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

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

相关文章

Excel:vba实现拆分单元格成一字一单元格

我拿到的表格如下&#xff1a; 我想实现的表格效果如下&#xff1a; 要求就是&#xff1a;将A列的千字文拆分成一个单元格一个字&#xff0c;并整理成4列 我这里是将效果呈现到一个新的表里面&#xff0c;没有在原表里面(在原表里…

【C语言】深入理解指针(三)(下)

本篇文章将讲解以下知识&#xff1a; 1、二维数组传参的本质 2、函数指针变量 3、函数指针数组 1、二维数组传参的本质 有了数组指针的理解&#xff0c;我们就能弄清楚二维数组传参的本质了 例如&#xff1a; 在一维数组中&#xff0c;数组名是数字首元素的地址。但有两个例外…

如何在UE5中创建加载屏幕(开场动画)?

第一步&#xff1a; 首先在虚幻商城安装好Async Loading Screen&#xff0c;并且在项目的插件中勾选好。 第二步&#xff1a; 确保准备好所需要的素材&#xff1a; 1&#xff09;开头的动画视频 2&#xff09;关卡加载图片 3&#xff09;准备至少两个关卡 第三步&#xff1a…

【隐私计算篇】一种批量匿踪查询友好算法PIRANA的原理分析

1. 背景分析 前段时间开展了批量匿踪查询算法迭代优化的工作&#xff0c;取得了一些进展。不得不说&#xff0c;甲方爸爸永远会提出非常有挑战性的目标&#xff0c;push你去想各种解决方案。在实际的算法研发落地上&#xff0c;我们会结合算法本身的机制改进以及工程优化这两方…

创客项目秀 | 基于使用 XIAO BLE Sense 和 Edge Impulse 的宠物活动跟踪器

今天为大家带来的是来自美国的创作者米顿-达斯的作品:宠物活动跟踪器.这个装置主要是为宠物主人提供关于宠物日常活动量的详尽数据&#xff0c;还能够根据宠物的独特需求&#xff0c;提供个性化的健康建议和活动指导。 项目背景 为了全面促进宠物的健康与活力&#xff0c;采用…

在 MTT GPU 上使用 llama.cpp 推理

大语言模型因其出色的自然语言理解和生成能力而迅速被广泛使用&#xff0c;llama.cpp 大幅降低了进行大语言模型推理的门槛&#xff0c;MTT GPU 同样也是 llama.cpp 支持的运行平台&#xff0c;能够充分利用硬件的性能来助力用户的大语言模型应用。 本文主要介绍了如何在摩尔线…

『网络游戏』客户端发送消息到服务器【17】

将上一章服务器的协议PEProtocol的.dll文件重新生成导入unity客户端中 命名为Net 点击生成 另一种导入.dll文件方式 在客户端粘贴即可 此时Net文件夹的.dll文件就导入进来了 创建脚本&#xff1a;NetSvc.cs 编写脚本&#xff1a;NetSvc.cs 修改脚本&#xff1a;GameRoot.cs 在…

Cherno游戏引擎笔记(61~72)

---------------一些维护和更改------------- 》》》》 Made Win-GenProjects.bat work from every directory 代码更改&#xff1a; echo off->pushd ..\->pushd %~dp0\..\call vendor\bin\premake\premake5.exe vs2019popdPAUSE 为什么要做这样的更改&#xff1f; …

基于微信小程序的购物系统php+论文源码调试讲解

2相关技术 2.1微信小程序 小程序是一种新的开放能力&#xff0c;开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播&#xff0c;同时具有出色的使用体验。尤其拥抱微信生态圈&#xff0c;让微信小程序更加的如虎添翼&#xff0c;发展迅猛。 2.2 MySQL数据…

【论文阅读】SRCNN

学习资料 论文题目&#xff1a;Learning a Deep Convolutional Network for Image Super-Resolution&#xff08;学习深度卷积网络用于图像超分辨率&#xff09;论文地址&#xff1a;link.springer.com/content/pdf/10.1007/978-3-319-10593-2_13.pdf代码&#xff1a;作者提出的…

CVE-2022-26965靶机渗透

​ 开启环境 ​ ​ 进入环境 ​ ​ 使用弱口令admin登录 ​ ​ 利用cms主题构造木马 ​ 需要将主题中的info.php文件修改&#xff0c;再打包成zip再上传&#xff0c;通过网络搜索找到Github中的Pluck CMS&#xff0c;进入后随便下载任一主题 https://github.com/sear…

ThinkBook 16+ 锐龙6800h 安装ubuntu键盘失灵

问题&#xff1a;在ThinkBook 16 锐龙6800h 安装ubuntu18.04 出现笔记本键盘按下延迟非常高&#xff0c;输出卡死的情况&#xff0c;但是外接键盘可以正常使用 解决&#xff1a;更新内核 1、进入 https://kernel.ubuntu.com/~kernel-ppa/mainline/ 下载所需内核版本&#x…

深入理解链表(SList)操作

目录&#xff1a; 一、 链表介绍1.1、 为什么引入链表1.2、 链表的概念及结构1.3、 链表的分类 二、 无头单向非[循环链表](https://so.csdn.net/so/search?q循环链表&spm1001.2101.3001.7020)的实现2.1、 [单链表](https://so.csdn.net/so/search?q单链表&spm1001.2…

论文阅读:OpenSTL: A Comprehensive Benchmark of Spatio-Temporal Predictive Learning

论文地址&#xff1a;arxiv 摘要 由于时空预测没有标准化的比较&#xff0c;所以为了解决这个问题&#xff0c;作者提出了 OpenSTL&#xff0c;这是一个全面的时空预测学习基准。它将流行的方法分为基于循环和非循环模型两类。OpenSTL提供了一个模块化且可扩展的框架&#xff…

澳鹏干货 | 大语言模型的上下文窗口 (Context Windows)

大语言模型&#xff08;LLMs&#xff09;极大地提升了人工智能在理解和生成文本方面的能力。其中一个影响其效用的重要方面是“上下文窗口”&#xff08;Context Windows&#xff09;—— 这个概念直接影响着模型接收和生成语言的有效性。 本期澳鹏干货将深入探讨上下文窗口对…

如何让员工参与到精益变革的持续改进中?

实践证明&#xff0c;精益变革并非一蹴而就&#xff0c;它需要全员参与、持续改进&#xff0c;才能真正将精益理念融入企业的血脉之中。那么&#xff0c;如何让员工积极参与到精益变革的持续改进过程中呢&#xff1f;深圳天行健TPM管理咨询公司解析如下&#xff1a; 一、构建精…

电力电子技术(一)

变压器漏感对整流电路的影响&#xff1a;

CSS弹性布局

Flex 是 Flexible Box 的缩写&#xff0c;意为“弹性布局”或者“弹性盒子”&#xff0c;是 CSS3 中的一种新的布局模式&#xff0c;可以简便、完整、响应式地实现各种页面布局&#xff0c;当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前&#xff0c;几乎所有的浏览…

IntelliJ IDEA中配置scala

1.IDEA中 配置 maven 左上角 file -> Setting 选择(或直接搜maven) Build, Execution,Deployment -> Build Toos -> Maven Maven home path 选择 maven 安装目录&#xff08;bin的上层目录&#xff09; 示例&#xff1a; D:\maven\apache-maven-3.8.6 User settings…

python异常检测 - 随机离群选择Stochastic Outlier Selection (SOS)

python异常检测 - Stochastic Outlier Selection (SOS) 前言 随机离群选择SOS算法全称stochastic outlier selection algorithm. 该算法的作者是jeroen janssens. SOS算法是一种无监督的异常检测算法. 随机离群选择SOS算法原理 随机离群选择SOS算法的输入: 特征矩阵(featu…