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

相关推荐
不买Huracan不改名2 分钟前
安装Codex(需要用npm)
前端·npm·node.js
Dorcas_FE11 分钟前
axios请求缓存与重复拦截:“相同请求未完成时,不发起新请求”
前端·spring·缓存
dreams_dream18 分钟前
vue中axios与fetch比较
前端·javascript·vue.js
梦鱼39 分钟前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
best66640 分钟前
Flex 与 Grid 的 order 参数:布局界的 "插队神器"
前端
小噔小咚什么东东40 分钟前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
猫七先生41 分钟前
微信小程序一键登录可行性方案
前端·微信小程序
维他AD钙41 分钟前
前端开发 8 个非常实用小技巧:高效解决日常开发痛点
前端
光影少年1 小时前
webpack和vite优化方案都有哪些
前端·webpack·node.js