element ui table 表头错位问题解决

最新推荐文章于 2024-07-14 22:18:32 发布
最新推荐文章于 2024-07-14 22:18:32 发布
阅读量373 收藏 1
点赞数
文章标签： java html android 数据库 人工智能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flowerStream/article/details/117506347
版权

背景:

　　在1920*1080分辨率的屏幕上开发的代码,在使用1366*768的屏幕上去看的时候,因为表格的横向展示不下,所以出现了滚动条,但是滚动到最后的时候,最后一列的表头会错位

解决方案:

在table上添加ref属性

 然后在下面的watch生命周期中检测就可以了

 调用table的doLayout方法就可以

作者：彼岸舞

时间：2020\10\29

内容关于：工作中用到的小技术

本文属于作者原创,未经允许,禁止转发

十六夜之彼岸舞
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
layui-table多级表头-数据和表头错位问题
weixin_44015885的博客
05-09 1791
如果colspan=1的时候会导致错位 /** * 初始化表格的列 */ ServCustmanagerKp.initColumn = function () { return [[ {type: 'checkbox',fixed: 'left',rowspan:'3'}, {type: 'numbers',title: '序号',fixed: 'left',rowspan:'3'}, {f
elementUI的table表格表头错位问题解决
ZSQ_ANDROID的专栏
08-09 757
ref="myTable" this.$refs.configurationTable.$el.children[1].style.width = '99.5%' 设置的是表格表头的宽度，因为下边表格宽度100%展示数据，还包含了一个滚动条的宽度，所以设置表头的宽度要比下边的宽度略短一点就好了，查出一个滚动条的宽度就好了。 ...
iview 表格fixed: ‘right‘，定位错行解决
shikaixina的博客
04-15 1744
弃用fixed方法，手动实现。 配置文件： { title: '操作', slot: 'operate', width: 100, //fixed: 'right', className: 'tableSlotRight' } css： // 解决iview右定位错行问题 /deep/.ivu-table { position: relative; .tableSlotRight { position: sticky; right: 0; .ivu-table-cell {
ElementUI的table表格表头错位问题解决
qq_52337177的博客
11-25 1899
ElementUI的table表格表头错位问题解决
el-table表头与内容错位
一只程序喵
10-23 1113
问题图解： 亲测都有效 解决方法一： 在app.vue或index.html中添加如下css body .el-table th.gutter{ display: table-cell!important; } 解决方法二： 在el-table加载数据时 this.$nextTick(() => { this.$refs.mainTable.doLayout(); }); ...
element-ui表格列排序错乱问题解决方案
字母哥博客
02-11 3393
因为element-ui的排序默认是按照字母顺序排序的，首字母9和首字母8相比，倒序排序首先是9。首字母优先排序，不会考虑到后面小数点的问题。如果我们希望按照数字的大小排序，需要我们自定义。
element-ui中 table 刷新问题
热门推荐
Ninewu的博客
06-30 1万+
今天给table 赋值发现没有变化，后来才发现是表格没有刷新的问题 给table 加 :key="Math.random()"就会刷新啦 嘻嘻????
element ui table组件使用源码
03-04
重要，重要！！！！！此源码需要正确引入相关脚本后才能正确执行。本想免费，但最少的选项是2分。请谨慎下载！！！！
使用 Element UI Table 的 slot-scope方法
10-16
在 Element UI 中，Table 组件是一个常用的展示数据的组件，它提供了许多自定义功能，其中包括 `slot-scope` 方法。`slot-scope` 在 Vue.js 2.x 版本中用于将子组件的数据传递给父组件，但在 Vue.js 3.x 中已被 `v-...
element ui table（表格）实现点击一行展开功能
10-17
在Element UI中，`el-table` 是一个强大的表格组件，它可以方便地进行数据展示和交互。在本例中，我们要实现的功能是点击表格的一行展开显示更多详细信息。以下是如何利用Element UI的`el-table`组件实现这个功能的...
element-ui 中的table的列隐藏问题解决
12-12
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的。之前用bootstrap做的表格，想要实现简短列和详细列的切换。因为详细列实在有太多列了，拉动滚动条还有一段距离。所以希望能够切换到简短列...
element ui table 增加筛选的方法示例
10-17
主要介绍了element ui table 增加筛选的方法示例，详细的介绍了如何添加规则内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
解决element中el-table中表头和内容错位的方法
weixin_44594219的博客
04-07 7595
解决在部分不兼容的浏览器中出现el-table的表头和内容错位，没有对齐的两种有效方法。
ElementUI el-table 表头错位的解决方案
WangYan的博客
01-22 8555
当el-table固定表头且出现滚动条时，会出现表头错位。 先上CSS： .el-table { th.gutter, colgroup.gutter { width: 5px !important;//此处的宽度值，对应你自定义滚动条的宽度即可 } } // 关键css代码 .el-table__header colgroup col[name="gutter"] { display: table-cell !important; } 当el-table
element-ui Table 表格自定义滚动条和fixed时表格错位的解决方案
zyynb的博客
02-22 2443
element-ui Table 表格自定义滚动条和fixed时表格错位的解决方案
elementui的el-table因滚动条表格错位问题
weixin_51010848的博客
08-12 3939
min-width table-layout
el-table表头表体错位情况，解决办法Css样式修改
L858674320的博客
10-13 346
解决elementUI el-table表头表体错位问题
解决elementUI table表格错位问题
hjg的专栏
09-02 4972
原因：因为存在滚动条时，固定列的底下没有留出高度，导致滚动条不显示。加上一个padding-bottom即可。在使用elementui的表格时，当存在固定列、横向和竖向滚动条时，滚动到最后一条会出现表格错位的问题。全局加上以下样式即可。
《JavaSE》---6.＜基础语法（Java三大程序控制结构）＞
最新发布
m0_73456341的博客
07-14 831
本篇博客主要讲解Java基础语法中的三大结构，一种顺序结构、两大分支结构i（if-else、swich-case）、四大循环结构（while、do while、fot、foreach）
element ui table表头自定义
10-16
可以使用 Element UI 的 Table 组件的 slot-scope 属性来自定义表头。具体步骤如下： 1. 在 el-table-column 标签中添加 slot-scope="scope" 属性。 2. 在 el-table-column 标签内部添加需要自定义的表头内容，可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值