这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

1.element动态添加表头的正确姿势，三步完成动态表头

1. 第一步循环 开发表格组件<dsp-table>

具体封装可看前面几期推文

<div :key="status">
        <dsp-table
        //表格数据
        :data="tableData"
        //表头，涉及动态交互
        :header="dailyHeaderselect"
        //封装表格功能项
        :settings="tableSettings"
        //翻页
        @currentPage="currentPage"
        @pageSize="pageSize"
        //复杂表格，嵌套二级表，展开二级表事件
        @sortChange="sortChange"
      >
      </dsp-table>
</div>

2. 第二步  点击按钮动态改变表头

1.方式1:

handleSaveSetTable() {  
  this.$set(this.tableColumn , 2, { name:'手机号', value: 'phone', show: true })  
  this.status= !this.status
  
  // 改变this.status来触发重新做diff运算渲染dom，这样解决了一些固定表头可能出现错乱问题
}

2.方式2:

checkheader(type) {
      let arr=[]
         //展示表头数组
        this.dailyHeaderselect = [];
         //遍历原数组
        for (let index = 0; index < this.dailyHeader.length; index++) {
          const element = this.dailyHeader[index];
          if(index<=1){//固定列
            arr.push(element);
          }else{
            //非固定列，根据页面下拉框选择数据确定展示项
            if (this.checkList1.indexOf(element.label) != -1) {
              arr.push(element);
            }          
          }
        }
        // 改变this.status来触发重新做diff运算渲染dom，这样解决了一些固定表头可能出现错乱问题
          this.status=!this.status
          //新表头
          this.dailyHeaderselect=arr
 }

2.router.beforeEach() 动态加载路由出现死循环问题

采用beforeEach做路由过滤，如果没登录就直接跳转到登录界面，然而发现个问题就是要么跳转到登录页面、然后再调回首页，要么卡着不动、要么出现空白页面。

1、router.beforeEach( to , from ,next) 介绍

to: 即将路由的地址

form: 当前的路由地址，也就是马上要离开的地址

next(): 执行进入下一个路由

next(false): 禁止进入下一个路由

next('/login'): 路由到/login地址

2、两种死循环问题

1,路由到相同地址的死循环

比如在beforeEach中设置未登录（userData为null）就跳转到登录页面

  if(localStorage.getItem('status')==null){    
     next()
  }else{
    next({ path: "/login" })
  }

在非登录页面是没有问题的，但是在登录页面就出现了死循环或者空白页，通过打印我们发现浏览器在登录页反复跳转。

在登录页面因为没登录，userData为null，这时候通过next(’\login’)就会重定向到登录页面，重定向到登录页面后，这时候userData依然为空，那么就要继续重定向登录页面，于是出现了死循环。 对这种情况加个判断条件就能解决。

 if(localStorage.getItem('status')==null){    
     //有登录态直接跳转next
     next()
  }else{
     //非登录态页面，且不在登录页
    if(to.fullPath!='/login'){
       next({ path: "/login" })
    }else{
      next()
    }     
  }