关于vue.js: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，解决