有個(gè)需求就是切換tab后，原先的table水平滾動(dòng)條要還原位置（如下圖），先說下思路，大致就是 切出頁面時(shí) 把滾動(dòng)距離保存到Storage 中，切回來時(shí)在恢復(fù)

直接上代碼
首先table ref指定一下ref="jtable"
vue methods中寫好兩個(gè)方法

handleScroll() { //滾動(dòng)的事件let scrollPosition = this.$refs.jtable.$el.querySelector('.ant-table-body').scrollLeft;localStorage.setItem("PortMore-scrollLeft", scrollPosition);},//定位到原來滾動(dòng)條的位置restoreScrollPosition() {let scrollX = localStorage.getItem('PortMore-scrollLeft');if (scrollX) {this.$refs.jtable.$el.querySelector('.ant-table-body').scrollLeft = scrollX;}},

注意，如果是只涉及幾個(gè)頁面，可以像我一樣直接指定存入localStorage中的key是PortMore-scrollLeft，多個(gè)的話可以通過路由路徑去拼接，比如localStorage.setItem(this.$route.fullPath+"-scrollLeft", scrollPosition);
接下來就是幾個(gè)觸發(fā)事件

watch: {//路由變更的時(shí)候恢復(fù)保存的滾動(dòng)位置'$route'(nv, ov) {this.restoreScrollPosition();},},beforeDestroy() {// 頁面關(guān)閉前觸發(fā)的邏輯localStorage.removeItem("PortMonitor-scrollLeft");},

如果你的tab頁面很簡單的話，推薦使用這個(gè)方法

beforeRouteLeave(to, from, next) {this.handleScroll();//指定操作要放在離開路由前this.routeThis = this.$route.fullPath;next();},

注意，這時(shí)候你會發(fā)現(xiàn)beforeDestroy獲取不到之前的路由，所以我是這樣拼接的

beforeDestroy() {// 頁面關(guān)閉前觸發(fā)的邏輯localStorage.removeItem(this.routeThis + "-scrollLeft");},

這個(gè)routeThis是定義在上邊data里的

data() {return {routeThis: "",};},

但是，如果你的tab頁面里又套了兩個(gè)小tab頁面，建議老老實(shí)實(shí)在小頁面mounted里寫上以下代碼

this.$nextTick(() => {const tableComponent = this.$refs.jtable;if (tableComponent) {const tableContainer = tableComponent.$el.querySelector('.ant-table-body');tableContainer.addEventListener('scroll', this.handleScroll);}})

這個(gè)是給table加上一個(gè)滾動(dòng)監(jiān)聽事件