elementui-table组件列表中的tooltip内容过长超出屏幕换行显示

elementui-table组件列表中的tooltip内容过长超出屏幕换行显示

el-table列属性中带的有show-overflow-tooltip,可以设置内容超出列宽度显示为…,并且有tooltip提示,但是内容过多时,提示会超出屏幕:
在这里插入图片描述
但是el-table组件自带的属性无法修改为自动换行

解决方法:
关闭el-table的show-overflow-tooltip属性,添加插槽,插槽内容为Tooltip 文字提示组件,如下所示

<el-table-column
   label="描述"
   min-width="100"
   prop="description"
   style="word-break: normal"
 >
    <template slot-scope="scope">
      <el-tooltip placement="top-start">
         <div slot="content" class="text_warp">
             {{ scope.row.description }}
         </div>
         <div style="color: #000" class="text_els">
           {{ scope.row.description }}
         </div>
      </el-tooltip>
    </template>
</el-table-column>

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

.text_warp{
  display: block;
  max-width: 500px;
  white-space: wrap;
}
.text_els{
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

结果如下所示:
在这里插入图片描述

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

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

相关文章

Vue 3.0中Treeshaking特性(详细解析)

文章目录 一、是什么二、如何做Vue2 项目Vue3 项目 三、作用参考文献 一、是什么 Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术&#xff0c;专业术语叫 Dead code elimination 简单来讲&#xff0c;就是在保持代码运行结果不变的前提下&#xff0c;去除…

逆向 jsvmp 之_signature实例

预备:a.v_jstools 插件,用来解析混淆 b.浏览器启动本地替换 c.nodejs 用来快速调试js 准备好后开搞: 1.首先找到 jsvmp入口点 2.用v_jstools解析混淆,再次刷新,进入入口,找到循环点 3.打日志,分析代码功能

察势而动,破界争先!COSP深圳户外电源展2024重磅开幕!

随着国内疫情逐渐消退&#xff0c;中央政府积极出台了一系列恢复民生的政策。其中&#xff0c;“地摊经济”的火爆&#xff0c;成为了人们茶余饭后的热门话题。这个政策的出台&#xff0c;不仅推动了地摊经济的发展&#xff0c;也让户外电源市场迎来了新的机遇。 随着户外电源产…

Git标签推送

标签默认属于本地分支&#xff0c;推送分支的时候并不会上传。需要自己手动推送 通过命令 git push origin <tagname>推送指定的标签 通过命令git push origin --tags批量推送所有的标签 在VS里打开git命令行窗口的方法&#xff1a;Git更改-操作-打开命令行提示符 对于…

【java】常见的面试问题

目录 一、异常 1、 throw 和 throws 的区别&#xff1f; 2、 final、finally、finalize 有什么区别&#xff1f; 3、try-catch-finally 中哪个部分可以省略&#xff1f; 4、try-catch-finally 中&#xff0c;如果 catch 中 return 了&#xff0c;finally 还会执行吗&#…

【C++】入门

结束数据结构初阶的学习后&#xff0c;很高兴继续学习C&#xff0c;欢迎大家一起交流~ 目录 C关键字 命名空间 命名空间定义 命名空间使用 C输入&输出 缺省参数 缺省参数概念 缺省参数分类 函数重载 函数重载概念 C支持函数重载的原理--名字修饰 引用 引用概念…

MacOS平台翻译OCR软件,双管齐下,还可自定义插件,为其添砖加瓦!

小编昨天为大家分享了Windows系统下的一款功能强大且免费的 OCR 开源工具 Umi-OCR。 今天则为大家推荐一款 MacOS系统下的一款 翻译 OCR 多功能双管齐下的桌面应用软件 Bob。这款软件虽然也上线了GitHub&#xff0c;但它不是一款开源软件&#xff0c;仓库只是作者为了用户反馈…

线程池调优,深入理解,线程池各个参数的含义(keepAliveTime 展开说说?)

线程池调优&#xff0c;深入理解&#xff0c;线程池各个参数的含义&#xff08;keepAliveTime 展开说说&#xff1f;&#xff09;目录 线程池核心组件核心线程、最大线程、阻塞队列的关系&#xff08;重点&#xff09;线程池调优&#xff08;运行流程&#xff09;keepAliveTime…

C++ 利用容器适配器,仿函数实现栈,队列,优先级队列(堆),反向迭代器,deque的介绍与底层

C 利用容器适配器,仿函数实现栈,队列,优先级队列【堆】,反向迭代器,deque的介绍与底层 一.容器适配器的介绍二.利用容器适配器实现栈和队列1.stack2.queue 三.仿函数介绍1.什么是仿函数2.仿函数的使用3.函数指针的使用1.函数指针的用处2.利用函数指针完成回调3.利用仿函数完成回…

CSS之粘性定位

让我为大家介绍一下粘性定位吧&#xff01; 大家应该都了解过绝对定位&#xff0c;它是相对于父级定位 那么粘性定位相对于谁呢&#xff1f; 它相对于overflow:hidden; 如果没找到就会跟fixed固定定位一样&#xff0c;相对于视口 <!DOCTYPE html> <html lang"en…

实习日志5

活字格图片上传功能&#xff08;批量&#xff09; 这个报错真的恶心&#xff0c;又看不了他服务器源码&#xff0c;接口文档又是错的 活字格V9获取图片失败bug&#xff0c;报错404-CSDN博客 代码BUG记录&#xff1a; 问题&#xff1a;上传多个文件的base64编码被最后一个文…

76 C++对象模型探索。多重继承中虚函数表分析

多重继承非重点内容&#xff0c;在实际开发中使用的不多&#xff0c; 这里只是为了知识点的完整&#xff0c;记录一下。 直接上结论。 一个类&#xff0c;如果继承于多个基类&#xff0c;且这个多个基类中有虚函数&#xff0c;那么 这个类 会有多个 虚函数表。 这个 类的对…

THM学习笔记——john

John the Ripper是目前最好的哈希破解工具之一。 John基本语法&#xff1a; john [options] [path to file] john&#xff1a;调用John the Ripper程序。 [path to file]&#xff1a;包含你要尝试破解的哈希的文件&#xff0c;如果它们在同一个目录中&#xff0c;你就不需要命名…

Docker容器基本管理

目录 一、概述 &#xff08;一&#xff09;为什么要用到容器 &#xff08;二&#xff09;docker概念 1.镜像 2.容器 3.仓库 &#xff08;三&#xff09;Docker与虚拟机的区别 &#xff08;四&#xff09;Linux namespace的六大类型 二、安装docker容器引擎 &#xff…

光耦驱动继电器电路图大全

光耦驱动继电器电路图&#xff08;一&#xff09; 注&#xff1a; 1U1-1脚可接12V&#xff0c;也可接5V&#xff0c;1U1导通&#xff0c;1Q1导通&#xff0c;1Q1-30V&#xff0c;线圈两端电压为11.7V. 1U1-1脚不接或接地&#xff0c;1U1不通&#xff0c;1Q1截止&#xff0c;1…

Federated Optimization in Heterogeneous Networks —— Fedprox算法

Federated Optimization in Heterogeneous Networks 1. 论文信息 论文题目: Federated Optimization in Heterogeneous Networks Fedprox算法&#xff0c;plato小项目跑通并理解作者&#xff1a;Tian Li, Anit Kumar Sahu, Manzil Zaheer, Maziar Sanjabi, Ameet Talwalkar, …

使用阿里云的oss对象存储服务实现图片上传(前端vue后端java详解)

一&#xff1a;前期准备&#xff1a; 1.1&#xff1a;注册阿里云账号&#xff0c;开启对象存储oss功能&#xff0c;创建一个bucket&#xff08;百度教程多的是&#xff0c;跟着创建一个就行&#xff0c;创建时注意存储类型是标准存储&#xff0c;读写权限是公共读&#xff09;…

HNU-编译原理-甘晴void学习感悟

前言 熬过煎熬的考试周、复习以及更加煎熬的等成绩&#xff0c;查到成绩的那一刻&#xff0c;心里还是挺开心的。 虽然我没有完全学懂这门课程&#xff0c;但我还是兢兢业业地通过了课程的考试&#xff0c;拿到了这门课程的认可。 记录一下自己对编译原理的学习感悟&#xf…

python使用pyinstaller 快速打包成一个exe程序方案

使用PyInstaller是一种将Python脚本打包成独立可执行文件&#xff08;.exe&#xff09;的方便方法。 以下是一个简单的步骤&#xff0c;以及相关的说明和代码示例&#xff1a; 1.安装PyInstaller: pip install pyinstaller2.在终端中导航到你的Python脚本所在的目录: cd pat…

day32_CSS

今日内容 0 复习昨日 1 css属性 2 盒子模型 【重点】 3 css扩展属性 4 Bootstrap【重点】 0 复习昨日 1 表格标签 table表格里面有tr , (行)行内有单元格,td行合并,rowspan列合并,colspan 2 写出input标签type属性的值 文本框 text 密码框 password 单选框 radio 复选框 checkb…
最新文章