element-ui的table,超过两行文字隐藏,鼠标移入时tips展示全部内容
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
element-ui自带的东西很好用,但是不可否认的是, 当需求变更的时候,组件的修改也是真的烦。
element-ui里table自带的文字超过内容自动隐藏,鼠标移入该元素时候tips展示全部内容:
<el-table-column label="文章ID" prop="Id" :show-overflow-tooltip=“true”></el-table-colum>
但是!!这个属性,只能让文本展示一行,产品都提了要展示两行,那怎么办,只能自己写了,话不多说,上代码。
css:
/* table中的文字超过两行隐藏多余文本 */
.myNote{
display:-webkit-box;
text-overflow:ellipsis;
overflow:hidden;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
}
html:
<el-table-column 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.title }}</div>
<div @mouseenter="showTips($event, scope.row)" class="myNote">{{ scope.row.title }}</div>
</el-tooltip>
</template>
</el-table-column>
js:
showTips(obj, row){
/*obj为鼠标移入时的事件对象*/
/*currentWidth 为文本在页面中所占的宽度,创建标签,加入到页面,获取currentWidth ,最后在移除*/
let TemporaryTag = document.createElement('span');
TemporaryTag.innerText = row.title;
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
}
效果:
参考文章:
https://blog.csdn.net/qq_42533735/article/details/107057038
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)