el-table 列内容溢出 显示省略号 悬浮显示文字

第一种方案：利用 title 的方式

利用插槽与title，自己对 el-table-column 显示内容及样式进行修改；

<el-table-column prop="user_info" label="用户信息" width="120">
<template slot-scope="scope">
<span
:title="scope.row.user_info"
style="
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: pre-line;
"
>
{
{ scope.row.user_info}}
</span>
</template>
</el-table-column>

第二种方案：利用 show-overflow-tooltip

官方文档：

这里是对显示主题的设置，dark 是黑色； light 是白色； 如果不写，就是黑色；

 关键属性

 实现代码：

<el-table :data="tableData" tooltip-effect="light">
<el-table-column prop="user_info" label="用户信息" width="120" :show-overflow-tooltip="true"></el-table-column>
</el-table>

第三种方案： 利用 el-popover （Popover 弹出框）

官方文档：el-popover Attributes

<el-table-column prop="user_info" label="用户信息">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<span>{
{ scope.row.user_info }}</span>
<div slot="reference">
<span style="
display: -webkit-box;;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: pre-line;
">
{
{ scope.row.user_info }}
</span>
</div>
</el-popover>
</template>
</el-table-column>

第四种方案：el-tooltip  (Tooltip 文字提示)

官方文档：el-tooltip Attributes

<el-table-column prop="user_info" label="用户信息">
<template slot-scope="scope">
<el-tooltip :content="scope.row.user_info" placement="top" effect="light">
<span style="
display: -webkit-box;;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: pre-line;
">
{
{ scope.row.user_info }}
</span>
</el-tooltip>
</template>
</el-table-column>

其他方案：（待完善。。）

1、可以在点击单元格的时候，展开全部内容；可以在省略文字和全部文字之间切换；

2、可以先对内容长度进行判断，然后对超出的显示内容进行截取操作，点击显示全部；

3、通过动态类名的方式实现；

4、。。。此处省略 1 万字；

5、感谢！