Element-plus中tooltip 提示框修改宽度——解决方案

tooltip 提示框修改宽度方法:

在element中,想要设置表格的内容,超出部分隐藏,鼠标悬浮提示

可以在el-table 上添加show-overflow-tooltip属性

同时可以通过tooltip-options配置提示信息

如下图代码

<el-tableshow-overflow-tooltip:tooltip-options="{ effect: 'dark', placement: 'bottom', showArrow: true, width: '80px' }"height="430":header-cell-style="{ backgroundColor: 'rgba(19, 185, 201,.7)', color: 'rgb(54, 54, 54)' }"></el-table>

在这里插入图片描述

此时,有提示信息,但是,提示框不换行,如果内容很多,则提示框会单行一直显示,所以,我们需要修改提示框的宽度,但是官网并没有提供对应的方法或属性

解决方案:

在全局css样式中书写如下代码:

(如vite创建的项目,在src/style.css中书写)

.el-popper {max-width: 200px !important;
}

如下图:搞定!

在这里插入图片描述

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

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

相关文章

【git技巧】什么是 .gitkeep

.gitkeep 文件的作用 就是——使 Git 保留一个空文件夹&#xff01; Git 是一个文件追踪系统&#xff0c;这也导致了 Git 的设计初衷是对文件进行追踪&#xff0c;所以&#xff0c;Git 不会追踪一个空目录。 但是&#xff0c;在某些情况下&#xff0c;我们确实是需要保留一些…

Grafana集成prometheus(2.Grafana安装)

查找镜像 docker search grafana下载指定版本 docker pull grafana/grafana:10.0.1启动容器脚本 docker run -d -p 3000:3000 --namegrafana grafana/grafana:10.0.1查看是否启动 docker ps防火墙开启 检查防火墙3000端口是否开启 默认用户及密码 admin/admin 登录 ht…

无涯教程-Perl - last 语句函数

当在循环内遇到 last 语句时&#xff0c;循环立即终止&#xff0c;程序控制在循环后的下一条语句处恢复。您可以为LABEL提供最后一个语句&#xff0c;其中LABEL是循环的标签。 last 语句可以在嵌套循环内使用&#xff0c;如果未指定LABEL&#xff0c;则该语句将适用于最近的循环…

SpringBoot实现数据库读写分离

SpringBoot实现数据库读写分离 参考博客https://blog.csdn.net/qq_31708899/article/details/121577253 实现原理&#xff1a;翻看AbstractRoutingDataSource源码我们可以看到其中的targetDataSource可以维护一组目标数据源(采用map数据结构)&#xff0c;并且做了路由key与目标…

HCIP---OSPF的优化

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一.汇总&#xff1a; 目的&#xff1a;减少骨干区域的LSA的更新量 作用&#xff1a;OSPF的…

CI/CD—Docker初入门学习

1 docker 了解 1 Docker 简介 Docker 是基于 Go 语言的开源应用容器虚拟化技术。Docker的主要目标是build、ship and run any app&#xff0c;anywhere&#xff0c;即通过对应用组件的封装、分发、部署、运行等生命周期的管理&#xff0c;达到应用组件级别的一次封装、到处运…

阿里云安全组设置

简介​ 云主机安全组必须打开如下端口&#xff1a; ssh&#xff1a;22http&#xff1a;80https&#xff1a;443ftp&#xff1a;21、20000&#xff5e;30000 阿里云安全组端口开放教程​ 腾讯云安全组端口开放教程​ 华为云安全组端口开放教程​

一些网络知识总结(自用)

一些网络知识总结&#xff08;自用&#xff09; 1. 进制的转换 所有进制转换成十进制就是把字面值*权数 比如16进制 5AEF 转成10机制话就是 1* 151614321064 * 5 2. ip地址网段的概念&#xff0c;可用ip&#xff0c;广播地址 比如一个ip为10.1.1.1/24那么他的网络号就是前…

vue2 el-carousel轮播图和文字一起改变

vue项目的话 安装一下element依赖 npm i element-ui -S在main入口文件引入element包 我在app文件里边去写的 <template><div class"w"><el-carousel height"460px"><el-carousel-item v-for"item in items" :key"i…

优化|当机器学习上运筹学:PyEPO与端对端预测后优化

分享者&#xff1a;唐博 编者按&#xff1a;​ 这篇文章我想要写已经很久了&#xff0c;毕竟“端对端预测后优化”&#xff08;End-to-End Predict-then-Optimize&#xff09;正是我读博期间的主要研究方向&#xff0c;但我又一直迟迟没能下笔。想说自己杂事缠身&#xff08;实…

PCL点云处理之最小二乘空间直线拟合(3D) (二百零二)

PCL点云处理之最小二乘空间直线拟合(3D) (二百零二) 一、算法简介二、实现代码三、效果展示一、算法简介 对于空间中的这样一组点:大致呈直线分布,散乱分布在直线左右, 我们可采用最小二乘方法拟合直线,更进一步地,可以通过点到直线的投影,最终得到一组严格呈直线分布…

npm install报错 -> npm ERR! Unexpected token ‘.‘ 报错解决办法

问题原因&#xff1a; 用nvm1.1.7的版本安装了16.x以上的node, 然后再下载依赖的时候就报错了&#xff1b;总结一下就是nvm版本太低了&#xff0c;他的里面没有集成高版本node导致的。 解决办法&#xff1a; 把nvm切换到新版本就行了。 1. 卸载掉当前所有的node nvm unins…

[每日习题]第一个只出现一次的字符 小易的升级之路——牛客习题

hello,大家好&#xff0c;这里是bang___bang_&#xff0c;本篇记录2道牛客习题&#xff0c;第一个只出现一次的字符&#xff08;简单&#xff09;&#xff0c;小易的升级之路&#xff08;简单&#xff09;&#xff0c;如有需要&#xff0c;希望能有所帮助&#xff01; 目录 1️…

COMSOL SMS结构模拟简要步骤

做光纤传感方向的朋友们在日常的工作与学习中都想对你自己的结构进行一个仿真与模拟&#xff0c;以用于验证自己的思路与想法&#xff0c;又或者是在平时的文章中加入模拟以丰富自己的工作使得文章显得更加饱满&#xff0c;但又苦于在光纤传感方向的comsol案例、资料比较少&…

Appium+Python3环境搭建,其实超简单!

appium可以说是做app最火的一个自动化框架&#xff0c;它的主要优势是支持android和ios&#xff0c;另外脚本语言也是支持java和Python。略懂Python&#xff0c;所以接下来的教程是appiumpython&#xff0c;自己搭建环境的时候&#xff0c;按照某些博客安装遇到各种奇葩问题&am…

UE4 Cesium for unreal 离线加载应用全流程

参考配置&#xff1a;Win10、请保证是在局域网环境下配置 配置IP 右键选择&#xff1a;打开“网络和Internet” 设置 选择更改适配器选项 请保证以太网是处于启用状态并连接线缆&#xff0c;点击右键选择属性 双击选择Internet协议版本4&#xff08;TCP/IPv4&#xff09; 将IP地…

【雕爷学编程】MicroPython动手做(31)——物联网之Easy IoT

1、物联网的诞生 美国计算机巨头微软(Microsoft)创办人、世界首富比尔盖茨&#xff0c;在1995年出版的《未来之路》一书中&#xff0c;提及“物物互联”。1998年麻省理工学院提出&#xff0c;当时被称作EPC系统的物联网构想。2005年11月&#xff0c;国际电信联盟发布《ITU互联网…

常用消息中间件对比

Kafka 1.基于Pull的模式来处理消息消费 2.追求高吞吐量 3.一开始的目的就是日志收集和传输 4.0.8版本开始支持复制&#xff0c;不支持事务&#xff0c;对消息的重复、丢失、错误没有严格要求、适合产生大量数据的互联网服务的数据收集业务. RabbitMQ RabbitMQ是使用Erlang语…

Grafana集成prometheus(1.Prometheus安装)

下载docker镜像 docker pull prom/prometheus docker pull prom/node-exporter启动 node-exporter 该程序用以采集机器内存等数据 启动脚本 docker run -d -p 9100:9100 prom/node-exporter ss -anptl | grep 9100启动截图 prometheus 启动脚本 # 3b907f5313b7 为镜像i…

面试热题(x的平方根)

给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 注意&#xff1a;不允许使用任何内置指数函数和算符&#xff0c;例如 pow(x, 0.5) 或者 x ** 0.5 。 这道题虽然是简单题…