我在使用element-plus中el-table组件的时候,对于某一<el-table-column>标签内的内容设置show-overflow-tooltip属性,但这里溢出展示的tooltip的默认样式是无法像el-tooltip标签那样,直接可以修改的。默认的样式是这样:
因此,我尝试这样:
<el-table-column property="name" :label="$t('Name')"
min-width='40%' show-overflow-tooltip><template #default="scope"><el-tooltip :content="scope.row.file_name" placement="bottom" offset="5" effect="light" :disabled="isShowFileName"><span class="name-line">{{ scope.row.file_name }}</span></el-tooltip></template>
</el-table-column>
但这样会导致同时展示两个tooltip,并且下面包裹在span标签外层的el-tooltip是会一直显示的,这里还需要写一个方法来判断当前是否溢出,这样逻辑就复杂了很多,至于如何判断,下面我会贴代码。这里我讲一下我对show-overflow-tooltip属性设置后样式的处理方法,使用官方文档中的:
注意这里这个属性是el-table的,不要写在<el-table-column>标签上,代码如下:
<el-table-column property="name" :label="$t('Name')"
min-width='40%' show-overflow-tooltip
:tooltip-options="{placement: 'bottom', effect: 'light', offset: -10}"><template #default="scope"><el-tooltip :content="scope.row.file_name" placement="bottom" offset="5" effect="light" :disabled="isShowFileName"><span class="name-line">{{ scope.row.file_name }}</span></el-tooltip></template>
</el-table-column>
实现效果如下:
上面提到如何判断当前文本是否溢出呢,我在需要判断的元素身上绑定了@mouseenter方法,然后编写代码如下(TS代码):
<el-tooltip :content="file_name" placement="bottom" offset="10" effect="light" :disabled="isShowName"><span class="pre-info-title" @mouseenter="visibilityNameChange($event)">{{ file_name }}</span>
</el-tooltip>function visibilityNameChange(event: any) {const ev = event.targetconst evWeight = ev.scrollWidthconst contentWeight = ev.clientWidthif (evWeight > contentWeight) {// 实际宽度 > 可视宽度 文字溢出isShowName.value = false} else {// 否则为不溢出isShowName.value = true}
}
即可判断是否溢出~