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

rocky191發表於2018-04-28
VueUI

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

  • 在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混合在一起寫了，後來聽別人說不要寫在一起。我開始是這樣寫的，如下圖
    vue+elementUI開發實踐問題總結(二)
    寫的比較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事件，對應進行修改。問題雖然可以解決，總感覺不完美。希望有大神可以提供解決方案。

vue+elementUI開發實踐問題總結(二)
我要根據是否勾選判定是否可以啟動該程式。我是判斷的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){
        //操作
    }
}
複製程式碼

專案沒有做完目前，陸續更新中。

相關文章