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

news2024/9/22 5:36:19

tooltip 提示框修改宽度方法:

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

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

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

如下图代码

<el-table
    show-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.coloradmin.cn/o/834795.html

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

相关文章

C语言笔试训练【第二天】

文章目录 第一题 第二题 第三题 第四题 第五题 第六题 第七题 大家好&#xff0c;我是纪宁。 今天是C语言笔试训练的第二天&#xff0c;一起加油&#xff01; 第一题 1、以下程序段的输出结果是&#xff08; &#xff09; #include<stdio.h> int main() {char…

【雕爷学编程】 MicroPython动手做(38)——控制触摸屏

MixPY——让爱(AI)触手可及 MixPY布局 主控芯片&#xff1a;K210&#xff08;64位双核带硬件FPU和卷积加速器的 RISC-V CPU&#xff09; 显示屏&#xff1a;LCD_2.8寸 320*240分辨率&#xff0c;支持电阻触摸 摄像头&#xff1a;OV2640&#xff0c;200W像素 扬声器&#…

Android 9-- 源码角度: Home键的监听和拦截

在做应用层APP需求的过程中&#xff0c;HOME键的监听&#xff0c;Back键的监听&#xff0c;这都是很常见的问题&#xff0c;那你有试过&#xff0c;去拦截HOME键的事件吗&#xff0c;有去了解过如何处理吗&#xff0c;流程如何 首先大家应该先了解一种情况&#xff0c;就是Andr…

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…

Mapping温度分布验证选择数据记录仪时需要考虑的13件事

01 什么是温度分布验证&#xff1f; 温度分布验证是通过在规定的研究时间内测量定义区域内的多个点来确定特定温度控制环境或过程&#xff08;如冷冻柜、冰箱、培养箱、稳定室、仓库或高压灭菌器&#xff09;的温度分布的过程。温度分布验证的目标是确定每个测量点之间的差异&…

PHP客服系统聊天页面-thinkphp加载页面源码解释

PHP workerman客服系统加载聊天页面的代码逻辑流程&#xff0c;可以进行参考。如果想要二开修改的&#xff0c;可以根据这个流程来修改。 thinkphp的router部分 Route::get(kefu/:u/:f?, index/index/chat);查看控制器加载页面逻辑 application/index/controller/Index.php pu…

接口返回 blob 格式怎么转成 json

问题 工作中遇到一个接口逻辑是有时候会返回文件有时候会返回json&#xff0c;为了保证能接收到文件&#xff0c;需要将 responseType 设置为 blob。但是如果此时需要根据返回的是文件还是json来进行后续不同的操作&#xff0c;你在控制台输出返回的结果&#xff0c;会发现输出…

SpringBoot第16讲:如何生成接口文档之Swagger技术栈

SpringBoot第16讲&#xff1a;如何生成接口文档之Swagger技术栈 SpringBoot开发Restful接口&#xff0c;有什么API规范吗&#xff1f;如何快速生成API文档呢&#xff1f;Swagger 是一个用于生成、描述和调用 RESTful 接口的 Web 服务。通俗的来讲&#xff0c;Swagger 就是将项目…

FANUC机器人SRVO-300机械手断裂故障报警原因分析及处理办法

FANUC机器人SRVO-300机械手断裂故障报警原因分析及处理办法 首先,我们查看报警说明书上的介绍: 总结:即在机械手断裂设置为无效时,机器人检测出了机械手断裂信号(不该有的信号,现在检测到了,所以报警) 使机械手断裂设定为无效/有效的具体方法:  按下示教器的MENU菜单…

springboot()—— swagger

零、一张图读懂swagger 懂了&#xff0c;这玩意就是用swagger搞出来的&#xff01; 就是一个后端开发自测的东西嘛&#xff01; 一、概念 存在即合理&#xff0c;我们看一下swagger诞生的原因&#xff1a;在前后端分离的架构中&#xff0c;前端新增一个字段&#xff0c;后端就…

【Java数据结构】第七章 —— 栈

目录 一、栈 二、栈的主要方法 三、栈的模拟实现 3.1 构造方法和成员属性 3.2 push 方法 3.3 pop 方法 3.4 peek 方法 3.5 size 方法 一、栈 <

工程监测仪器多通道振弦数据记录仪的MODBUS通讯协议解析

工程监测仪器多通道振弦数据记录仪的MODBUS通讯协议解析 多通道振弦数据记录仪是多通道振弦、温度信号采集记录仪&#xff0c; 具备 32 通道传感器接口&#xff0c; 可对最多16 通道振弦频率和 16 通道温度、 32 通道振弦频率进行实时或全自动定时采集记录&#xff08;支持内部…

【C++奇遇记】函数探幽(上)

&#x1f3ac; 博客主页&#xff1a;博主链接 &#x1f3a5; 本文由 M malloc 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f384; 学习专栏推荐&#xff1a;LeetCode刷题集 数据库专栏 初阶数据结构 &#x1f3c5; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如…

操作系统 - 小记 230803

文章目录 计算机的硬件组成程序的存储和执行程序语言的设计和进化存储设备的层次结构操作系统 https://www.bilibili.com/video/BV1Q5411w7z5?p2 计算机的硬件组成 CPU CU&#xff0c;控制单元ALU&#xff0c;算数逻辑单元寄存器 IO Bridge 处理器和外部交互的桥梁Main Memory…

redis原理 4:雷厉风行 —— 管道

大多数同学一直以来对 Redis 管道有一个误解&#xff0c;他们以为这是 Redis 服务器提供的一种特别的技术&#xff0c;有了这种技术就可以加速 Redis 的存取效率。但是实际上 Redis 管道 (Pipeline) 本身并不是 Redis 服务器直接提供的技术&#xff0c;这个技术本质上是由客户端…

【LeetCode-简单】剑指 Offer 22. 链表中倒数第k个节点(详解)

题目 输入一个链表&#xff0c;输出该链表中倒数第k个节点。为了符合大多数人的习惯&#xff0c;本题从1开始计数&#xff0c;即链表的尾节点是倒数第1个节点。 例如&#xff0c;一个链表有 6 个节点&#xff0c;从头节点开始&#xff0c;它们的值依次是 1、2、3、4、5、6。这…

2024年杭电MBA项目招生信息全面了解

2024年全国管理类硕士联考备考已经到了最火热的阶段&#xff0c;不少考生开始持续将注意力集中在备考的规划中&#xff01;杭州达立易考教育整合浙江省内的MBA项目信息&#xff0c;为大家详细梳理了相关报考参考内容&#xff0c;方便大家更好完成择校以及针对性的备考工作。本期…

差异对比犀利手册:使用 Partial Diff 插件在 VSCode 中比较代码差异

简介&#xff1a; 在本教程中&#xff0c;我们将介绍如何在 Visual Studio Code&#xff08;VSCode&#xff09;编辑器中安装和使用 Partial Diff 插件来进行源代码文件的差异比较。Partial Diff 插件是一个强大且简单的工具&#xff0c;可以帮助你更容易地查看和理解代码的变…

14.2.2 【Linux】software, hardware RAID

磁盘阵列分为硬件与软件。所谓的硬件磁盘阵列是通过磁盘阵列卡来达成阵列的目的。磁盘阵列卡上面有一块专门的芯片在处理 RAID 的任务&#xff0c;因此在性能方面会比较好。在很多任务 &#xff08;例如 RAID 5 的同位检查码计算&#xff09; 磁盘阵列并不会重复消耗原本系统的…

“已停止访问该网页“ 解决流程,微信外部链接内容管理规范

登录手机管家官网 腾讯安全-网址安全中心 自行处理。 说明&#xff1a; 一直以来&#xff0c;微信致力于为用户提供绿色、健康的网络生态环境。 根据法律法规的规定&#xff0c;微信将落实“以安全为底线”的互联互通&#xff0c;为确保高质量的平台内容和良好的用户体验&a…