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,解决
转载自:https://segmentfault.com/a/1190000042275570