记录一下el-table的tooltip换行

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

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

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

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

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

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

相关推荐
星光不问赶路人1 小时前
vue3使用jsx语法详解
前端·vue.js
Mr Xu_1 小时前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
子兮曰1 小时前
深入理解滑块验证码:那些你不知道的防破解机制
前端·javascript·canvas
Highcharts.js1 小时前
【Highcharts】如何用命令行渲染导出图片?
javascript·导出·开发文档·highcharts·命令行渲染·命令行功能
weixin79893765432...2 小时前
Vue 组件的更新过程(编译系统 + 响应式系统 + 虚拟 DOM & Diff)
vue.js
陈振wx:zchen20082 小时前
JavaScript
javascript·js
我是伪码农3 小时前
Vue 智慧商城项目
前端·javascript·vue.js
不认输的西瓜3 小时前
fetch-event-source源码解读
前端·javascript
小书包酱3 小时前
在 VS Code中,vue2-vuex 使用终于有体验感增强的插件了。
vue.js·vuex
Zhencode4 小时前
Vue3 响应式依赖收集与更新之effect
前端·vue.js