element-UI table单元格的内容太长，隐藏文字，鼠标滑过弹框显示

2021年8月17日 141次阅读 来源: 神呐

element-UI table单元格的内容太长，隐藏文字，鼠标滑过弹框显示

参考：https://blog.csdn.net/qq_42533735/article/details/107057038?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.compare&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.compare

测试数据

//测试数据
tableData: [
	{
		id:1,
		remark:'111111111111111222222222222222222222222222222222222222222223333333333333333333333333'
	},
	{
		id:2,
		remark:'11111111111113333'
	}
]

方法一：Table-column Attributes 的属性show-overflow-tooltip，显示效果在一行

《element-UI table单元格的内容太长，隐藏文字，鼠标滑过弹框显示》

<el-table-column prop="remark" align="center" label="备注" show-overflow-tooltip></el-table-column>

效果

《element-UI table单元格的内容太长，隐藏文字，鼠标滑过弹框显示》

方法二：使用上面哥们的办法，用tooltip文字提示

......省略部分代码 <el-table>啥的
<el-table-column prop="remark" align="center" label="备注">
	<template slot-scope="scope">
		<el-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>
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
}

显示效果：弹框还是一行

《element-UI table单元格的内容太长，隐藏文字，鼠标滑过弹框显示》

 

方法三：

使用popover弹出框，可以控制弹框的宽度

......省略部分代码 <el-table>啥的
<el-table-column prop="remark" align="center" label="备注">
	<template slot-scope="scope">
		<el-popover
			width="200"
			trigger="hover"
			placement="top"
			v-model="scope.row.showTooltip"
			:open-delay="500"
			:disabled="!scope.row.showTooltip"
		>
		    <div>{
  {scope.row.remark}}</div>
		    <div slot="reference" @mouseenter="showTips($event,scope.row)" class='myNote'>{
  {scope.row.remark}}</div>
		</el-popover>
	</template>
</el-table-column>

//showTips同方法二

显示效果：

《element-UI table单元格的内容太长，隐藏文字，鼠标滑过弹框显示》

TOP：通过文本宽度判断行数

          注意Tooltip和Popover 插槽怎么用

 

    原文作者：神呐
    原文地址: https://blog.csdn.net/qq_41957192/article/details/109360374
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞