解决 iview Table fixed: left 错位 ( 特殊情况下 )

最新推荐文章于 2023-12-09 21:14:00 发布
最新推荐文章于 2023-12-09 21:14:00 发布
阅读量644 收藏
点赞数 2
文章标签： view design
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44019706/article/details/133270089
版权

正常不会错位，对于本项目特殊情况会错位：Table是封装的组件，在传参columns的配置时，参数是：computed生成的，然后就错位了。（已经测试过： 如果在data中直接写，就不会错位，这里因为特殊原因，必须写在computed中）
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

解决：写死高度了

.wrapper /deep/ table {
  height: 42px;
}

以下设置之后
在这里插入图片描述

不吃香菜吃葱
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
layui解决复杂表头使用fixed:'left'而高度不一致问题
qq_42467167的博客
03-17 4640
用fiexed:left会错位，需要在done里添上（解决fixed固定，而导致的th高度不一致）： , done: function (res, curr, count) { // console.log(res) //解决操作栏因为内容过多换行问题 $(".layui-table-main tr").each(funct...
iview table组件当固定高度后，fixed某一列会出现盖住滚动条的情况
qq_31344145的博客
08-05 651
vue2中先看表格是否出现滚动条，用外部宽度减去表格里内容宽度，如果出现横向滚动条在进行将.ivu-table-fixed-body高度减去滚动条高度就好了。虽然iview版本更新说解决了，但是在实际操作中这个问题还是存在的，或者低版本项目变更中可能也会存在使用场景。
VUE Table表格动态列，数据错位问题
qq_37529302的博客
08-22 1191
2.发生原因：因为使用了elementui，表格通过循环产生，vue在dom重新渲染时存在一个性能优化机制，重复的dom会被复用。3.解决方法：设置key确保是唯一的，在el-table-column中添加 :key="Math.random()"1.首先，检查了前端用于接数据的字段是否与后端传过来的字段相同，在确定传参没有出现问题之后，这个问题仍然存在。
iview 表格fixed: ‘right‘，定位错行解决
shikaixina的博客
04-15 1758
弃用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 {
vue fixed 左右移动问题
Lyran的博客
09-19 2175
问题：使用fixed后在小屏时无法使用左右滚动条滚动，导致一部分页面看不到。 解决：原理是利用监听滚动事件然后利用left来控制。 <template> <div class="fixed" :style="`left:-${scrollLeft}px`"></div> </template> <script> export def...
【解决】Vue elementUI table表格 列错位/滑动后切换每页显示数后错位/表格使用fixed后错位...
最新发布
SummerGao
12-09 3337
table表格右侧列固定后，在切换页面之后，就会出现列错误的现象 <el-tab...
iview 数据表格 固定列拉倒底部后刷新出现错行问题
qq_40295815的博客
02-25 1155
很多小伙伴肯定遇到过这个组件问题，下面只需要一行即可搞定 vue方法 首先我们在mixin.js里封装一个方法 pageSizeChange(pageSize) { // 每页显示数量变更 this.searchParams.limit = pageSize // this.searchParams.showCount = pageSize this.i...
自定义指令解决elementUI中table组件的column设置fixed属性后，滚动时表格无法对齐的问题
beretHat_5的博客
03-25 2072
问题： el-table组件中，column在设置了fixed属性的情况下下，垂直滚动会出现表格错位的问题。分析： column在设置了fixed=“left”或fixed=“right”后，在table的对应位置增加了对应个数的column，它们都被设置为position: fixed。下面的table只是被固定的column遮盖，当垂直方向有滚动事件时，两侧固定column会动态计算滚动高度。但是实际使用中计算的时候会受头部样式或padding的影响而计算出错，导致出现表格错位的问题。
Vue table组件动态设置高度，列设置fixed导致的错行问题，滚动条利用鼠标横向滚动
qq_43657722的博客
01-30 2878
Vue table组件动态设置高度，列设置fixed导致的错行问题，滚动条利用鼠标横向滚动
解决iview table组件里的 固定列 表格不自适应的问题
01-18
当在使用iview Table组件里固定列功能时 出现表格不自适应宽度问题 具体如下 解决这个bug 很简单 把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'left', ...
完美解决iview 的select下拉框选项错位的问题
08-27
完美解决iview 的select下拉框选项错位的问题 在使用iview的过程中，我们可能会遇到select下拉框选项错位的问题，当弹出框超过一屏需要滚动时，select的下拉选项会出现错位。这种问题的出现可能是由于iview组件的...
解决iView Table组件宽度只变大不变小的问题
01-18
打开开发者工具其实你可以发现iView给table标签的宽度加上了一个明确的宽度值，而且在父元素变小的时候这个值并没有相应地变小，所以才会导致的iView Table组件只会变大不会变小。 那么我们就可以根据这个原因才决定...
Iview Table组件中各种组件扩展的使用
12-09
一、Iview Table 组件 多选框选中和禁选设置 Table添加多选框 通过给 columns 数据设置一项，指定 type: ‘selection’ ，即可自动开启多选功能。 正确使用好以下事件，可以达到需要的效果： @on-select ，选中...
iview table高度动态设置方法
08-27
这篇文章将为大家分享一个 iview Table 高度动态设置方法，以解决这个问题。 一、问题描述 在使用 iView Table 组件时，设置固定高度可能会导致在不同分辨率的屏幕上显示不完全。例如，在高分辨率的屏幕上，表格...
Ant Design Vue表格组件添加fixed:left属性之后标题的底色消失问题解决
m0_52449484的博客
10-08 262
解决Ant design vue Table组件添加列固定属性fixed:left之后标题的底色消失的问题
VUE表格显示错位的两种解决思路
m0_58874148的博客
03-14 2544
两种思路解决vue表格显示错乱问题
解决layui table使用fixed之后，表格与fix列错位
xtho62的博客
12-15 3889
Layui fixed:‘left’ 或者’right’对不齐 应该怎么办？这个问题和出现纵向滚动轮有关系，没有的时候都是没有问题的，因为渲染的时候出现了固定列和表格的层级关系问题。 错位展示： 在不改源码的前提下修复这个问题： 即在table渲染的done函数调用处理函数：代码如下 , done: function () { $(".layui-table-main tr").each(function (index, val) { $(".layui-table-fixed").ea
antd 表格用fixed：“left”在typescript中报错
weixin_44874595的博客
02-04 2574
最近在用antd的做一个固定列的表格，会用到fixed：“left”，但是却提示以下错误： 不能将类型“({ title: string; dataIndex: string; key: string; sorter: boolean; width: number; fixed: string; render?: undefined; filters?: undefined; filterMult...
iview table固定列错位
08-29
iview table固定列错位的情况通常是由于table包含的数据和被固定的列数不匹配导致的。 首先，我们需要确保table的列数和被固定的列数是一致的。如果table有5列数据，而我们设置了固定前两列，那么需要确保固定列数设置为2。 其次，需要查看table数据中是否存在空白的列。因为固定列需要占据固定的位置，如果数据中存在空白列，那么固定列可能会错位。因此，可以考虑检查数据中是否有不必要的空白列，或者在渲染table之前先对数据进行处理，确保不存在空白列。 另外，还需要检查table的宽度是否足够容纳所有的列和固定列。如果table宽度不够，那么固定列可能会因为宽度不足而错位。可以考虑调整table的宽度，或者减少显示的列数，以确保固定列的正常显示。 最后，可以尝试更新iview的版本或者重新安装iview组件，以确保使用的是最新的稳定版本。有时，固定列错位的问题可能是由于组件本身的bug导致的，更新版本可能可以解决这个问题。 总结一下，iview table固定列错位的问题通常可以通过确保table的列数和固定列数一致、检查数据中是否存在空白列、调整table的宽度以及更新iview组件的版本来解决。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值