vue+elementUI开发实践问题总结(二)

最新推荐文章于 2020-03-11 21:23:36 发布

转载最新推荐文章于 2020-03-11 21:23:36 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5adaa51851882567285fedca

文章标签：

#javascript #ViewUI

本文分享了在Vue项目中遇到的问题及解决方法，包括通过设置唯一key解决多路由组件复用导致的钩子未触发问题，使用计算属性优化v-for与v-if混用的场景，以及针对Element UI表格组件中checkbox勾选状态异常的处理。

该篇继续记录最近项目中一些疑难知识点和坑的解决办法。

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

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