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 Element UI 表单自定义校验规则及使用

    Vue Element UI 表单自定义校验规则及使用

    这篇文章主要介绍了Vue Element UI 表单自定义效验规则及使用,文中通过代码介绍了常见表单效验规则,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • Vue-Element-Admin前端接入SSO的方法步骤

    Vue-Element-Admin前端接入SSO的方法步骤

    本文主要介绍了Vue-Element-Admin前端接入SSO的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • Vue中ref、reactive、toRef、toRefs、$refs的基本用法总结

    Vue中ref、reactive、toRef、toRefs、$refs的基本用法总结

    这篇文章主要给大家介绍了关于Vue中ref、reactive、toRef、toRefs、$refs的基本用法,以及他们之家的区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • vue2.0父子组件间通信的实现方法

    vue2.0父子组件间通信的实现方法

    本篇文章主要介绍了vue2.0父子组件间通信的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-04-04
  • 通过Vue实现Excel文件的上传和预览功能

    通过Vue实现Excel文件的上传和预览功能

    在业务系统中,Excel 文件作为一种常用的数据存储和传输格式,经常需要被处理和展示,这篇文章将讲解如何通过 Vue 和 xlsx.js 实现 Excel 文件的上传和预览功能,需要的朋友可以参考下
    2025-04-04
  • Vue.js分页组件实现:diVuePagination的使用详解

    Vue.js分页组件实现:diVuePagination的使用详解

    这篇文章主要介绍了Vue.js分页组件实现:diVuePagination的使用详解,需要的朋友可以参考下
    2018-01-01
  • Vue2中pinia刷新后数据丢失的问题解决

    Vue2中pinia刷新后数据丢失的问题解决

    Pinia是一个Vue.js状态管理库,如果你在组件中修改了store中的数据并刷新了界面,Pinia会将store中的数据重置为初始值,从而导致数据丢失的问题,本文就来介绍一下问题解决,感兴趣的可以了解一下
    2023-12-12
  • vue输入框组件开发过程详解

    vue输入框组件开发过程详解

    这篇文章主要为大家详细介绍了vue输入框组件开发过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 解决Vue_localStorage本地存储和本地取值问题

    解决Vue_localStorage本地存储和本地取值问题

    这篇文章主要介绍了解决Vue_localStorage本地存储和本地取值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue 2源码解析Parse函数定义

    Vue 2源码解析Parse函数定义

    这篇文章主要为大家介绍了Vue 2源码解析Parse函数定义,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08

最新评论