vue element表格某一列内容过多,超出省略号显示的实现

2024-04-02 19:04:59 127人浏览安东尼

摘要

目录element表格某一列内容过多,超出省略号显示这样就好了，效果如下element-UI table文字超出两行，隐藏多余文字，移入显示tipselement-UI表格的列属性超

element表格某一列内容过多,超出省略号显示

在使用element组件库里面的table组件时，遇到某一个字段内容过多，导致td高度被撑开，布局显得很不美观，像这样

这时我们只要给table-cloumn添加一个属性show-overflow-tooltip，

<el-table-column label="描述" :show-overflow-tooltip='true'>
              <template slot-scope="scope">
                <span>{{scope.row.ms}}</span>
              </template>
            </el-table-column>

实现超出隐藏，并有提示，这样的话会有下面效果：

提示的长度特别长，超出了屏幕，不太好看。

可以在处理下样式，如下：

<style>
 .el-tooltip__popper{
    max-width:20%;
  }
  .el-tooltip__popper,.el-tooltip__popper.is-dark{
    background:rgb(48, 65, 86) !important;
    color: #fff !important;
    line-height: 24px;
  }
</style>

这样就好了，效果如下

如果想要设置，显示几行，超过指定的值再隐藏，可以参考下面

element-UI table文字超出两行，隐藏多余文字，移入显示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){
      
      
      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();
      
      const cellWidth = obj.target.offsetWidth
      
      currentWidth <= (2*cellWidth) ? row.showTooltip = false : row.showTooltip = true
}

通过长度判断

在这里插入图片描述

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

有朋友说会出现多个tips，我是直接放在el-table-column的template里面的，目前没发现这种情况。

<el-table-column
                prop="note"
                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.note}}</div>
              <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.note}}</div>
            </el-tooltip>
          </template>
        </el-table-column>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue element表格某一列内容过多,超出省略号显示的实现

本文链接: https://www.lsjlt.com/news/163530.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

vue element表格某一列内容过多,超出省略号显示的实现

目录element表格某一列内容过多,超出省略号显示这样就好了，效果如下element-UI table文字超出两行，隐藏多余文字，移入显示tipselement-UI表格的列属性超...

99+

2024-04-02
web开发中如何实现表格单元格内容超出时显示省略号效果

这篇文章给大家分享的是有关web开发中如何实现表格单元格内容超出时显示省略号效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。说明在前端开发中，经常会遇到需要限制单元格宽度并且内容超出部分显示省略号的的情况。下面...

99+

2023-06-08
HTML怎么实现LI中内容超过长度后以省略号显示

本篇内容介绍了“HTML怎么实现LI中内容超过长度后以省略号显示”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所...

99+

2024-04-02
Vue element-ui中表格过长内容隐藏显示的实现方式

目录一、el-table表格二、Popover 弹出框总结一、el-table表格在使用VUE显示后台数据时，经常会遇到数据过长，显示出来的效果很难看，如下图所示：上图中，红框...

99+

2024-04-02