如何给element-ui table的数据增加悬浮提示？

场景：要使表格中的数据文字不换行，鼠标放上去就显示数据内容，就像那种tip提示。该怎么实现呢？

只需加个属性就能实现，没错就是这么简单，就让我们一起来看看吧！

 

先来看看效果图吧：

 

这里我们用到 show-overflow-tooltip属性，官方解释：默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。

 

直接上代码：

 1  <el-table :data="tableData">
 2          <el-table-column
 3                     label="表头内容"
 4                     align="center"
 5                     show-overflow-tooltip>
 6                 <template slot-scope="scope">
 7                     <span>Hong Yuan International</span>
 8                 </template>
 9             </el-table-column>
10  </el-table>

大功告成！

 

posted @ 2021-03-09 16:29  Amerys  阅读(2699)  评论(3)    收藏  举报