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){
        //操做
    }
}
复制代码

项目没有作完目前，陆续更新中。