需求:
内容超出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;
}