element-ui table表格文字过长实现el-tooltip文字提示换行效果

最新推荐文章于 2024-05-30 16:18:24 发布

格子衫·

最新推荐文章于 2024-05-30 16:18:24 发布

阅读量2.7k

点赞数 3

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_43550766/article/details/130382612

版权

一、table超出两行显示省略号并提示

// html片段
<el-table-column class-name="pig-farm_border-right" prop="remark" label="备注">
	<template slot-scope="scope">
	<!-- tips悬浮提示 -->
		<el-tooltip
			popper-class="my-tooltip"
			placement="top"
			v-model="scope.row.showTooltip"
			:open-delay="500"
			effect="dark"
			:disabled="!scope.row.showTooltip"
		>
			<div slot="content">{{scope.row.remark}}</div>
			<div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.remark}}</div>
		</el-tooltip>
	</template>
</el-table-column>

// js片段
// 超出两行tooltip提示
showTips(obj, row){
	/*obj为鼠标移入时的事件对象*/
	/*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
	let TemporaryTag = document.createElement('span');
	TemporaryTag.innerText = row.remark;
	TemporaryTag.className = 'getTextWidth';
	document.querySelector('body').appendChild(TemporaryTag);
	let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
	document.querySelector('.getTextWidth').remove();
	/*cellWidth为表格容器的宽度*/
	const cellWidth = obj.target.offsetWidth
	/*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/
	currentWidth <= (2*cellWidth) ? row.showTooltip = false : row.showTooltip = true
},

//CSS片段
.myNote{
	display:-webkit-box;
	text-overflow:ellipsis;
	overflow:hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient:vertical;
}

.my-tooltip {
	max-width: 500px;
}

.my-tooltip .el-tooltip_content {
	white-space: pre-wrap;
	word-wrap: break-word;
}