Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Element-plus中的table表格内容过多时的处理方法

Element-plus中的table表格内容过多时的处理方法

作者头像
用户9914333
发布于 2024-01-23 12:59:12
发布于 2024-01-23 12:59:12
1.3K01
代码可运行
举报
文章被收录于专栏:bug收集bug收集
运行总次数:1
代码可运行

bug收集:专门解决与收集bug的网站

问题:

使用el-table显示数据时,有一个字段的数据太长,使表格样式很乱,然后,给列加了个固定宽度,之后行的高度又变得很高,也不好看。

目标效果:

对字符比较长的字段只显示部分,鼠标放上去再进行显示全部内容

解决方案:

在准备自己写字符串截取时,突然看到了一篇文章,发现el-table有一个属性,可以实现这个功能。

el-talbe中有一个show-overflow-tooltip 属性,作用是当内容过长被隐藏时显示 tooltip.

代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<el-table-column prop="couStaInfContent"
 label="内容"
 show-overflow-tooltip/>

对应的样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style lang="scss">
/* 全局样式表 */
/* elementui中table超出隐藏提示框宽度 */
.el-tooltip__popper {
  max-width: 200px;
}
</style>

注:如果是vite 项目样式不一样,参考下面代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style lang="scss" scoped>

:deep() {
  .el-popper {
    max-width: 200px !important;
  }
}
</style>

最终效果:

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-01-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 bug收集 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
el-table 多表格弹窗嵌套数据显示异常错乱问题
使用vue+element开发报表功能时,需要列表上某列的超链接按钮弹窗展示,在弹窗的el-table列表某列中再次使用超链接按钮点开弹窗,以此类推多表格弹窗嵌套,本文以弹窗两次为例 最终效果如下示例页面
GoodTime
2024/03/05
3470
el-table 多表格弹窗嵌套数据显示异常错乱问题
ElementUI table表格列动态渲染
一般写table时,列都是固定。现有业务需求,列是不固定的。根据api返回的数据,进行动态渲染。
py3study
2021/04/28
7.4K0
ElementUI table表格列动态渲染
【element-ui】table表格底部合计自定义配置
【element-ui】table表格底部合计自定义配置,最近做管理系统用到饿了么UI,用到了table表格合计需求,常用的table底部,有时候不是所有内容都需要合计,比如上图这个编号是数字,但是不需要合计计算处理的,这时候就需要用到自定义表格,把不需要合计的内容隐藏掉,效果如下:
痴心阿文
2022/11/21
2.8K0
【element-ui】table表格底部合计自定义配置
element el-table固定列凹陷问题
列表显示字段过多,最后一栏操作列加固定显示,横向添加滚动条,在自测浏览器开发者模式时,发现固定列的最后一行出现了凹陷现象,网上查阅资料大多为在更新生命周期或者页面更新操作时重载页面,这些方法对本文出现的现象没有实际效果,最后的解决办法为直接设置横向滚动条,将列表的高度撑高以此解决问题。
GoodTime
2024/03/05
2590
element el-table固定列凹陷问题
vue-next-admin管理系统添加页面
酒楼
2023/06/13
1.9K0
vue-next-admin管理系统添加页面
Element Table 业务封装与思考
新项目 Elemnet UI 组件业务封装,封装需求满足后期不修改业务代码,直接更新前端的封装组件的UI库代码即可实现无缝切换UI库的需求。目前新项目的功能产品还在梳理,项目第一期还未开始,前端技术小组先行进行的组件封装。
草帽lufei
2022/07/29
5610
Element Table 业务封装与思考
Element-ui中Table表中el-table-column列数据的布尔值回填
    前端使用vue+element-ui,我们经常会使用table来展示从后台请求回来的数据,但是,如果被请求回来数据是Boolean类型的时候,在table的列上,就不能像普通的字符串数据一样,被展示出来,这个时候,我们需要做的就是对布尔值数据进行格式的转化。
跟着阿笨一起玩NET
2020/07/01
5.7K0
基于Vue实现跨表格(单选、多选表格项,单表格限制)相互拖拽
今天,我们将使用Vue.js来实现一个跨表格相互拖拽。在开发这个业务之前呢,也调研了网上很多解决方案,但个人感觉不太符合现在做的这个需求。所以,压根就自己再开发一套,方便以后维护。
Vam的金豆之路
2021/12/01
3.9K0
基于Vue实现跨表格(单选、多选表格项,单表格限制)相互拖拽
前端系列21集-vue3,轨迹展示
以下是一个完整的Vue 3示例,使用Element UI的el-table组件和el-table-column组件来展示订单号数据,并在内容溢出时显示tooltip:
达达前端
2023/10/08
3110
vue的table表格_vue elementui表格
新入职的公司让我学习下Vue,以前没怎么学过,最近开始学习,记录下每天学习的内容,借鉴了很多前辈们的资料,如有冒犯,还请原谅。 开始我做的是动态表格,但是发现不会调整宽度,于是就改成了下面的样子,用着更舒服一些。先记录下来,免的以后想用找不到。 先看下效果图。
全栈程序员站长
2022/11/08
9950
vue的table表格_vue elementui表格
测试开发进阶(十七)
当 isNotFlag是 false的时候不显示,当 isNotFlag是 true的时候显示
zx钟
2019/09/17
3960
测试开发进阶(十七)
vue中控制element表格列的显示与隐藏
就是拿到选项框里面的值,再根据里面的值来判断哪些column显示和隐藏;关于显示和隐藏可以设置变量;
程序媛夏天
2024/01/18
1.4K0
vue中控制element表格列的显示与隐藏
vue2+element环境搭建实现table编辑效果
今天要简单说说vue加element项目的一个开发 本次用的技术栈是vue2+element2
爱学习的前端歌谣
2023/11/16
3680
vue2+element环境搭建实现table编辑效果
Element UI 的表格部分内容显示对象格式
判断数据是否是对象类型,如果是增加pre元素与code元素并替换引号,判断的方法写在methods里面,根据函数返回的true或者false 来确定如何显示
tianyawhl
2019/12/12
3.9K0
Element UI 的表格部分内容显示对象格式
Vue + Element UI 实现权限管理系统 前端篇(十四):菜单功能实现
菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作。 提供一个菜单查询接口,查询整颗菜单树形结构。 http/modules/menu.js 添加 findMenuTree 接口。 import axios from '../axios' /* * 菜单管理模块 */ // 保存 export const save = (data) => { return axios({ url: '/menu/save', method: 'post'
朝雨忆轻尘
2019/06/18
2K0
这个Element table 上下移需求不简单
Element table 上下移动,听起来是不是很简单的需求,产品的描述也简单:表格数据支持拖动上下移,支持通过选择表格行数据点击按钮上下移。最终效果大概如下(模拟数据共7条,去除了关联的业务操作)
草帽lufei
2022/09/16
1.6K0
这个Element table 上下移需求不简单
使用element-ui中table expand展开行控制显示隐藏(手风琴效果)
问题讲解: 在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一些方法乍一看让人摸不着头脑,有些table的常用功能示例代码提供的不是非常详细,所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。 先展示一下ElementUI官方提供的示例代码效果图
TimothyJia
2019/11/12
10.2K1
使用element-ui中table expand展开行控制显示隐藏(手风琴效果)
(vue+element-ui)动态设置tabel列的显示与隐藏
1、v-show(不生效):v-show直接绑定,得到的结果很意外,哈哈,不起作用,饿了么对v-show不感冒;
stys35
2020/07/14
10.7K4
表格中添加渐变色带,表格中添加多色色带,el-table中添加渐变色带,elementUI表格添加色带
  performance为渐变色带,能大幅提升可视化效果,优雅美观,同时也可以自定义程度,比如60以下就需要警告或者表示危险,就可以用红色渐变绿色,将渐变点设置在60%的位置,这样渐变色带在美观的同时本身也能带有更多的信息。
watermelo37
2025/01/22
1740
表格中添加渐变色带,表格中添加多色色带,el-table中添加渐变色带,elementUI表格添加色带
Element-Plus仅把获取到的数据中的二级数组渲染到表格
获取到一个数据中,嵌套着二级数据,此时,比如获取到分类(商品),此时仅需要渲染商品,而不需要分类,且他俩有部分共同的属性,没学多少,不知道有什么更高效的方法,所以我遍历了。
岳泽以
2022/11/11
1.3K0
Element-Plus仅把获取到的数据中的二级数组渲染到表格
推荐阅读
相关推荐
el-table 多表格弹窗嵌套数据显示异常错乱问题
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验