在VUE3+Element-plus中的el-table实现单元格内超出内容提示功能
*原理:**通过css设置后,可以判断出元素的clientHeight与scrollHeight是不同的值,通过判断他们的大小,来判断提示是否进行提示,而表格内容会同时出现多个元素所以这里加入了ref,并且通过scope.$index知道是第几个元素,然后通过mouseenter事件进行传值实现,该功能就完成了,可以随意改变显示行数,只需改变-webkit-line-clamp属性即可。在完成公司
在完成公司业务的时候,表格内容太多会撑开,不太美观,需要做一些优化,发现有一些部分还是需要探讨一下。
1.Table-column 自带属性
在Table-column 属性中有个属性
show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip |
---|
貌似可以直接实现该功能,但有两个缺点
(1)隐藏后只能一行显示,想多行省略加入样式
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 9;
-webkit-box-orient: vertical;
之后提示会不生效了,因为自带属性的提示是根据宽度来进行判断了,而该样式是根据高度进行判断
(2)表格内容不能嵌套,否则同样样式不会生效,有格式要求非常不方便
2.利用el-tooltip组件
直接上代码
html部分
<el-tooltip
placement="top-start"
effect="light"
:disabled="latestTooltipFlag"
enterable
>
<template #content>
<div class="last_commoner-tip">
<--提示内容-->
</div>
</template>
<div
class="last_commoner"
ref="latest_apm_visit"
@mouseenter="latestChange(latest_apm_visit[scope.$index])"
>
<--展示内容-->
</div>
</el-tooltip>
js部分
const latest_apm_visit = ref();
const latestChange = (event: any) => {
if (event.clientHeight < event.scrollHeight) {
latestTooltipFlag.value = false;
} else {
latestTooltipFlag.value = true;
}
};
css部分
.last_commoner-tip {
width: 380px;
}
.last_commoner {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 9; //改变数字显示几行
-webkit-box-orient: vertical;
}
原理:通过css设置后,可以判断出元素的clientHeight与scrollHeight是不同的值,通过判断他们的大小,来判断提示是否进行提示,而表格内容会同时出现多个元素所以这里加入了ref,并且通过scope.$index知道是第几个元素,然后通过mouseenter事件进行传值实现,该功能就完成了,可以随意改变显示行数,只需改变-webkit-line-clamp属性即可。
其实看似方便同样也有缺点,每设置一列都需要加上上面一串代码,想要进行封装但是由于ref的存在,封装难度加大,各位大佬如果有好的封装方法欢迎解答。
由于感觉不是最优解法,于是打算尝试换种优化,不再超出内容展示了,而是点击展示所有内容,由省略到展示全部。实现并不难,这里不再赘述了,如果各位大佬有更好的方法,欢迎交流。
更多推荐
所有评论(0)