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>

完结!!!

相关推荐
你的人类朋友8 小时前
【Node&Vue】JS是编译型语言还是解释型语言?
javascript·node.js·编程语言
烛阴8 小时前
TypeScript高手密技:解密类型断言、非空断言与 `const` 断言
前端·javascript·typescript
样子20189 小时前
Uniapp 之renderjs解决swiper+多个video卡顿问题
前端·javascript·css·uni-app·html
黑客飓风9 小时前
JavaScript 性能优化实战大纲
前端·javascript·性能优化
杨荧11 小时前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
YeeWang12 小时前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript
gnip12 小时前
Jenkins部署前端项目实战方案
前端·javascript·架构
Orange30151112 小时前
《深入源码理解webpack构建流程》
前端·javascript·webpack·typescript·node.js·es6
李明卫杭州13 小时前
CSS `clamp()` 函数详解
javascript
奶丝兔蜜柚14 小时前
栈溢出优化
javascript