show-overflow-tooltip 解决elementui el-table标签自动换行的问题

elementui中 el-table中某一行的高度不想因为宽度不够而撑开换行展示的解决方法。可通过show-overflow-tooltip属性解决,如下

代码是这样的

html 复制代码
<el-table-column width="80" prop="id" label="ID"></el-table-column>
<el-table-column width="250" prop="dictKey" label="字典Key"></el-table-column>
<el-table-column width="150" prop="dictValue" label="字典值"></el-table-column>
<el-table-column width="200" prop="label" label="标签"></el-table-column>
<el-table-column width="180" prop="username" label="用户名"></el-table-column>
<el-table-column width="200" prop="comment" label="备注"></el-table-column>
<el-table-column width="180" prop="createTime" label="更新时间">

表格是这样的

我们修改代码

html 复制代码
<el-table-column width="80" prop="id" label="ID"></el-table-column>
<el-table-column width="250" prop="dictKey" label="字典Key"></el-table-column>
<el-table-column width="150" prop="dictValue" label="字典值" :show-overflow-tooltip="true"></el-table-column>
<el-table-column width="200" prop="label" label="标签"></el-table-column>
<el-table-column width="180" prop="username" label="用户名"></el-table-column>
<el-table-column width="200" prop="comment" label="备注"></el-table-column>
<el-table-column width="180" prop="createTime" label="更新时间">

修改后的效果是这样的

相关推荐
明仔的阳光午后1 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
sorryhc2 小时前
Webpack中的插件流程是怎么实现的?
前端·webpack·架构
残冬醉离殇2 小时前
原来dom树就是AST!!!
前端
~无忧花开~2 小时前
掌握Axios:前端HTTP请求全攻略
开发语言·前端·学习·js
橙某人2 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
小Pawn爷2 小时前
构建Django的Web镜像
前端·python·docker·django
Sailing3 小时前
🚀🚀 从前端到AI Agent开发者,只差这一篇入门指南
前端·后端·ai编程
草帽lufei3 小时前
轻松上手WSL安装与使用
linux·前端·操作系统
TimelessHaze3 小时前
🚀 一文吃透 React 性能优化三剑客:useCallback、useMemo 与 React.memo
前端·javascript·react.js
长存祈月心3 小时前
Rust 迭代器适配器
java·服务器·前端