自定义修改el-talbe show-overflow-tooltip的样式

news2025/7/16 20:14:30

el-table表格行有一个可使用的show-overflow-tooltip属性,它接受一个Boolean,为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。

<el-table-column
     prop="address"
     label="地址"
     show-overflow-tooltip>
 </el-table-column>

当文字过多时它会显示一长行,非常不美观。
在这里插入图片描述

当然,你可以添加一个样式修改它的宽度。

.el-tooltip__popper{ max-width:50% }

但是如果你写在style lang=“scss” scoped里面它不会生效,如果新写一个style标签在里面写样式又会造成全局样式污染,网上找了好多也没看见好的解决办法。

在查看el-table文档时发现有一个tooltip-effect属性,它有两个可选值dark/light,可以简单的修改它的主题色。
在这里插入图片描述

<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">

如果加上这个属性,tooltip会有一个is-dark/is-light的样式名,但是这个样式是它本来就有的,即使不加tooltip-effect它也会有默认的is-dark,所以它也是一个全局样式名,这样仍然没办法解决上面提到的问题。
在这里插入图片描述
无奈准备放弃,用其它的比如popover或者tooltip插槽来写时突然灵光一闪,如果我不使用那两个可选值dark/light,自己写一个呢,有趣的事发生了,它的is-dark/is-light变成了我传入的值is-myTooltips

tooltip-effect="myTooltips"

在这里插入图片描述
这样我们就得到了一个自定义样式,虽然没了它的基础样式,但你可以在自定义样式上面想改成什么样都可以。

<style lang="scss">
.is-myClassifyTooltip{ // 你想要的样式 要写一些背景色啊盒阴影啥的 }
</style>

而后我又试着传入了

tooltip-effect="dark myTooltips"

有趣的事发生了,它不仅有了is-dark这个基础样式,还拥有了一个自定义样式名。这个就有点类似于popper-class的味道了。
在这里插入图片描述
最后就变得更简单了,直接在style里面用自定义的样式名写你想要的样式。

<style lang="scss">
.myTooltips{ // 你想要的样式 }
</style>

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

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

相关文章

Vue3、Vue2都有哪些区别

vue3和vue2版本对比&#xff1a; vue2中绝大多数的API与特性&#xff0c;在vue3中同样支持。同时&#xff0c;vue3中还新增了所特有的功能&#xff0c;并废弃了vue2中的某些旧功能。 新增的功能如&#xff1a;组合式API、多根节点组件、更好的TypeScript支持等。 废弃的功能…

jq获取和设置标签的css样式、jq给标签增加或移除class属性

1、jQuery获取和设置标签的css样式 jQuery既可以直接获取标签的css样式&#xff0c;也可以设置样式&#xff0c;包括行内、内部、外部样式&#xff1b;思路&#xff1a;先要选取这个标签&#xff0c;然后再获取或者设置样式&#xff1b;获取css属性&#xff1a;console.log($…

eclipse新建一个简单的网站(web)项目

目录前言一、新建一个简单web项目二、报错解决前言 本篇介绍怎么在eclipse中新建一个简单的web项目&#xff0c;博主是用的eclipse版本是2021-06R&#xff0c;服务器tomcat10。本篇是博主尝试自己动手搭建网站系列文章中的一篇&#xff0c;如想了解更多相关内容&#xff0c;见…

在web页面中直接播放rtsp视频流

rtsp是一种实时传输协议&#xff0c;通过各种百度了解&#xff0c;得出结论&#xff1a;浏览器是不支持播放rtsp流的&#xff0c;必须经过后端转码推流。 实现思路&#xff1a;借助node搭建转码推流服务&#xff0c;再使用JSMpeg播放。 rtsp2web是一个依赖 ffmpeg&#xff0c…

Vue页面生成PDF的方法

最近项目有个需求&#xff0c;将系统统计的数据生成分析报告&#xff0c;然后可以导出成PDF。 这种方法可以有两种&#xff0c;一种是直接调用打印&#xff0c;用户通过浏览器提供的打印页面手动选择导出PDF。当然这种方式兼容性差&#xff0c;且体验不好&#xff0c;显然不是…

net::ERR_CONNECTION_REFUSED 解决大全

sockjs-node/info报错 GET http://localhost/sockjs-node/info?t1641268443660 net::ERR_CONNECTION_REFUSED sockjs-node作用 SockJS is a JavaScript library (for browsers) that provides a WebSocket-like object. SockJS gives you a coherent, cross-browser, Javascr…

前端页面出现 Failed to load response data

工作上前端 搭建了一套新的环境 同一个接口 新的前端环境 调用接口时 偶尔会出现一个情况 这时候 我们 在服务器 、 Postman 、本地环境调用都没问题 唯独在新的前端页面上会出现这样的问题 鉴于这样的问题 在网上查询了很多方法 进行修正都无济于事 最终在我们将问题指向了…

Android基础入门

第1章 Android基础入门 目录第1章 Android基础入门1.1 Android简介1.1.1 通信技术1.1.2 Android发展史1.1.3 Android体系结构1.1.4 Dalvik虚拟机1.2 Android开发环境搭建1.2.1 Android Studio安装1.2.2 模拟器创建1.2.3 SDK下载1.3 Android程序结构1.4 资源的管理与使用1.4.1 图…

前端第二章:9.HTML如何在网页中添加图片(img标签使用方法,以及img标签属性:alt、height、width);图片格式选择

一、img 标签简介 1.是自结束标签 2.用于向当前页面引入一个 外部图片 3.可以引入 gif 动图 4.img 是 替换元素&#xff0c;具有块元素和行内元素的某些特点 二、img标签基础 0.使用img标签将 图片 引入 网页&#xff01; 1.代码&#xff1a; <img src"图片的相对路…

【前端项目问题】Vue 中 v-html 的使用

Vue 中 v-html 的使用一、 v-html是什么&#xff1f;二、使用方式一、 v-html是什么&#xff1f; v-html 用来更新元素的 innerHTML&#xff0c;但是存在一定的安全性。 注意&#xff1a; 1、内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。 2、在网站上动态渲染任意 HTM…

前端技术发展历程

&#x1f482; 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 随着互联网的不断发展…

了解SVG-icon的使用流程

一.了解SVG是什么 SVG&#xff08;Scalable Vector Graphics&#xff09;可缩放矢量图形&#xff0c;是一种用于描述基于二维的矢量图形的 XML 标记语言&#xff0c;其基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等&#xff0c;还能显示文字对象和嵌入式外部…

使用elementUI组件实现表格的分页以及搜索功能

主要的UI组件&#xff1a;el-input、el-table、el-pagination 效果展示&#xff1a; 主要功能&#xff1a; ① 完成列表与分页组件的联动&#xff0c;可以通过分页来实现列表数据翻页。 ② 通过在搜索栏输入关键词&#xff0c;在列表中展示出与关键词有关数据。 基础设置&a…

微信小程序实现滑动/点击切换Tab

背景 &#x1f44f; swiperscroll-view实现滑动/点击切换Tab&#xff0c;以及scroll-left的使用~ &#x1f947;文末分享源代码。记得点赞关注收藏&#xff01; 1.实现效果 2.实现步骤 2.1 scroll-view实现tab列表 scroll-view&#xff1a; 可滚动视图区域。使用竖向滚动时…

jsPDF + html2canvas A4分页截断 完美解决方案(含代码 + 案例)

业务需求 网页html生成A4大小分页的pdf&#xff0c;翻遍了整个互联网发现没有很系统的整理与分析&#xff0c;甚至对jsPDF的解析也没有几篇。遇到过几次&#xff0c;用的比较多&#xff0c;完成代码编写后特此整理分析&#xff0c;自我记录。 业务难点 1.存在图片/组件/文字…

vue弹窗如何嵌入其它vue页面

文章目录说明子组件&#xff0c;将要引入到弹框内的页面父页面思考组件 v-if 和 v-show 切换时生命周期钩子的执行说明 【1】实现方式&#xff0c;将其他页面作为组件传入 【2】在父页面&#xff0c;将该组件引入到弹框内&#xff0c;并通过动态渲染进行切换 子组件&#xff0…

使用宝塔面板快速搭建web网站,并内网穿透实现公网远程访问

目录 1. 环境安装 2. 安装cpolar内网穿透 3. 内网穿透 4. 固定http地址 5. 配置二级子域名 6. 创建一个测试页面 宝塔面板简单几步搭建本地web站点&#xff0c;并做内网穿透&#xff0c;实现公网用户也可以正常远程访问&#xff0c;无需公网IP&#xff0c;无需设置路由器…

echarts入门基础教程

目录 效果图 1.下载资源 新建项目 2.引入echarts 3.准备一个呈现图表的盒子 4.初始化echarts实例对象 5.准备配置项 6.将配置项设置给echarts实例对象 7.完整代码 效果图 1.下载资源 新建项目 去官网下载echarts压缩包&#xff0c;在包里的dist文件里找到echarts.min.j…

使用vite构建Vue3组件库,发布npm包

使用vite构建Vue3组件库&#xff0c;发布npm包 在国内用vue框架开发的是非常之多的&#xff0c;使用vue开发组件封装是一个很普片的事情了&#xff0c;封装好一个组件可以在项目的任意地方去使用&#xff0c;我们还可以从npm仓库下载别人封装的组件进行使用&#xff0c;比如ele…

基于Java+Springboot+vue高校资源共享交流平台设计和实现

博主介绍&#xff1a;✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…