Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

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

Sunshine_Jian 2022-08-06 10:14:30 阅读数:3 评论数:0 点赞数:0 收藏数:0

第一种方案:利用 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、感谢!

 

版权声明
本文为[Sunshine_Jian]所创,转载请带上原文链接,感谢
https://blog.csdn.net/Sunshine_Jian/article/details/126134029

支付宝红包,每日可领(支付宝免费1-2元支付红包)