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

相关推荐
我登哥MVP20 分钟前
Ajax 详解
java·前端·ajax·javaweb
非凡ghost44 分钟前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求
馨谙1 小时前
/dev/null 是什么,有什么用途?
前端·chrome
JamSlade2 小时前
流式响应 sse 系统全流程 react + fastapi为例子
前端·react.js·fastapi
徐同保2 小时前
react useState ts定义类型
前端·react.js·前端框架
liangshanbo12152 小时前
React 19 vs React 18全面对比
前端·javascript·react.js
望获linux2 小时前
【实时Linux实战系列】Linux 内核的实时组调度(Real-Time Group Scheduling)
java·linux·服务器·前端·数据库·人工智能·深度学习
Never_Satisfied2 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果2 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
Sheldon一蓑烟雨任平生3 小时前
Vue3 列表渲染
vue.js·vue3·v-for·列表渲染·vue3 列表渲染·v-for 循环对象·v-for与计算属性