关于ElementUI中table组件的column过多出现header与body错位的问题

最新推荐文章于 2024-08-19 15:59:45 发布
最新推荐文章于 2024-08-19 15:59:45 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： ElementUI 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m943917709/article/details/108274106
版权
在使用ElementUI的table组件时，当动态渲染的column过多并出现滚动条，分辨率高于125%时，header与body会错位。查阅文档和GitHub issue未找到直接解决方案。通过问题定位，发现在公共CSS中添加特定样式可解决此问题，实现了虽暴力但有效的修复。
摘要由CSDN通过智能技术生成

在使用elementUI的table组件时，很赞赏组件的丰富性，充分考虑到了使用者的各种稀奇古怪的需求，但是也会遇到一些不尽人意的小bug

今天我就遇到了在动态渲染column的时候，由于column过多，出现了滚动条，此时滚动越往后header与body就会出现不同程度的错位，而且只有在分辨率>125%的时候出现,调为100%的话就没事了，其他比例的分辨率也会不同几率的出现这个问题

首先看文档有没有解决方案

看描述的话应该能解决这个问题吧，虽然不是由隐藏切换的，但是动态添加应该也算吧，试一下...没用

好吧，那第二步：github的issue

1.7k这么多。。。通过关键字搜索，找了半天发现一个和我问题一摸一样的了：https://github.com/ElemeFE/element/issues/16843

首先看到了管理员的回复

最低0.47元/天 解锁文章
zmheang
关注
专栏目录
ElementUI-Table-column_render-header:ElementUI中Table-column的render-header运用和Table的整列拖动
05-09
下面就关于Table-column中render-header的运用，稍作说明,具体请移步此项目文件中查看。 参数 说明 类型 可选值 默认值 render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index }) — —...
el-table表格中el-table-column列多导致页面显示不完全
weixin_44882744的博客
01-10 1892
【代码】el-table表格中el-table-column列多导致页面显示不完全。
antdv当表格内容较多不能一次性完全展示时
qq_45149139的博客
09-13 848
当后端接口没有返回key，前端自己通过下标push一个key
elment-ui中设置el-table时表头空出来了一列
qq_58148320的博客
08-19 306
有滚动条时显示正常，打开开发者工具排错，无滚动条时多出一个class为gutter的列。原因是因为我将表格的每一列都设定了固定的宽度。其实这里是滚动条预留的列。②把操作列的宽度删除，表格将会依据长短的变化将剩余列填满。：①把class是el-table__body 的宽度设置成100%就可以了。
Element 表格某一列内容过多，超出省略号显示
MW
05-08 962
使用element组件库里面的Table 表格，遇到某一个字段内容过多，导致td高度被撑开，布局显得很不美观 比如： 只要给table-cloumn添加一个属性show-overflow-tooltip就可以了 <el-table-column prop="Content" label="内容" width="180"
iview组件的Table表格的内容过多时，显示title提示
lianwenxiu的博客
05-28 2754
在iview的Table表格中，如果数据超出当前列的宽度，多余的部分会折行显示，使得该行的高度增加。为了实现* 文本将不换行，超出部分显示为省略号 的效果，iview提供了表头属性ellipsis。然而这个属性却有一个弊端，就是显示为省略号的部分对用户来说是不可见的，非常影响体验，而且在iview文档中，作者并未给出任何解决办法。 最简单的解决办法是给相关数据增加title属性，使得鼠标移入时...
【el-table】插槽使用：循环头部header和内容content写法
jieweiwujie的博客
05-20 1291
表格的高级进阶写法
解决vue elementUI中table里数字、字母、中文混合排序问题
10-15
在使用Vue.js框架结合Element UI库开发web应用程序时，我们经常会遇到需要对表格（Table）中的数据进行排序的需求。尤其当表格的数据列中包含数字、字母和中文字符混合时，Element UI默认的排序方式可能无法满足特定...
VUE + elementui-table组件 在table-cell单元格中绘制微型echarts图
01-08
在本文的场景中，我们将会通过结合上述三个技术点，来解决一个特定的问题：在Vue项目中使用Element UI的表格组件，并在其单元格中绘制ECharts图表。具体来说，是要在表格的单元格（table-cell）中展示“日均销量”和...
elementUI中Table表格问题的解决方法
12-12
在开发vue框架项目时，引入element插件，使用table表格组件时，遇到了一些问题，以下列出以供参考。 1.表格样式问题： 混乱样式.png 正常样式.png 如上图，在当前导航表格table样式是没问题的，但当我点击别的...
一文掌握elementUI构建复杂表格，合并行或列，多级表头等
风中追风
01-02 7479
前端开发过程中常常会遇到各种开发表格的场景，有时候有的表格比较简单有的比较复杂（如下图简单示例所示，有合并项和多级表头），Elementui的el-table控件也可以支持构建复杂的表格，本文将指导你如何快速开发复杂表格~~~
Element-UI实现复杂table表格结构
热门推荐
觉醒法师的专栏
03-09 1万+
Element-UI组件el-table用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。这里将使用到以下两项，来完成今天demo演示：1. 多级表头：数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。2. 合并行或列：多行或多列共用一个数据时，可以合并行或列。
elementui 有header,怎么让aside铺满全屏
weixin_35756637的博客
12-20 164
你可以使用 element-ui 的 aside 组件来实现你的需求。首先，你需要在 HTML 文件中引入 aside 组件： <template> <el-aside class="full-screen"> <!-- 你的 aside 内容 --> </el-aside> </template> ...
el-table-column数据列错位
Haines
09-16 1131
el-table-column数据列错位，element表格错位
解决ElementUI中的table表格内容过多，导致行内撑开的问题。
qq_43474235的博客
08-01 7212
解决ElementUI中的table表格内容过多，导致行内撑开的问题。
element-ui table列表表头过长解决方法（自定义表头，修改列标题样式，使用tooltip）
qq_38110572的博客
07-30 5281
再2.4.11之前修改列标题样式、添加tooltip，需要render-header。2.4.11及以后，element-ui官方已经更新了，并添加了自定义表头的方法，通过设置 Scoped slot 来自定义表头。 参考element-文档 用法很简单，在表头添加一个tooltip作为示范，在名字的后面加个tooltip提示信息 在表头添加一个tooltip，在名字的后面加个tooltip提示信息 ...
element的el-table表格自定义表头解决数据不更新问题
Vivien_CC的博客
04-11 1300
element 官网上el-table上使用插槽 slot=“header”来实现自定义表头，在需要动态更新表头数据时，出现无法实时更新的情况，只需要将slot=“header” 改成#header ，效果就正常了。通过插槽传入表头，但是，如果我把表头初始值赋值为null，虽然可以正常显示表头，但是一开始会报错；如果我把表头初始值给列出来设计好的字段=""，那么获取到后端返回的数据后，表头并不会自动更新！需要生成一个表格，表头由后端返回，自定义生成。
vue-elementui表格组件动态多级表头
黄哈哈的博客
07-29 1828
我的数据结构，需要循环sign_time，确定日期表头，然后拿着日期去data中取上下午的值。需求日期多级表头，日期不固定随着后端接口返回的数据变化。每个日期的上午下午是固定的。一开始想着循环一下就行，但是有问题有多少条数据就会循环多少个表头，日期重复。在接口返回值时赋值tableData、tableConfig注意prop。然后再需要表格组件的地方引用整表组件分别传值表数据和表头数据。建立一个表头组件，再建一个整表组件(包含表头)，然后进行传值引用。...
datatables在tab切换时出现表头错位问题
peppa_pig的博客
06-06 712
解决办法： 在tab切换时，加上如下一段代码就可以了。 $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust(); 比如
elementUI中table组件如何刷新数据
最新发布
09-26
在Element UI的Table组件中，刷新数据通常有两种常见的方式： 1. **手动触发更新**：当你从后端获取到新的数据后，可以遍历这个新数据并设置`tableData`属性。例如： ```javascript this.tableData = newData; ``` 2. **使用`@emit`事件**：如果你的数据是通过某个事件源（比如`axios`请求）动态获取的，你可以监听这个事件，然后更新表格数据。假设有一个名为`getData`的方法用于获取新数据： ```javascript // 定义一个方法接收新数据 getData(newData) { this.$refs.myTable.emit('update:tableData', newData); } // 触发事件时，将新数据传递进去 this.getData(yourNewData); ``` 这里`update:tableData`是一个自定义的事件名，在Vue组件模板上需要绑定这个事件，并处理数据的更新。 记得在HTML模板中绑定`data-loading`属性来显示加载状态，以及给table添加`ref`属性以便引用它。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值