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

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

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

 

先来看看效果图吧：

 

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

 

直接上代码：

 <el-table :data="tableData">
         <el-table-column
                    label="表头内容"
                    align="center"
                    show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>Hong Yuan International</span>
                </template>
            </el-table-column>
 </el-table>    

大功告成！