Vue3中使用el-table遇到的问题

我在使用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.target
    const evWeight = ev.scrollWidth
    const contentWeight = ev.clientWidth
    if (evWeight > contentWeight) {
        // 实际宽度 > 可视宽度  文字溢出
        isShowName.value = false
    } else {
        // 否则为不溢出
        isShowName.value = true
    }
}

即可判断是否溢出~

相关推荐
前端小趴菜054 小时前
React - createPortal
前端·vue.js·react.js
军军君016 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
三原7 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
白仑色7 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端
阳火锅8 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
G_whang9 小时前
jenkins部署前端vue项目使用Docker+Jenkinsfile方式
前端·vue.js·jenkins
荔枝荔枝荔枝9 小时前
【Vue源码学习】Vue新手友好!为什么vue2 this能够直接获取到data和methods中的属性?
vue.js·源码
寻觅~流光9 小时前
封装---统一封装处理页面标题
开发语言·前端·javascript·vue.js·typescript·前端框架·vue
江上暮云10 小时前
手摸手带你彻底搞懂Vue的响应式原理
vue.js
恰薯条的屑海鸥10 小时前
前端进阶之路-从传统前端到VUE-JS(第五期-路由应用)
前端·javascript·vue.js·学习·前端框架