记录一下el-table的tooltip换行

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

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

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

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

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

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

相关推荐
xm_xm_xm_12 分钟前
react17版本以前类组件常用操作
前端·javascript·react.js
lzhdim2 小时前
13、JavaScript事件循环机制 - JavaScript学习系列文章
开发语言·前端·javascript·学习·ecmascript
liangshanbo12152 小时前
Vue 3 <script setup> 的本质原理是什么?它与普通 setup()有何区别?
前端·javascript·vue.js
七牛开发者4 小时前
实测推荐 3 个 Skill,轻松上手 Codex 网页设计与交付流程
前端·javascript·后端
七牛开发者4 小时前
拆解 dsh 系列:从源码和版本变化看 DeepSeek Harness 的设计取舍
前端·javascript·后端
谭光志4 小时前
如何从网站提取设计风格:DOM、计算样式与 DESIGN.md
前端·javascript·agent
柒和远方5 小时前
V079: Milvus 向量数据库:AI 日记本的三组件部署、集合字段建模与余弦索引
javascript·sql
水獭比特5 小时前
Anthropic Files / Skills 迁移:Workspace 不是租户隔离,API Key 也不是用户身份
javascript
默_笙5 小时前
☕ 我给 TS 类型做了台"瘦身手术",还顺手用 Docker 起了个 MySQL
前端·javascript
ji_shuke6 小时前
Vue 3 使用 History 哨兵和 popstate 拦截浏览器返回
前端·javascript·vue.js·history·哨兵·popstate