vxetable 切换页面后表格行错位的解决方法

出现问题

在项目开发过程中，发现 vxetable 如果点击表格进入详情页面，再点击返回，此时表格行会出现错位的问题。如果在错位的表格进行一下滚动表格操作，显示又恢复正常。如果在页面上使用 keep-alive，对页面进行缓存，又使用了 vxetable 就有可能出现上面描述的问题。

解决方法及思路

step1. 首先是考虑如何解决错位的问题，既然是能够通过滚动条恢复错位的表格，那就从这里入手。对 vxe 文档进行查阅后，发现其是有相应的表格滚动条刷新方法的，但是由于项目使用的版本过低，只好自己手写一下。如果有和我碰到一样问题的小伙伴可以直接使用 vxe 自带的 api 。既然是缓存的页面才会出现问题，那就在 activated 的钩子里执行一下刷新滚动条的操作。

activated(){
    this.refreshScroll(this.$ref.vxeTable);
},
methods: {
  refreshScroll (vxetable) {
    const { lastScrollLeft, lastScrollTop } = vxetable;
    return vxetable.clearScroll().then(() => {
      if (lastScrollLeft || lastScrollTop) {
        // 重置最后滚动状态
        vxetable.lastScrollLeft = 0
        vxetable.lastScrollTop = 0
        // 还原滚动状态
        return vxetable.scrollTo(lastScrollLeft, lastScrollTop)
      }
    })
  },
}

step2.找到错位的解决方法之后，就要考虑如何能够在项目中全局解决，总不可能一个页面一个页面的去加 ref 和 activated 。最后想到了使用 vue 的混入 mixin 的方法，进行全局混入。新建一个 mixin.js，并在 main.js 引入

//minxin.js

import XEUtils from 'xe-utils'
//全局混入，解决vxe表格点击详情后返回的表格错位问题
export default{
    //解决vxe表格点击详情后返回的表格错位问题
    activated(){
        let $xetable = this.findTable();
        if($xetable){
            this.refreshScroll($xetable);
        }
    },
    methods: {
        //寻找vxetable
        findTable () {
            return XEUtils.find(
                this, 
                comp => comp && comp.$vnode && comp.$vnode.componentOptions && comp.$vnode.componentOptions.tag === 'vxe-table'
            )
        },
        //刷新滚动条
        refreshScroll (vxetable) {
          const { lastScrollLeft, lastScrollTop } = vxetable;
          return vxetable.clearScroll().then(() => {
            if (lastScrollLeft || lastScrollTop) {
              // 重置最后滚动状态
              vxetable.lastScrollLeft = 0
              vxetable.lastScrollTop = 0
              // 还原滚动状态
              return vxetable.scrollTo(lastScrollLeft, lastScrollTop)
            }
          })
        },
    },
};

okk，解决