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、感谢!

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值