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

杨梦馨2023-12-12 16:23

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...