element-ui —— el-tooltip 超出部分显示省略号，鼠标悬浮显示详情

前言：el-tooltip 组件本身就是悬浮提示功能，在对它进行二次封装时，要对它进行优化，实现超出的文本加提示，没超出的不给予提示。

1. 思路：加一个中间层，子集为数据全量，控制中间层的样式，并设置宽度，通过 ref 进行宽度对比，若子集比中间层更宽，既说明显示了...样式

2. 在需要用到组件的页面中引入

import tooltipOver from './components/tooltipOver'

3. 使用组件

tip：当同一页面使用多次组件时，需要定义不同的refName属性

感谢博客 https://www.cnblogs.com/97pkp/p/12895693.html

---

还有一种思路：在文本溢出时需要对文本进行处理；相对于一定高度的容器，溢出容器部分的文本显示省略号，同时，鼠标移入通过显示tooltip来显示文本的具体内容。
详情请见 https://www.jianshu.com/p/239d0d446587

如果你也经常使用element-ui 可持续关注 Element UI 入坑小结
如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！