有个问题在项目开发过程中，发现如果vxetable点击表格进入详情页，再点击返回，表格行会错位.如果在错位的表格中滚动表格，显示将恢复正常。如果在页面上使用keep-alive，缓存页面，使用vxetable，可能会出现上述问题。解决方案和想法step1。首先，考虑如何解决错位问题。既然是可以通过滚动条恢复错位的表格，那就从这里开始吧。查阅了vxe文档，发现有对应的表格滚动条刷新方法，但是由于项目使用的版本太低，只好自己写了。如果有遇到和我一样问题的朋友，可以直接使用vxe自带的api。既然只有页面缓存时才会出现问题，那么在activated钩子中执行刷新滚动条的操作。activated(){this.refreshScroll(this.$ref.vxeTable);},methods:{refreshScroll(vxetable){const{lastScrollLeft,lastScrollTop}=vxetable;returnvxetable.clearScroll().then(()=>{if(lastScrollLeft||lastScrollTop){//重置上次滚动状态vxetable.lastScrollLeft=0vxetable.lastScrollTop=0//恢复滚动状态returnvxetable.scrollTo(lastScrollLeft,lastScrollTop)}})},}step2.找到解决错位的方法后，就要考虑如何在项目中全局解决。无法逐页添加ref和activated。最后想到了使用vue的mixin方法进行全局混合。新建一个mixin.js，在main.js中引入//minxin.jsimportXEUtilsfrom'xe-utils'//globalmixin，解决点击vxeformexportdefaultdetails后返回tablemisalignment的问题{//解决vxe表格点击详情后返回表错位问题activated(){let$xetable=this.findTable();如果（$xetable）{this.refreshScroll（$xetable）；}},methods:{//findvxetablefindTable(){returnXEUtils.find(this,comp=>comp&&comp.$vnode&&comp.$vnode.componentOptions&&comp.$vnode.componentOptions.tag==='vxe-table')},//刷新滚动条refreshScroll(vxetable){const{lastScrollLeft,lastScrollTop}=vxetable;returnvxetable.clearScroll().then(()=>{if(lastScrollLeft||lastScrollTop){//重置上次滚动状态vxetable.lastScrollLeft=0vxetable.lastScrollTop=0//恢复滚动状态returnvxetable.scrollTo(lastScrollLeft,拉斯tScrollTop)}})},},};好的，解决了
