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

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

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

1 2 3 4 5

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

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

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

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

1 2 3 4 5 6 7 8 9 10

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

超出的文本的隐藏

1 2 3 4 5 6 7

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

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

1 2 3 4 5 6 7 8 9 10

<!-- 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属性要一起使用才有效果。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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 }

通过长度判断

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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

本人实验有效，所以推荐给大家使用