Element UI table 表格表头错位问题解决

最新推荐文章于 2024-05-16 10:07:37 发布
最新推荐文章于 2024-05-16 10:07:37 发布
阅读量470 收藏
点赞数
分类专栏： Element UI Web FrontEnd 文章标签： Ele table 表头错位 表头错位 ElementUI table
_格鲁特宝宝原创，转载请务必注明出处
本文链接：https://blog.csdn.net/GrootBaby/article/details/109113277
版权

Element UI table 表头错位

方法一 

在app.vue中添加

.el-table--border th.gutter:last-of-type {
    display: block!important;
    width: 17px!important;
}

方法二 

在el-table组件挂载一个ref="configurationTable"，然后在每次请求数据成功后动一动表格的默认宽度

this.$refs.configurationTable.$el.style.width = '99.99%'

 

 

 

 

 

 

https://www.jianshu.com/p/c18e6f911b2d 

 
_格鲁特宝宝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ELEMENTUI 之EL-TABLE 的一点小总结[表头内容错位[自定义BORDER问题][自定义列宽度]
qq_44242030的博客
05-25 1250
标签： vue HTML5 JavaScript html css 前端在开发PC 端项目时，现在用的比较多的就是Element UI,而在PC端管理系统中，Table 可以说是必不可少，刚开始使用对table没有做过多的处理，可是在需要做一些处理时，对其文档不熟悉使用不熟练总出现一些意想不到的问题。 表头和内容错位： 解决在全局中添加 样式可解决： .el-table th.gutter { display: table-cell !important; } 自定义table 边框及单元格边框
去掉el-table表头右侧类名是gutter，width=17px的空白区域（包括表头样式及表格奇偶行样式和表格自动滚动）
最新发布
qq_53857666的博客
05-30 598
去掉el-table表头右侧空白区域（包括表头样式及表格奇偶行样式和表格自动滚动）
el-table滚动条设置及设置滚动条后多出空白列修改
JunJiu0420的博客
05-16 269
空白列修改：给el-table-column设置适当的宽度，直到空白列消失。
elementUI中el-table表格的表头样式错位
keke11211的博客
08-20 973
版本：element-ui 2.12.0 问题描述： 使用elementUI的el-table表格组件时，表格高度定高，内容过多时右侧会出现滚动条，然后就会出现如下图所示的列错位的样式： 解决办法： 在网上也找了好多方法，试了好多改样式的方式，都没有什么用，没有达到效果，最后还是采用js的 doLayout 方法，在获取到数据后重绘表格，实现了想要的效果。代码很简单，如下： templete中给表格设置 ref 属性： <el-table :data="table" ref=
elementUI的table表格表头错位问题解决
热门推荐
NewDayStudy的博客
07-31 1万+
更新（2019/11/20）：据网友（nchencc）提供的方法，只需要在App.vue的style里添加以下样式即可！ .el-table--border th.gutter:last-of-type { display: block!important; width: 17px!important; } 如以上解决不了的再往下看↓ 一、出现问题： 在vue项目中引入e...
解决Element-ui的el-table出现的表格错位问题
卿本无忧的博客
05-19 1万+
在使用element-ui中的el-table时，我们经常会用到fiexd属性，而使用了fixed属性之后，就会容易在各种场景出现表格错位的问题。 查阅element-ui官网，发现官网提供了doLayout方法来解决这个问题 总结容易出现错位问题的几种场景及解决办法 1、数据更新后出现的错位问题 1.1 直接在数据赋值后执行doLayout方法 this.data = data; // 在数据更新后执行 this.$nextTick(() => { // myTable是
element ui table 表头错位问题解决
彼岸舞的博客
10-29 373
背景: 　　在1920*1080分辨率的屏幕上开发的代码,在使用1366*768的屏幕上去看的时候,因为表格的横向展示不下,所以出现了滚动条,但是滚动到最后的时候,最后一列的表头会错位 解决方案: 在table上添加ref属性 然后在下面的watch生命周期中检测就可以了 调用table的doLayout方法就可以 作者：彼岸舞 时间：2020\10\29 内容关于：工作中用到的小技术 ...
element ui table（表格）实现点击一行展开功能
10-17
在Element UI中，`el-table` 是一个强大的表格组件，它可以方便地进行数据展示和交互。在本例中，我们要实现的功能是点击表格的一行展开显示更多详细信息。以下是如何利用Element UI的`el-table`组件实现这个功能的...
解决ele ui 表格表头太长问题的实现
01-19
附上网址:https://element.eleme.cn/#/zh-CN/component/table 首先，我们要知道h是vue封装的一个方法。叫$createelement,大意是创建一个节点（猜的，，没办法英语一级都没考过.）,然后这方法返回一个column和index，...
elementUI中Table表格问题的解决方法
12-12
element ui是一个非常不错的vue的UI框架，element对table进行了封装，简化了vue对表格的渲染。 在开发vue框架项目时，引入element插件，使用table表格组件时，遇到了一些问题，以下列出以供参考。 1.表格样式问题：...
element-ui 中的table的列隐藏问题解决
12-12
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的。之前用bootstrap做的表格，想要实现简短列和详细列的切换。因为详细列实在有太多列了，拉动滚动条还有一段距离。所以希望能够切换到简短列...
Element-ui带边框的表格线无法对齐怎么办？
FYB Blog
11-07 764
问题：Element-ui带边框的表格线无法对齐 解决办法： 在根组件（App.vue）的 style 中加入： .el-table th.gutter { display: table-cell !important; } .el-table colgroup.gutter { display: table-cell !important; } 结果：
解决el-table中动态添加固定列时出现的行错位
weixin_45435545的博客
04-25 289
【代码】解决el-table中动态添加固定列时出现的行错位。
解决el-table表头错位
Ypromise-的博客
06-02 650
示例图：表头错误 错位原因 一般是由电脑显示的缩放引起 解决方案（两种） 在app.vue 或者 index.html 反正是根结构处，修改全局样式style 加入样式代码 .el-table th.gutter{ display: table-cell !important; } 加入样式代码 .el-table--border th.gutter:last-of-type { display: block!important; } 结果： ...
【已解决】解决 el-table滚动条超出表头/表格
bao
07-08 2450
el-table滚动条放到表格内部.
elementUI中el-table组件出现的表头和内容错位
s_wollow的博客
03-06 3662
浏览器缩放的时候会出现此问题。解决的方法是： 在app.vue中添加 <style> body.el-tableth.gutter{ display:table-cell!important; } </style> ...
el-table在有些电脑上显示问题（表头与表体不对齐gutter列导致得）
weixin_44817180的博客
08-05 5560
el-table在个别电脑上得表头与表体不对齐（是因为没有滚动条时表头得gutter列得width为17px引起得） 其中gutterHidden初始默认为false <el-table :class="{'gutter-th':gutterHidden}" :data="tableData" style="width:100%;" :default-sort = "{prop: 'startTime', order: 'ascending'}"
el-table的列过多出现header与body错位问题、缩放错位问题、滚动条列错位
weixin_34403976的博客
04-14 1480
踩坑时在网上找了一些相关的帖子,这2种实现方式最靠谱,快试试吧! 场景1 浏览器缩放 场景2 表格y过长轴加滚动条 向右滚动前正常 滚动到最后面错位 解决 方案1(我是用这个实现的,我的情况是场景1) 打开控制台会看到thead中的th有class为gutter的属性, 这个央视原本设置为display:none 需要把它改为table-cell .el-table th.gutter { display :table-cell !important } 方案2 这个调用了elment-ui.
vue中使用element-ui里的table中表头与表格出现错位问题
khadijiah的博客
11-14 8434
现象： 原因：电脑显示的缩放引起的，并且发现同为webkit内核的Google浏览器和360浏览器中360浏览器显示正常，而Google浏览器才会出现这个问题。 解决方案： 找到项目入口文件（敲黑板重点！！），添加全局样式： .el-table th.gutter{ display: table-cell!important; } 效果： 完美啦，看着顺眼多了吧～ ...
element ui tabler表格宽度
07-27
回答: Element UI的表格宽度问题可能有几个原因导致。首先，如果固定列的高度小于表格的高度，可能会导致最后一行被遮挡。可以通过设置全局样式来解决这个问题，例如设置固定列的高度为100%。\[1\]另外，如果表头与内容错位，可以尝试设置全局样式来解决，例如设置表格内容区域的overflow-y属性为overlay。\[3\]此外，还可以通过设置每列的宽度来调整表格的宽度，可以在el-table-column标签中设置label和prop属性来定义每列的名称和对应的数据字段。\[2\] #### 引用[.reference_title] - *1* *2* *3* [ElementUI 用法心得](https://blog.csdn.net/qq_39541389/article/details/118693098)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_格鲁特宝宝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值