table里写个自定义的 show-overflow-tooltip 效果
写在前面
Element 默认的 el-table show-overflow-tooltip 对内容过长文本的展示处理比较简单粗暴：即显示所有的文本内容。如果需求表示要超出部分展示有较多自定义内容和样式的话，这个自带的属性就不能达到预期的效果了。嗯，那来自己写一个吧。
分析
需求提出的要求拆分如下：
若内容超出，右侧显示 ··· ，内容不超出，右侧无 ···
鼠标移入 内容超出文右侧显示 ··· , 展示对应超出显示内容；鼠标移出，该内容隐藏。
略微思考了一下，怎么实现呢？
在 el-table-column 里判断内容是否超出显示范围， 然后 if-else 里分别写上有无 el-popover 的两种情况？
好像不太对。感觉有点像在每行操作编辑按钮里写个表单一样蠢
那有无更好的方式？更进一步，我想可以这样：在 el-table 外定义单独的一个 el-popover ，点击 ··· 按钮时获取当前单元格展示内容数据，并依据点击 ··· 按钮坐标重新定义 el-popover 位置。
实现
ok，至此，仅需要实现两个略微困难的点，其他都是常规操作。
1、内容是否超出判断
scrollWidth：对应内容宽度
clientWidth：对应可视区宽度
当 scrollWidth > clientWidth 即为内容超出
2、el-popover定位
这块想了比较久，开始是 popper-class 设置相应的定位属性，无效。最终实现是通过给 reference 插槽元素绝对定位实现。
至此，基本能满足完全自定义内容的 show-overflow-tooltip 效果。
是否可以再进一步？
此次业务因为只有一列需要使用到 自定义超出效果，故 el-popover 内容部分的结构是可以写成固定的。如果后续出现表单中所有列都要使用自定义超出效果，且效果不同，可能会借助render 函数或者其他实现。如果你看到这里，也欢迎 xdm 给我点思路。????????????
作者：StartFromThird
链接：https://juejin.cn/post/7032310962589794312