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

相关推荐
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙12 小时前
[译] Composition in CSS
前端·css
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端13 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧13 小时前
Promise 的使用
前端·javascript