自定义修改el-talbe show-overflow-tooltip的样式(自定义修改器)

编辑：rootadmin

自定义修改el-talbe show-overflow-tooltip的样式

推荐整理分享自定义修改el-talbe show-overflow-tooltip的样式(自定义修改器)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:自定义修改qq在线状态网站,自定义修改图片尺寸,自定义修改QQ机型,qq音乐歌单顺序怎么自定义修改,自定义修改手机型号下载,自定义修改图片尺寸,自定义修改QQ机型,自定义修改QQ机型,内容如对您有帮助，希望把文章链接给更多的朋友！

el-table表格行有一个可使用的show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。

<el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column>

当文字过多时它会显示一长行，非常不美观。

自定义修改el-talbe show-overflow-tooltip的样式(自定义修改器)

当然，你可以添加一个样式修改它的宽度。

.el-tooltip__popper{ max-width:50% }

但是如果你写在style lang=“scss” scoped里面它不会生效，如果新写一个style标签在里面写样式又会造成全局样式污染，网上找了好多也没看见好的解决办法。

在查看el-table文档时发现有一个tooltip-effect属性，它有两个可选值dark/light，可以简单的修改它的主题色。

<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">

如果加上这个属性，tooltip会有一个is-dark/is-light的样式名，但是这个样式是它本来就有的，即使不加tooltip-effect它也会有默认的is-dark,所以它也是一个全局样式名，这样仍然没办法解决上面提到的问题。无奈准备放弃，用其它的比如popover或者tooltip插槽来写时突然灵光一闪，如果我不使用那两个可选值dark/light，自己写一个呢，有趣的事发生了，它的is-dark/is-light变成了我传入的值is-myTooltips

tooltip-effect="myTooltips"

这样我们就得到了一个自定义样式，虽然没了它的基础样式，但你可以在自定义样式上面想改成什么样都可以。

而后我又试着传入了

tooltip-effect="dark myTooltips"

有趣的事发生了，它不仅有了is-dark这个基础样式，还拥有了一个自定义样式名。这个就有点类似于popper-class的味道了。最后就变得更简单了，直接在style里面用自定义的样式名写你想要的样式。

本文链接地址:https://www.jiuchutong.com/zhishi/283958.html 转载请保留说明！

上一篇：小米路由器2代1T版本 PC端使用远程下载的详细方法(小米路由器2代改8t)

下一篇：畅玩7C怎么截屏(荣耀畅玩7怎么截长图)