需求
vue3项目中,使用了vxeTable和bootstrap组件,在使用表格时,当内容多行省略时,tooltip显示全部内容
vue模板
<vxe-table
border
:scroll-y="{ enabled: false }"
:row-config="{ isHover: true }"
:align="'center'"
class="penalty-table"
:data="list"
>
<vxe-column field="illegalFact" title="姓名" show-overflow="tooltip">
<template #default="{ row }">
<span
:id="'illegal-fact-' + row.id"
class="illegal-fact-tooltip element"
data-bs-toggle="tooltip"
data-bs-placement="top"
:data-bs-title="row.illegalFact"
@mouseenter="showTooltip('illegal-fact-' + row.id)"
@mouseleave="hideTooltip('illegal-fact-' + row.id)"
>
{{ row.illegalFact }}
</span>
</template>
</vxe-column>
<vxe-column field="penaltyCode" title="性别"></vxe-column>
<vxe-column field="penaltyGist" title="测试" show-overflow="tooltip">
<template #default="{ row }">
<span
:id="'penalty-gist-' + row.id"
class="illegal-fact-tooltip element"
data-bs-toggle="tooltip"
data-bs-placement="top"
:data-bs-title="row.penaltyGist"
@mouseenter="showTooltip('penalty-gist-' + row.id)"
@mouseleave="hideTooltip('penalty-gist-' + row.id)"
>
{{ row.penaltyGist }}
</span>
</template>
</vxe-column>
<template #empty>
<span style="display: inline-block; height: 300px">
<img
src="@/assets/images/emptyIcon.png"
style="margin-top: 50px"
alt="图片"
@error.once="setDefaultImage"
/>
<p>没有更多数据了!</p>
</span>
</template>
</vxe-table>
ts代码
const showTooltip = (id: any) => {
if (
(document.getElementById(id)?.scrollHeight as number) >
(document.getElementById(id)?.offsetHeight as number)
) {
$('.table-row #' + id).tooltip()
$('.table-row #' + id).tooltip('show')
}
}
const hideTooltip = (id: any) => {
if (
(document.getElementById(id)?.scrollHeight as number) >
(document.getElementById(id)?.offsetHeight as number)
) {
$('.table-row #' + id).tooltip('hide')
}
}
scss代码
:deep(.vxe-table--render-default .vxe-body--column.col--ellipsis:not(.col--actived) > .vxe-cell) {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
max-height: none;
}