呈现问题

在我的项目开发过程中，发现 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.jsimport 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，解决