记录一下el-table的tooltip换行

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

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

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

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

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

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

相关推荐
张人玉2 分钟前
基于 Vue 3 + ECharts + Express + SQLite 构建的鞋类零售数据分析与毛利预测平台——基于深度学习的鞋类销售数据分析系统
vue.js·sqlite·echarts·express
To_OC25 分钟前
拼路径读文件总踩坑?我把 Node 的 path 和 fs 彻彻底底捋了一遍
javascript·后端·node.js
自然 醒29 分钟前
记录We码开发者工具的一个bug
前端·javascript·bug
葡萄城技术团队31 分钟前
HTML元素单元格:用自定义 CellType 扩展 SpreadJS 的显示能力
前端·javascript·html
独泪了无痕10 小时前
Vue3 Hooks使用实战解析
前端·vue.js
shawxlee11 小时前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
kyriewen12 小时前
我给前端项目的接口请求套了6层保护——才发现以前一直在裸奔
前端·javascript·面试
郝亚军14 小时前
如何安装webstorm、Node.js和vue CLI
前端·javascript·vue.js
an3174215 小时前
6MB 组织树大文件性能优化全流程
前端·javascript·vue.js
GitLqr15 小时前
Vue 3.6 Vapor Mode vs React 19 Compiler:前端架构的两条分叉路
vue.js·react.js·vapor