vue+elementUI開發實踐問題總結(二)

該篇繼續記錄最近項目中一些疑難知識點和坑的解決辦法。

• 在vue多路由切換的過程當中，可能存在這樣一種狀況，即多個頁面使用同一個組件，這就會產生一種狀況，在這幾個頁面相互切換的過程當中並不會觸發vue的created或者mounted鉤子，官方文檔說可經過watch $route的變化來作處理，但比較麻煩，還得watch。後來發現其實能夠簡單的在 router-view上加上一個惟一的key，來保證路由切換時都會從新渲染觸發鉤子了。 以下：

<router-view :key="key"></router-view>
computed: {
  key() {
    // 或者 :key="$route.path" 只要保證key惟一就能夠了
    return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
  }
 }
複製代碼

• 有個場景下我把v-for和v-if混合在一塊兒寫了，後來聽別人說不要寫在一塊兒。我開始是這樣寫的，以下圖

  

  寫的比較low，可是功能能正常實現。後來就換成computed方式

<ul class="jcButtonUl">
  <li v-for="(item,index) in hostLoginManageButton" :key="index" @click="hostAddManage(index)">
    <span :class="item.icon"></span>
    {{item.btnValue}}
  </li>
</ul>
複製代碼

computed:{
    hostLoginManageButton(){
      let buttonArray=[];
      this.hostManageButtonArray.forEach(function(item,index){
        if(index!==2 && index!==3 && index!==5){
          buttonArray.push(item);
        }
      });
      return buttonArray;
    }
  }
複製代碼

解決。

• 在實際開發中，用到了element的表格組件，其中包含了checkbox。發現了這樣一個問題，每次勾選某行checkbox後，點擊別的按鈕顯示一個dialog時，剛纔勾選行的checkbox的勾選狀態會消失。可是數據中表示勾選的數據卻沒有清空。一直沒找到合適的辦法解決該問題，後來監聽了表格的selection-change事件，對應進行修改。問題雖然能夠解決，總感受不完美。但願有大神能夠提供解決方案。

我要根據是否勾選斷定是否能夠啓動該進程。我是判斷的multipleSelection的長度不爲0能夠執行啓動。第一次能夠正常判斷，出現彈窗後，checkbox勾選狀態消失，可是multipleSelection的長度依然不爲0，這個時候不用勾選就能夠啓動，這是bug。無奈，只能監聽selection-change。 解決辦法：把data數據用計算屬性計算就行了，雖然也不太清楚緣由。

<el-table ref="jcqtTable" v-loading="loading" :data="tableData" tooltip-effect="dark" stripe style="width: 100%" @select="handleSelect" @selection-change="handleSelect" @select-all="handleSelect">
            <el-table-column type="selection" width="55"></el-table-column>
            省略
 </el-table>
複製代碼

computed: {
  	tableData() {
    	return this.jcqtTableCon.slice((this.currentPage-1)*this.pageSize, this.currentPage*this.pageSize)
    }
  }
複製代碼

• 組件裏監聽通常數據方式是

watch:{
    textInput:function(val){
        //操做
    }
}
複製代碼

若是是監聽某一對象裏的某一項值的變化該如何作呢？往下看

data(){
    return {
        obj:{
            textInput:''
        }
    }
},
watch:{
    'obj.textInput':function(val){
        //操做
    }
}
複製代碼

項目沒有作完目前，陸續更新中。