vue中的页面复用，和element中给表格中使用v-if时，样式排列混乱，表格抖动的问题

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

需求： 因为写的两个页面大体相似，所以就想直接复用两个页面，but，带来了一些问题，下面跟我一起来看一下吧

1. 通过跳转的路由路径来判断进入不同的页面

因为页面大体相似，所以用的一个组件，在组件名字使用时，path是不一样的，这样可以根据跳转的路径来判断是进入到那个页面，那么怎么判断这个路由跳转路径不一样呢？对了，就是通过监听route对象来判断

路由对象： 同一个组件，但是path不同

{
         path:'workClothesPurchasingPlan',
         name:'workClothesPurchasingPlan',
         component:() => import('@/views/nursemanage/dailyManagement/workClothesPurchasingPlan'),
         meta:{
           name:'工作服集采计划管理',
           // hidden:true
         },
       },
       {
         path:'workClothesTemporaryPlan/temporary',
         name:'workClothesTemporaryPlan',
         component:() => import('@/views/nursemanage/dailyManagement/workClothesPurchasingPlan'),
         meta:{
           name: '工作服临采计划管理',
         },
       },  

监听$route对象：

$route是路由对象，所以需要深度监听，并且在页面进入时就需要监听，要启动立即监听

watch:{
     $route:{ // 判断是集采还是临采
         immediate:true, // 立即监听
         deep:true, // 深度监听
         handler(newVal,oldVal){
             this.searchFrom= { // 搜索项目
                 job_id:'',
                 status:'',
                 order_no:'',
                 oc_id:'', 
                 page:1,
                 page_size:10,
             }
             if(newVal.path === '/nurse/dailyManagement/workClothesTemporaryPlan/temporary' ){
                 this.type = 'temporary' // 临采
                 this.getOperationCenter()
                 this.getTemporaryPurchase()
             }else{
                 this.type = '' // 集采
                 this.getUnifiedTableList()
             }
             // console.log(this.type)
         }
     }
 },

2. 页面展示

因为table表格中有些许不同，所以需要根据进入的页面判断显示页面,用到了v-if来显示，可是出现了展示时表格出现混乱的问题

可以看出下面页面出现了不同

正常页面 异常页面

出现的原因：因为vue使用Diff算法可以实现对节点的复用。(key相同的节点会被复用)；只有当key(或其他导致isSameNode判断为false)发生改变时，才会触发节点的重新渲染。否则Vue将会复用之前的节点，通过改变节点的属性来实现节点的更新。 通过在要展示的地方加上key，并且给key设置一个随机数，让他每次都不一样来来避免样式混乱

 <div v-if="type === '' " :key='Math.random()'>

我以为问题到此结束了，可是当我点击搜索上的下拉框或者输入文字时，下方的table表格就会莫名其妙的抖动，我蒙蔽了，然后在网上找到了方法

表格抖动的原因：论是显示列还是隐藏列，vue 都需要重新计算单元格的高度和宽度，然后再重新渲染到页面上。因为这个过程被直接反馈到了页面上，所以导致了 table 发生闪烁。可以使用element中的dolayout函数解决

官网解释

解决代码

 beforeUpdate(){
        this.$nextTick(() => {
            this.$refs.table.doLayout()
        })
    },