zoukankan      html  css  js  c++  java
  • 不用 :show-overflow-tooltip=“true”,element-UI table文字超出*行,隐藏多余文字,移入显示tips

    element-UI table关键是插槽 与 行列的条件判断 scope.$index scope.row
    动态字段名的使用
    element-UI table文字超出两行,隐藏多余文字,移入显示tips
    element-UI表格的列属性
    超出两行隐藏多余文本,移入时tips显示全部内容
    超出的文本的隐藏
    文本超过两行,移入时tips显示全部内容
    通过长度判断
    element-UI表格的列属性
    通过设置 :show-overflow-tooltip=“true” 这个属性可以达成超出一行的文字用省略号替代,并带有移入时tips显示全部内容的需求。但是如果想要文本超出两行、三行的需求,显然设置这个属性是无法完成的。

    超出两行隐藏多余文本,移入时tips显示全部内容
    我们想完成的是超出两行才用省略号隐藏多余文本,并且移入才会有tips显示;两行以内的文本则不隐藏也不显示tips。

    超出的文本的隐藏

    .myNote{
      display:-webkit-box;
      text-overflow:ellipsis;
      overflow:hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient:vertical;
    }
    

    文本超过两行,移入时tips显示全部内容

    <!-- tips悬浮提示 -->
    <el-tooltip
            placement="top"
            v-model="scope.row.showTooltip"
            :open-delay="500"
            effect="dark"
            :disabled="!scope.row.showTooltip">
      <div slot="content">{{scope.row.note}}</div>
      <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.note}}</div>
    </el-tooltip>
    

    注意! 显示悬浮提示时v-model 和 disabled属性要一起使用才有效果。

     showTips(obj, row){
          /*obj为鼠标移入时的事件对象*/
    
          /*currentWidth 为文本在页面中所占的宽度,创建标签,加入到页面,获取currentWidth ,最后在移除*/
          let TemporaryTag = document.createElement('span');
          TemporaryTag.innerText = row.note;
          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
    }
    

    通过长度判断

    通过表格高度去判断,但是后来发现,高度不是一个固定不变的值,会随着移入移出变化,并且其他列的高度超出也会影响到一整行的高度。所以最后还是通过文本宽度来判断,把文本宽度与容器宽度比较,这样得到的值才是固定不变的。

  • 相关阅读:
    WPF 如何引入外部样式
    jQuery插件-json2.js
    前端js几种加密/解密方法
    asp.net Web项目中使用Log4Net进行错误日志记录
    UpdateProgress
    UpdatePanel的简单用法(非嵌套)
    UpdatePanel的用法详解
    asp.net调用前台js调用后台代码分享
    JVM中的运行参数
    为什么要对jvm进行优化
  • 原文地址:https://www.cnblogs.com/7c89/p/14704327.html
Copyright © 2011-2022 走看看