Element Table show-overflow-tooltip属性显示在下方的解决方案

首先来看默认的show-overflow-tooltip悬浮显示的样式:

Element Table show-overflow-tooltip属性显示在下方的解决方案_第1张图片

在使用Table时可以设置超出内容通过show-overflow-tooltip属性达到悬浮显示的状态,但是这个悬浮框默认是显示在上方的。有时候我们会想让他出现在下方或者其他方向,来达到下图的效果:

Element Table show-overflow-tooltip属性显示在下方的解决方案_第2张图片

解决方案如下:

Element Table show-overflow-tooltip属性显示在下方的解决方案_第3张图片


    

placement为弹出方向,trigger为触发机制,其他自定义属性参考Popover组件的官方文档:https://element.eleme.cn/#/zh-CN/component/popover

在需要控制出现方向的表格中嵌套一层Popover组件,然后继续在该组件内定义要显示的内容以及触发目标,具体的显示逻辑自己定义好直接显示在el-popover里面template中就行了。里面默认只显示字符串,需要换行等操作只需要通过v-html转一下就行了。

你可能感兴趣的:(ElementUI,前端,elementui,tablet)