element-ui的table,超过两行文字隐藏,鼠标移入时tips展示全部内容

element-ui自带的东西很好用,但是不可否认的是, 当需求变更的时候,组件的修改也是真的烦。

element-ui里table自带的文字超过内容自动隐藏,鼠标移入该元素时候tips展示全部内容:

ini 复制代码
<el-table-column
    label="文章ID"
    prop="Id"
    :show-overflow-tooltip="true">
</el-table-colum>

但是!!这个属性,只能让文本展示一行,产品都提了要展示两行,那怎么办,只能自己写了,话不多说,上代码。

css:

css 复制代码
/* table中的文字超过两行隐藏多余文本 */
.myNote{
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
}

html:

xml 复制代码
<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:

ini 复制代码
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
}

效果图:

感谢: juejin.cn/post/710378...

相关推荐
Captaincc13 分钟前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
程序员杨工16 分钟前
【原创】SpringBoot3+Vue3客户管理系统
vue.js·springboot
吃饺子不吃馅1 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学
theOtherSky2 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
Baklib梅梅2 小时前
无头内容管理系统:打造灵活高效的多渠道内容架构
前端·ruby on rails·前端框架·ruby
会联营的陆逊2 小时前
JavaScript 如何优雅的实现一个时间处理插件
javascript
over6972 小时前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript
Amy_cx2 小时前
搭建React Native开发环境
javascript·react native·react.js
代码AI弗森2 小时前
Python × NumPy」 vs 「JavaScript × TensorFlow.js」生态全景图
javascript·python·numpy
疏狂难除2 小时前
关于spiderdemo第二题的奇思妙想
javascript·爬虫