踩坑记录之element ui 表格fixed列与正常列不一致

转自掘金本人

问题如图

这个问题也是饿了么的老问题了，就不再赘述了。

解决方法一

 通过审查元素发现这个不正常的盒子上有个top:68px的样式

 正常情况下top应该为45px

所以我们可以用憨一点的方法直接给el-table__fixed-body-wrapper类写全局样式

.el-table__fixed-body-wrapper{
    top: 45px!important; //为超过行内样式权重使用important
}
复制代码

写完之后问题初步解决。

可是当页面收缩到1350px以下时候会产生另一问题

 如图 操作列被挤压抬高，此时样式已经写死我们不便再次更改样式

解决方法二

组件内beforeRouteEnter路由导航守卫,每次页面进入前会调用改函数.

查阅文档可知element ui表格有一个doLayout()方法可以对表格进行重新布局.

整理思路:我们可以在beforeRouteEnter中通过ref拿到页面DOM然后调用它的doLayout()方法对表格重新布局然后完美解决操作栏错位问题

---

但是使用时发现无法在beforeRouteEnter函数中拿到this,通过查阅官方文档可知原因及解决办法:

 于是我们可以写出如下代码

beforeRouteEnter(to, from, next) {
    next((vm) => [
      vm.$nextTick(() => {
        vm.$refs.ktable.$refs.table.doLayout()  //ktable是我对table的封装,通过它拿到下面的子元素ref,再调用el-table的doLayout()方法即可
      })
    ])
  },
复制代码

通过vm解决this问题再调用doLayout()动态布局从而解决问题