前言
el-table 设置内容超出宽度后省略内容展示不太符合项目需求，样式展示不出来效果
最终展示效果如下:
因为table自带的show-overflow-tooltip属性没有办法去控制，我就使用element-plus Tooltip文字提示去实现的，通过mouseenter和mouseleave去控制 Tooltip的显示隐藏
代码展示如下
<template>
<!-- table标签展示组件 -->
<el-table-column prop="tag" :label="props.text" width="300">
<template #default="{ row }">
// 通过对应字段控制显示隐藏
<el-tooltip raw-content :visible="row.isLabel" >
// row.tagDetailVOS为需要循环的数组 这个class很重要
<div class="label-superior" @mouseenter="(event)=>handleMouseEnter(event,row)" @mouseleave="()=>handleMouseLeave(row)">
// 为页面展示在table内容
<span
class="venuesLabel"
v-for="item in row.tagDetailVOS && row.tagDetailVOS"
:key="item.id"
>
{{ item.tagName }}
</span>
</div>
// 此插槽为展示鼠标放上去的内容
<template #content>
<div class="content">
<span
class="venuesLabel"
v-for="item in row.tagDetailVOS && row.tagDetailVOS"
:key="item.id"
>
{{ item.tagName }}
</span>
</div>
</template>
</el-tooltip>
</template>
</el-table-column>
</template>
<script lang="ts" setup name="BaseTagDetail">
// 定义父组件传值类型
interface propsType {
text: string
}
// 初始化父组件传参内容
const props = withDefaults(defineProps<propsType>(), {})
// 鼠标移入 进行计算展示
const handleMouseEnter=(el:any,content:any)=>{
if (Number(el.target.clientWidth)>240) {
content.isLabel=true
}else{
content.isLabel=false
// content.isLabel=false
}
// });
}
// 鼠标离开隐藏
const handleMouseLeave=(content:any)=>{
content.isLabel=false
}
</script>
<style lang="scss" scoped>
.label-superior{
display:inline-block;
max-width:250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.venuesLabel{
display: inline-block;
padding: 1px 6px;
margin:0 10px 3px 0;
font: 14px 'Alibaba PuHuiTi 2.0-55 Regular';
background: #00D889;
border: none;
border-radius: 3px;
box-shadow: none;
color: #ffffff;
}
</style>
