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

修改后的效果是这样的

相关推荐
Zyx20077 分钟前
React 中的 Props:组件通信与复用的核心机制
前端
海云前端112 分钟前
大模型Function Calling的函数如何调用的?
前端
ohyeah15 分钟前
防抖与节流:前端性能优化的两大利器
前端·javascript
Zyx200715 分钟前
React Hooks:函数组件的状态与副作用管理艺术
前端
让我上个超影吧32 分钟前
基于SpringBoot和Vue实现CAS单点登录
前端·vue.js·spring boot
军军君011 小时前
Three.js基础功能学习五:雾与渲染目标
开发语言·前端·javascript·学习·3d·前端框架·three
程序员爱钓鱼1 小时前
Node.js 编程实战:RESTful API 设计
前端·后端·node.js
程序员爱钓鱼1 小时前
Node.js 编程实战:GraphQL 简介与实战
前端·后端·node.js
罗技1231 小时前
Easysearch 集群监控实战(下):线程池、索引、查询、段合并性能指标详解
前端·javascript·算法
XiaoYu20021 小时前
第3章 Nest.js拦截器
前端·ai编程·nestjs