记录一下el-table的tooltip换行

一些需求场景下,需要保持el-table中tooltip出现的时机,并且当前代码编写时完全不能通过js控制tooltip禁用属性时,可以通过以下方法实现tooltip换行。

1、对应单元格的 showOverflowTooltip 属性设置为true,tooltip出现时机依然使用组件原本的。

2、对应单元格内容使用p标签展示,当前单元格依然可设置一行展示,tooltip中可以按照p标签换行。

如果是tooltip样式复杂,需要自己写覆盖el-table的逻辑,实现超出之后才提示也能通过js实现。

1、监听鼠标划入单元格事件。

2、监听中判断当前单元格宽度与内容实际宽度,当内容实际宽度 > 单元格宽度时,对应的tooltip设置为不禁用即可。

相关推荐
ZC跨境爬虫10 小时前
跟着 MDN 学CSS day_3:(为一个传记页面添加样式)
前端·javascript·css·ui·音视频·html5
夜雪闻竹10 小时前
sql.js WASM 实战:浏览器里跑 SQLite
javascript·sql·wasm
爱喝铁观音的谷力景辉10 小时前
在Cesium中实现带箭头方向路线样式的技术详解
javascript·cesium
Qhappy10 小时前
AI逆向实战:从零还原某航空App的AES加密
javascript·后端
安妮的小熊呢11 小时前
CRMEB开源商城系统 & 标准版系统(PHP)开发规范
开发语言·javascript·php
弹简特12 小时前
【Vue3速成】01-npm+vue初体验+vite构建vue工程化
vue.js·arcgis·npm
坚定信念,勇往无前12 小时前
electron-vite 安装better-sqlite3
javascript·数据库·electron
@菜菜_达12 小时前
jquery.inputmask插件介绍
前端·javascript·jquery
摸鱼小李上线了12 小时前
vue项目页面添加水印实现方法
前端·javascript·vue.js
砍材农夫13 小时前
物联网 基于netty构建mqtt协议规范(主题通配符订阅)
java·前端·javascript·物联网·netty