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="更新时间">

修改后的效果是这样的

相关推荐
LYFlied38 分钟前
从 Vue 到 React,再到 React Native:资深前端开发者的平滑过渡指南
vue.js·react native·react.js
爱喝白开水a1 小时前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag
董世昌411 小时前
深度解析ES6 Set与Map:相同点、核心差异及实战选型
前端·javascript·es6
B站_计算机毕业设计之家1 小时前
豆瓣电影数据采集分析推荐系统 | Python Vue Flask框架 LSTM Echarts多技术融合开发 毕业设计源码 计算机
vue.js·python·机器学习·flask·echarts·lstm·推荐算法
吃杠碰小鸡2 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone2 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09012 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农3 小时前
Vue 2.3
前端·javascript·vue.js
夜郎king3 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
跳动的梦想家h4 小时前
环境配置 + AI 提效双管齐下
java·vue.js·spring