目录

vue el-table 超出隐藏移入弹窗显示

场景

处理空间有限或者需要展示详细但非即时必要信息

效果如下

关键代码

html 复制代码
<el-table-column show-overflow-tooltip prop="demo" label="label-name" width="120"></el-table-column>

完整案列

html 复制代码
<template>
  <div class="container">
    <el-table :data="demoList">
      <el-table-column label="姓名" prop="name" width="90"></el-table-column>
      <el-table-column label="性别" prop="sex" width="80"></el-table-column>
      <el-table-column label="年龄" prop="age" width="70"></el-table-column>
      <el-table-column show-overflow-tooltip prop="demo" label="label-name" width="120"></el-table-column>
    </el-table>
  </div>
</template>
javascript 复制代码
<script>
export default {
  data() {
    return {
      demoList: [
        {
          name: '张三',
          sex: '男',
          age: '18',
          demo: 'show-overflow-tooltip demo',
        },
      ],
    }
  },
}
</script>

完结!!!

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
星辰梦彼岸5 分钟前
JavaScript 内存管理:从垃圾回收机制到内存泄漏
前端·javascript
光影少年7 分钟前
vue事假机制都有哪些
前端·vue.js
和和和7 分钟前
关于webpack我们应该知道的知识
前端·javascript·面试
Moment27 分钟前
自己写的网站如何统计访问数据?一套轻量方案搞定 PV、UV 和停留时间
前端·javascript·面试
掘金安东尼1 小时前
🧭 前端周刊第409期(2025年4月7日-13日)
前端·javascript·面试
墨渊君1 小时前
React Native 与 React(Web) 开发的不同点, 如何快速上手?
前端·javascript·react native
林太白1 小时前
企业级NestJS如何创建项目学起来
前端·vue.js·后端
橙某人1 小时前
横向图片选择器之自动滚动定位功能-Javascript、Vue
前端·javascript·vue.js
旭久2 小时前
html简易实现推箱子小游戏原理(易上手)
前端·javascript·html
.切切切 切萝卜2 小时前
【编写Node接口;接口动态获取VUE文件并异步加载, 并渲染impoort插件使用】
vue.js·前端框架·vue