elementui的table列超出隐藏tooltip悬浮显示问题

 更新时间:2023年11月17日 10:24:13   作者:LLL_LH  
这篇文章主要介绍了elementui的table列超出隐藏tooltip悬浮显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

elementui的table列超出隐藏tooltip悬浮显示

<el-table-column label="内容" show-overflow-tooltip>
    <template slot-scope="scope">
    {{scope.row.desc}}
    </template>
</el-table-column>

当表格中的某些内容过长会导致表格变形,所以可以只显示一行,超出的部分隐藏,鼠标滑过时显示所有内容,

如上所示,添加show-overflow-tooltip属性。

注意:

显示的内容只能包裹在行内元素里,或者不添加,不能包裹在块级元素里面

el-table文字超出隐藏;el-table表格文字一行展示,超出隐藏,多余的内容会在 hover时显示

el-table文字 默认情况下若内容过多会折行显示,若需要单行显示可以给el-table-column使用show-overflow-tooltip属性,

它接受一个Boolean,为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。

给el-table-column添加show-overflow-tooltip

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" show-overflow-tooltip label="地址">
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 基于express中路由规则及获取请求参数的方法

    基于express中路由规则及获取请求参数的方法

    下面小编就为大家分享一篇基于express中路由规则及获取请求参数的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • VUE配置history路由模式配置详细举例

    VUE配置history路由模式配置详细举例

    这篇文章主要给大家介绍了关于VUE配置history路由模式配置的相关资料,History模式是Vue路由的另一种模式,在History模式下URL中的路径不再使用#符号,而是直接使用正常的路径形式,需要的朋友可以参考下
    2023-12-12
  • Vue2如何使用qrcode库实现生成二维码

    Vue2如何使用qrcode库实现生成二维码

    在现代的前端开发中,二维码生成是一个常见的需求,尤其是在需要快速分享信息等场景中,本文将详细介绍如何在 Vue 2 项目中使用 qrcode 库生成二维码,感兴趣的可以了解下
    2025-05-05
  • 解决Element-ui radio单选框label布尔/数值的一个坑

    解决Element-ui radio单选框label布尔/数值的一个坑

    这篇文章主要介绍了解决Element-ui radio单选框label布尔/数值的一个坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue实现评价星星功能

    vue实现评价星星功能

    这篇文章主要为大家详细介绍了vue实现评价星星功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Vue开发实现吸顶效果的示例代码

    Vue开发实现吸顶效果的示例代码

    这篇文章主要介绍了Vue开发实现吸顶效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue demi支持sfc方式的vue2vue3通用库开发详解

    vue demi支持sfc方式的vue2vue3通用库开发详解

    这篇文章主要为大家介绍了vue demi支持sfc方式的vue2vue3通用库开发详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue3动态路由KeepAlive设计方案(附详细代码)

    Vue3动态路由KeepAlive设计方案(附详细代码)

    keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染,这篇文章主要介绍了Vue3动态路由KeepAlive设计方案的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2026-03-03
  • vue3 vite异步组件及路由懒加载实战示例

    vue3 vite异步组件及路由懒加载实战示例

    这篇文章主要为大家介绍了vue3 vite异步组件及路由懒加载实战示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • vue中的循环遍历对象、数组和字符串

    vue中的循环遍历对象、数组和字符串

    这篇文章主要介绍了vue中的循环遍历对象、数组和字符串,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论