vue 解决固定列(fixed)后表格错位问题

最新推荐文章于 2024-03-18 12:21:26 发布
最新推荐文章于 2024-03-18 12:21:26 发布
阅读量4.7k 收藏 5
点赞数 4
分类专栏： Vue 文章标签： vue.js css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/d1332508051/article/details/122493691
版权

1、表格最后一列(操作列)使用fixed属性固定后，导致表格发生错位现象
错位图
2、使用doLayout()刷新
在这里插入图片描述

//加ref属性
<el-table :data="table" ref="table" >

//强制渲染，解决操作栏固定后出现错位的情况
this.$nextTick(() => { 
   this.$refs.table.doLayout()
 })
Tigers996
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue解决el-table表格中表头与内容错位问题
qq_59224836的博客
07-07 1711
解决当el-table里的内容比较多的时候以及el-table表格列固定左右滑动导致的表头与内容错位问题，直接在请求数据后执行表格自带属性doLayout方法重新加载table即可完美解决。
VUE Table表格动态列，数据错位问题
qq_37529302的博客
08-22 1028
2.发生原因：因为使用了elementui，表格通过循环产生，vue在dom重新渲染时存在一个性能优化机制，重复的dom会被复用。3.解决方法：设置key确保是唯一的，在el-table-column中添加 :key="Math.random()"1.首先，检查了前端用于接数据的字段是否与后端传过来的字段相同，在确定传参没有出现问题之后，这个问题仍然存在。
前端那些事20240201-前端那些事-avue2 表格列配置项-冻结列
最新发布
qq_41632427的博客
03-18 323
【代码】前端那些事20240201-前端那些事-avue2 表格列配置项-冻结列。
vue大数据表格卡顿问题的完美解决方案
01-19
前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象，本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑，chrome浏览器无卡顿现象，其它浏览器并未测试，如遇到卡顿请备注系统和浏览器，方便我后续优化，谢谢 先看一下效果,一共1000 X 100 = 10W个单元格基本感受不到卡顿，而且每个单元格点击可以编辑，支持固定头和固定列 项目源代码地址 Github (本地下载) 解决问题核心点：横向滚动加载，竖向滚动加载 项目背景 笔者最近在做广告排期功能，需要进行点位预占，大的合同可能需要对多个资源排期，周期可能到几年这样，然
解决vue 表格table列求和的问题
10-16
今天小编就为大家分享一篇解决vue 表格table列求和的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决iview table组件里的 固定列 表格不自适应的问题
01-18
当在使用iview Table组件里固定列功能时 出现表格不自适应宽度问题 具体如下 解决这个bug 很简单 把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'left', minWidth: 150 }, { title: '订阅名称', key: 'subscriptionName', minWidth:140 }, { title: '订阅ID', key: 'subscriptionId',
VUE表格显示错位的两种解决思路
m0_58874148的博客
03-14 2414
两种思路解决vue表格显示错乱问题
解决vue表格列错位问题
DN金猿的博客
11-19 3453
使用v-if切换tab选项卡的时候，子内容表格的列可能会出现错位问题，官方给出的解决办法是使用doLayout方法,在这里总结了两种方法：1.使用doLayout() <el-table :data="table" ref="table" > oLayout方法进行强制重新渲染 this.$nextTick(() => { this.$refs.table.doLayout() }) 2.给表格的每个列添加一个key值 <el-table-column ...
ant-design-vue table 表格组件错位解决
东扯葫芦西扯瓜——前端小菜鸟的博客
04-23 9938
ant-design-vue table 表格组件错位解决原因查找错位消失机制解决思路试验一试验二解决的背后 table组件错位问题。 table组件错位，不管是用element-ui的table组件，还是ant的table组件，只要使用了列的fixed属性，在第一次进入页面时就会出现。 原因查找 经检查dom发现使用fixed后，table组件实际由3个table组成，左边一个，中间一个，右边一个 。如果中间表格有某一列的内容有换行或者特殊内容等， ，这会导致表格实际高度比没有特殊内容要高。三个表格
avue-curd 不同列设置不同的对齐方式
金乌的博客
01-03 611
header-cell-class-name 表头单元格的className的回调方法，也可以使用字符串为所有表头单元格设置一个固定的className。属性来为 crud 中的某一行添加 class，表明该行处于某种状态,返回当前行的。可以通过指定 组件的。
element-ui avue table 在Safari下表格与表头错位的兼容问题
weixin_44999830的博客
07-22 1095
项目是avuet做的，在Safari下表格出现样式宽度错乱，这个问题这里用css样式解决: body .el-table th.gutter { display: table-cell !important; } body .el-table colgroup.gutter { display: table-cell !important; } table { width: 100% !important; } 因为表格宽度未设置100%，导致计算每列出现几px的精度差，最后导致整体样式错
vue表格实现固定表头首列
11-02
vue移动端项目 一个可以固定表头首列的表格 ，没有使用UI插件。 感兴趣的朋友可以参考下，希望对大家有所帮助
Vue多种方法实现表头和首列固定的示例代码
11-27
有时表格太大，滚动时信息查看不方便，需要对表格进行全局表头、首列固定， 上效果： 一、创建多个表格进行覆盖 思路：当页面滚动到临界值时，出现固定表头、首列 先创建一个活动表格 <!DOCTYPE html> &...
vue3(列表渲染)
weixin_48221105的博客
11-10 1629
学习vue3
在 vue-cli 项目中渲染表格使 thead 固定, tbody出现滚动条并优化
itBellah的博客
03-12 779
项目需求： 1\ 支持日期选择下的查询，并使用表格展示数据 2\ 当数据较多时，页面整体会因为高度超出，出现浏览器默认的滚动条，同时不好查看
vue(element):el-table-column使用v-if列位置错乱问题
每天就学一点点的博客
07-08 4193
在解决问题之前首先需要知道什么是v-if v-if: 动态的向DOM树内添加或者删除DOM元素,切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件 v-show不能作用于column组件，所以不能使用。 接下来就要聊聊这个问题了，开始我以为是：data里的数据有误，可通过工具查看后发现数据无误，那么应该就是v-if这个属性了，它不同于v-show,v-show等同于style=“display:none;”,v-if是直接销毁再重建元素，我想应该是因为我多次调用这个属性导致了
Vue中el-table追加行后固定列滚动错位问题
qq_39753413的博客
07-12 2752
Vue中el-table追加行后固定列滚动错位问题 偶然发现一个问题，但是并没有找到解决方案，自己调试了两个多小时终于解决。先贴出问题业务描述：在已查询完全部的符合条件的数据后，表格最下方提示“没有更多数据” 使用solt = “append” 追加div 这时候滑动到最底部，固定列错位了。......
解决avue表格错位问题
一方湖泊
12-10 3501
场景： 使用keepAlive缓存页面后，切换页面，列表页表格错位。 解决： 列表页加入以下代码即可解决。 注意：activated为使用keepAlive缓存后的钩子函数。 activated () { setTimeout(() => { this.$nextTick(() => { console.log('2htis', this) this.$refs.crud.doLayout() })
avue-curd table表格错位 多出来空白的一列
金乌的博客
09-21 2247
1. 页面样式存在 该代码时， 使得 avue 弹框内的 table 原本的 0px 的空白列被扩充，造成表格错位。解决方法一： 将上述代码 放到 表格的类 里面， 防止污染弹框内的table。1. 切换页面，列表表格错位（有时刚进入页面也会错位）方法三： 去掉表格每列的 width，使其自动填充。方法二：样式加入如下代码。
vue 怎么固定第一列的表格值
03-09
你可以使用 Vue 的表格组件，通过设置 fixed 属性来固定第一列的表格值。具体实现可以参考以下代码： <template> <div> <table> <thead> <tr> <th :style="{ width: columnWidths[] + 'px', position: 'sticky', left: }">第一列</th> <th :style="{ width: columnWidths[1] + 'px' }">第二列</th> <th :style="{ width: columnWidths[2] + 'px' }">第三列</th> </tr> </thead> <tbody> <tr v-for="(item, index) in tableData" :key="index"> <td>{{ item.column1 }}</td> <td>{{ item.column2 }}</td> <td>{{ item.column3 }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { tableData: [ { column1: '值1', column2: '值2', column3: '值3' }, { column1: '值4', column2: '值5', column3: '值6' }, { column1: '值7', column2: '值8', column3: '值9' } ], columnWidths: [100, 200, 300] } } } </script>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值