Ant Desgin Vue 多Tab問題解決艱辛之路
阿新 • • 發佈:2020-12-08
Ant Desgin Vue 這套UI看起來非常不錯,所以就想嘗試學習一下。但是也遇到了很大的問題就是MultiTab導致的一些問題。不多說,直接上圖:
從列表頁面,編輯某條資料時,其ID值不同,所以就會導致此處名稱相同的tab不斷重複出現。
為此,需要在components/MultiTab/MultiTab.vue 裡面,在 watch 方法增加一里面些控制:
'$route': function (newVal,oldVal) { /* 原來程式碼控制 this.activeKey = newVal.fullPath if (this.fullPathList.indexOf(newVal.fullPath) < 0) { this.fullPathList.push(newVal.fullPath) this.pages.push(newVal) }this.activeKey=newVal.fullPath*/ var isExists = false // 判斷當前最新請求的頁面是否已存在於快取fullPathList中 var targetPath = '' // 用於記錄已存在的Tab 對應的網址 var index = 0 // 如果存在,則對於的下標index
for(let i in this.fullPathList){ if (this.fullPathList[i].indexOf('Home/Introduce') < 0 && this.fullPathList[i].indexOf(newVal.path) >= 0) { isExists = true targetPath = this.fullPathList[i] index = i break } } if(isExists){ this.fullPathList[index] = newVal.fullPath this.pages[index] = newVal }else if(newVal.fullPath.indexOf('Home/Introduce') < 0){this.fullPathList.push(newVal.fullPath) this.pages.push(newVal) }
通過如此修改後,則能有效控制解決同標題的Tab重複出現問題,不會再因為編輯時點選不同資料出現多個Tab。
但是接下來會出現,第一次編輯所帶出來的各項數值,會在隨後多次編輯中出現,甚至新增的頁面裡面也會出現此問題。
經各種折騰,發現在編輯頁面中新增一個方法,在此方法中獲取引數ID值,則能有效解決此問題。用watch方法 替代 mounted
watch: { $route(to, from) { this.qid = to.query.Id; } }
繼續折騰,不斷測試中發現,編輯頁面資料成功儲存後不能跳轉轉到列表頁面,並同時關閉編輯頁面的Tab。
在components/MultiTab/MultiTab.vue 裡面,繼續在watch方法增加如下控制:
if(newVal.fullPath.indexOf('colOldTab=true')>0){ this.closeThat(oldVal.fullPath) }
在編輯頁面,返回列表頁面的方法裡面,增加一個引數:
this.$router.push({ path: '/Home/Introduce',query: { colOldTab: true } })
希望能給當下迷惑不解的人,提供自己的一些解決思路,