vue element表格某一列内容过多,超出省略号显示的实现
作者：璐哈路哈呦
这篇文章主要介绍了vue element表格某一列内容过多,超出省略号显示的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
element表格某一列内容过多,超出省略号显示
在使用element组件库里面的table组件时，遇到某一个字段内容过多，导致td高度被撑开，布局显得很不美观，像这样
这时我们只要给table-cloumn添加一个属性show-overflow-tooltip，
<el-table-column label="描述" :show-overflow-tooltip='true'>
<template slot-scope="scope">
<span>{{scope.row.ms}}</span>
</template>
</el-table-column>实现超出隐藏，并有提示，这样的话会有下面效果：
提示的长度特别长，超出了屏幕，不太好看。
可以在处理下样式，如下：
<style>
.el-tooltip__popper{
max-width:20%;
}
.el-tooltip__popper,.el-tooltip__popper.is-dark{
background:rgb(48, 65, 86) !important;
color: #fff !important;
line-height: 24px;
}
</style>这样就好了，效果如下
如果想要设置，显示几行，超过指定的值再隐藏，可以参考下面
element-UI table文字超出两行，隐藏多余文字，移入显示tips
element-UI表格的列属性
通过设置 :show-overflow-tooltip=“true” 这个属性可以达成超出一行的文字用省略号替代，并带有移入时tips显示全部内容的需求。但是如果想要文本超出两行、三行的需求，显然设置这个属性是无法完成的。
超出两行隐藏多余文本，移入时tips显示全部内容
我们想完成的是超出两行才用省略号隐藏多余文本，并且移入才会有tips显示；两行以内的文本则不隐藏也不显示tips。
超出的文本的隐藏
.myNote{
display:-webkit-box;
text-overflow:ellipsis;
overflow:hidden;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
}
文本超过两行，移入时tips显示全部内容
<!-- tips悬浮提示 -->
<el-tooltip
placement="top"
v-model="scope.row.showTooltip"
:open-delay="500"
effect="dark"
:disabled="!scope.row.showTooltip">
<div slot="content">{{scope.row.note}}</div>
<div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.note}}</div>
</el-tooltip>
注意！ 显示悬浮提示时v-model 和 disabled属性要一起使用才有效果。
showTips(obj, row){
/*obj为鼠标移入时的事件对象*/
/*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
let TemporaryTag = document.createElement('span');
TemporaryTag.innerText = row.note;
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
}
通过长度判断
一开始我是想通过表格高度去判断，但是后来发现，高度不是一个固定不变的值，会随着移入移出变化，并且其他列的高度超出也会影响到一整行的高度。所以最后还是通过文本宽度来判断，把文本宽度与容器宽度比较，这样得到的值才是固定不变的。
有朋友说会出现多个tips，我是直接放在el-table-column的template里面的，目前没发现这种情况。
<el-table-column
prop="note"
label="简介">
<template slot-scope="scope">
<!-- tips悬浮提示 -->
<el-tooltip
placement="top"
v-model="scope.row.showTooltip"
:open-delay="500"
effect="dark"
:disabled="!scope.row.showTooltip">
<div slot="content">{{scope.row.note}}</div>
<div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.note}}</div>
</el-tooltip>
</template>
</el-table-column>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。