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

2023年2月18日 289次阅读 来源: Try again ,

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
}

效果：

《element-ui的table，超过两行文字隐藏，鼠标移入时tips展示全部内容》
参考文章：
https://blog.csdn.net/qq_42533735/article/details/107057038

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