element UI 之table表格表头过长使用点点...显示,并添加鼠标移入悬浮显示


需求:

 

 

鼠标移入表头:

 

 

1、样式中添加

.el-table .cell {
word-break: keep-all !important;
white-space: nowrap !important;
}
2、在需要悬浮显示的表头文字过长处添加

:show-overflow-tooltip="true"
:render-header="renderHeader"

3、methods中添加:

renderHeader(h, data) {
return h("span", [
h(
"el-tooltip",
{
attrs: {
class: "item",
effect: "dark",
content: data.column.label,
placement: "top",
},
},
[h("span", data.column.label)]
),
]);
},
————————————————
版权声明:本文为CSDN博主「小柠檬爱编程」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/hong521520/article/details/119644719


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM