vue專案中踩過的element的坑

積極學習的小強發表於2021-08-22
Vue

前言：在現在這種大的社會背景下，人們的需求更加的個性化了，而之前為了解放開發複雜的原生開發狀態，現有的元件庫已經遠遠不能滿足人們高質量的需求了，這兩天開發發現了一些element UI互動上的缺陷，當然也是一些容易大意疏忽的細節問題，希望能給大家帶來幫助

1.element Message 訊息提示

1.專案中Message元件的引用

//全部引入元件庫使用方便
import ElementUI from "element-ui";
//按需引入，這種好處就是程式碼體積小
import { Message } from "element-ui";

//全域性掛載，便捷的this引用
Vue.prototype.$message = Message;

2.Message元件的問題

頁面執行時程式碼報錯：

截圖2021-08-22 上午10.58.20.png

截圖2021-08-22 上午11.01.28.png

element元件原始碼報錯位置
截圖2021-08-22 上午10.59.30.png

3.這裡大家大概也能看出問題的所在了

點選檢視自己程式碼報錯位置，基本就可以看出報錯原因
截圖2021-08-22 上午11.04.21.png

基本總結研究總結：Message元件在使用的過程中呼叫的入參不能為 null 和 undefined

一般發生這種問題的位置原因：大概可以多注意一下axios或者fetch請求的返回結果的地方引用處，如果有Message元件異常提示設定，但是後端返回的資料裡面缺少欄位，則就會產生 “undefined” 的上面的報錯。

2.element NavMenu 導航選單

a.官方程式碼邏輯：

<el-menu :default-active="baseroute" class="vertical" @select="menuclick" :router="menurouter">

   <el-menu-item :index="items.router" v-for="items in menu" :key="items.id">
     <span slot="title">{{items.label}}</span>
   </el-menu-item>
</el-menu>

b.官方的API：

截圖2021-08-22 上午11.22.25.png

看著這個元件沒有問題很完美，使用也很順暢，但是問題出就出在:router="true"這個配置上，大家有沒有發現這個配置項無法傳參，

c.當然遇到問題我們就需要研究解決：（初步的解決方案）

watch: {
 "$route.path": function(newVal) {
    //menu就是展示選單的陣列
    this.menu.forEach(item=>{
      if(newVal==item.router){
         this.$router.push({path:newVal ,query:{...this.routermsg}})
      }
    })
  },
},

d.又有問題出現了，那就時當你點選當前高亮選單時（一個選單點兩次），watch是監聽不到的（認為路由是沒有變化的），元件會以 router 定義的 index 作為 path 進行路由跳轉，也就是沒有了路由傳參的功能，頁面就會各種報錯和引數錯誤

e.在此情形下後面改善程式碼相容了 NavMenu 導航選單傳參的功能,

截圖2021-08-22 上午11.40.04.png

<script>
methods: {
   menuclick(index,indexPath){
     this.baseroute=index
     this.$router.push({path:indexPath[0] ,query:{...this.routermsg}})
   }
}
</script>

相容了傳參功能，那麼watch監聽也就不需要了，可以註釋或刪除

相關文章