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

出现问题 【vxetable|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.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，解决