修改Element-plus Table内容过长自定义show-overflow-tooltip

修改Element-plus Table内容过长自定义show-overflow-tooltip

展示效果如下

因为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>