vue element 表格使用fixed固定列后切换菜单时错位问题

开发时由于列表数据项过多需要固定操作列，于是在操作列上加了fixed=“right”。
一开始没什么问题，但是在切换菜单时出现了错位现象

后来找到问题，由于vue element-admin 默认是启用路由缓存的，但是element的固定列是动态计算高度的，当你第一次进入页面时并没有问题因为element已经计算好了高度，但是由于切换菜单后缓存的问题第二次进入是没有计算的，这就导致了错位现象。
百度的话很多解决方式，大多都是让你获取数据时doLayout，但是我这个问题并没有获取数据。是由于keep-alive导致的。
所以再查了官方文档后得到的解决方案是，配合actived函数使用。
首先在表格上加上ref="table"属性
然后在activated中加入this.$refs.table.doLayout()

mounted: function() {.....},...activated() {this.$refs.table.doLayout()},....beforeDestroy: function() {},

vue element 表格使用fixed固定列后切换菜单时错位问题相关推荐

vue element表格某一列内容过多，超出省略号显示
vue element表格某一列内容过多,超出省略号显示 iview表格某一列内容过多,超出省略号显示
vue自定义表格（每一列表格下面包含一个子表格）
vue自定义表格(每一列表格下面包含一个子表格) 实现效果图 template <div class="marsTable" ref="marsTable" ...
vue element 表格错位
vue element 表格发生错位对不齐的问题在做vue element 表格的时候,页面展示上发现列表对不齐 <style scoped> /deep/ .el-table th.g ...
element 表格多级表头子列固定
element 中 table 固定列使用fixed 属性:但是多级表头时只能固定第一列: 设置对应子列表头的宽度和父系表头的宽度可以使对应的列固定: 不需要固定的列则不需要设置宽度,同时父级表头的宽 ...
使用antd表格固定列后行与行之间对不齐
在公司写项目时用了antd的表格固定列,发现固定的列与没有固定的列对不齐在css里加上这段,高度调整到跟未固定列一致即可. >>>.ant-table-thead tr{heigh ...
el-table中设置fixed固定列之后错位的奇葩原因
场景 ElementUI中el-table设置指定列固定不动,不受滚动条影响: ElementUI中el-table设置指定列固定不动,不受滚动条影响_BADAO_LIUMANG_QIZHI的博客-C ...
VUE+ELEMENT:表格渲染导致的异常:You may have an infinite update loop in a component render function
场景: 做一个全文检索,检索到的记录显示到el-table表中,这本是一个简单的问题.后面要对检索的Key在记录中做高亮显示,遇到了这个异常. 百度一下,很吓人.可能有无限更新循环,这怎么行,听着这得 ...
Element UI Table组件固定列底部有一条白线的解决方案
bug:在某一次项目中使用暗色系的固定列时发现有一条白线无法消除(之前项目都是亮色系所以没发现问题) 通过排查发现这条白线能够随着el-table__fixed-right元素移动但是却没有任何子元素 ...
elementplus中表格组件使用固定列时出现滚动条粘性布局固定表头
效果图如上, 因为项目经理希望竖向滚动条永远在最外面,所以通过粘性布局实现表头固定: 由于列数过多,固定多选框列和操作列时发现出现了滚动条,看官网上的例子也有,通过检查元素发现是固定列的阴影(使用伪元 ...

vue element 表格使用fixed固定列后切换菜单时错位问题

vue element 表格使用fixed固定列后切换菜单时错位问题相关推荐

最新文章

热门文章