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>

总结

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

相关文章

  • 快速解决Vue项目在IE浏览器中显示空白的问题

    快速解决Vue项目在IE浏览器中显示空白的问题

    今天小编就为大家分享一篇快速解决Vue项目在IE浏览器中显示空白的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解vue2和vue3如何定义响应式数据

    详解vue2和vue3如何定义响应式数据

    这篇文章主要是来和大家一起讨论一下vue2和vue3是如何定义响应式数据的,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解下
    2023-11-11
  • 详解Vue3.x中组件间参数传递的示例代码

    详解Vue3.x中组件间参数传递的示例代码

    在 Vue3.x 中,组件间的参数传递是构建复杂应用时不可或缺的一部分,无论是父子组件还是兄弟组件之间,合理的数据流动都是保持应用状态一致性和可维护性的关键,本文将通过示例代码,详细介绍 Vue3.x 中组件间如何传递参数,需要的朋友可以参考下
    2024-03-03
  • vue中echarts图表大小适应窗口大小且不需要刷新案例

    vue中echarts图表大小适应窗口大小且不需要刷新案例

    这篇文章主要介绍了vue中echarts图表大小适应窗口大小且不需要刷新案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue.js中$watch的用法示例

    vue.js中$watch的用法示例

    这篇文章为大家详细介绍了vue.js中$watch的用法,文中给出了示例代码,相信对大家的理解和学习具有一定的参考借鉴价值,有需要的朋友们可以一起看看吧。
    2016-10-10
  • Vue3中简单实现动态添加路由

    Vue3中简单实现动态添加路由

    本文主要介绍了Vue3中简单实现动态添加路由,,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • Vue-router结合transition实现app前进后退动画切换效果的实例

    Vue-router结合transition实现app前进后退动画切换效果的实例

    下面小编就为大家带来一篇Vue-router结合transition实现app前进后退动画切换效果的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Ant-design-vue Table组件customRow属性的使用说明

    Ant-design-vue Table组件customRow属性的使用说明

    这篇文章主要介绍了Ant-design-vue Table组件customRow属性的使用说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue实现进入全屏和退出全屏的示例代码

    vue实现进入全屏和退出全屏的示例代码

    最近一个项目需要进行大屏展示,所以登录完就要处于一个全屏的状态,本文主要介绍了vue实现进入全屏和退出全屏的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • 简单的vue-resourse获取json并应用到模板示例

    简单的vue-resourse获取json并应用到模板示例

    本篇文章主要介绍了简单的vue-resourse获取json并应用到模板示例,非常具有实用价值,需要的朋友可以参考下。
    2017-02-02

最新评论