element-ui单元格数据需要显示省略号并且要有提示框显示内容_element ui 判断单行是否出现省略号并出现tips-优快云博客

该文章描述了一个技术解决方案，当表格单元格内容超过两行时，使用HTML的el-tooltip组件结合JavaScript和CSS来展示省略号，并在鼠标悬停时通过提示框完整显示内容。方法涉及到Vue.js的指令和事件处理，以及动态计算单元格宽度。

需求：

内容超出2行时，单元格数据需要显示省略号并且要有提示框显示内容

解决方案：

字段：
1. prop：字段key，
2. row：一整行的数据
3. $index：索引
4. $event：当前dom节点

html

 <template #default="{ row, $index }">
   <el-tooltip v-model="row[`${prop}${$index}`]" effect="dark" :content="`${row[item.prop]} `"
         placement="top" :disabled="!row[`${prop}${$index}`]" :open-delay="300">
         <div class="description" @mouseover="isShowTooltip($event, row, prop, $index)">
             {{ row[prop] }}
         </div>
     </el-tooltip>
 </template>

js

isShowTooltip(obj, row, key, index) {
/* cellWidth为表格单元格容器的宽度*/
    const cellWidth = obj.target.offsetWidth;
    const newCell = document.createElement('span');
    newCell.innerText = row[key];
    document.body.appendChild(newCell);
    const currentWidth = newCell.getClientRects()[0].width;
    document.body.removeChild(newCell)
    row[`${key}${index}`] = currentWidth > cellWidth * 2 ? true : false;
},

css

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