11月第一周遇到的问题

1、使用calc实现自适应

需求：
下图是一个vue-Element-admin的一个框架
1、代表侧边栏（可展开）
2、代表是所有页面共有的头部区域
3、4、5代表3张el-card卡片
6、是在使用el-col的:push=“1”
要实现自适应使用el-row和el-col就够了.但是5是一个日历组件。它有一个最小的宽度，如果特别小会被隐藏掉。因此有一个最小值。
解决方案：
’4占据15份，6占据1份，5占据八份）
1、使用媒体查询，当缩小到日历变形的临界值后，给5一个固定宽度（530px）.4的大小就等于calc(95.8% - 530px)。因为6占据1份。是24分支1。然后就可以实现了。
本来大算给4一个min-width。但是展开侧边栏会导致原来的100%减小，而四也不能自适应。最终结果会导致5被挤到下边去。
代码：

 @media screen and (max-width: 1700px) {
    .el-col-15 {
      width: calc(95.8% - 530px);
    }
    .el-col-8 {
      width: 530px;
    }
  }

2、根据需求隐藏侧边栏的一个导航菜单模块

这个bug经过好几个部分才得以解决。
一开始
因为这个框架是根据路由来展示导航菜单的。有一个关键属性hidden: true,。当路由匹配规则有这个属性时。这个模块就不会再侧边栏中显示。就像下面这种。

 {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

然后。我的思路就很简单。请求接口。拿到值。因为返回来的值也是布尔类型。我就直接放在了hidden上了。结果，火狐浏览器正常（也可以删去对应模块）。谷歌则打不开了。
接下来
换了一种思路。因为这个侧边栏的导航菜单是拿路由匹配规则，做的数组，然后循环渲染出来的。我只要在渲染前，拿到数组。根据需求，删除对应的数组即可。
逻辑没错，也可以实现。但是出了一个新bug.浏览器首次打开没有侧边栏。但是之后都正常。

 state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
    if (JSON.parse(localStorage.getItem('init')).is_child) {
      state.routes.splice(7, 1)
    }

后来我发现。是因为先请求接口是异步的。我登录后跳转路由。那时候。请求init的接口的还没有完成。本地也就没有储存。也就不会执行上面代码。但是之后本地都有储存了。自然可以了。
改成下面这样就可以了

 this.$store.dispatch('user/login', newloginForm).then(() => {
       getInit().then(res => {
              localStorage.setItem('init', JSON.stringify(res.data.data))
      })
  }).catch(() => {
            this.$message.warning('账号或密码错误，登入失败')
  }).then(() => {
            this.$router.push('/home')
  })

3、Cascader动态加载默认值的问题

这个bug困扰了很长一段时间。怎么搞都搞不定。明明是复制粘贴的代码。为什么人家可以我不行。都是相似的接口一样的数据。
后来发现省市联动的最后一个区。我拿到的值最后是以01结束。但是省市的接口根本就没有01这个数据。所以拿不到。
后来改了数据后发现火狐可以正常显示默认数据。但是谷歌不可以。4个省市联动，有一个怎么都显示不出来。
后来灵光一闪。可能是给他反映的时间不够。我把定时器的延长一会就好了。

 setTimeout(() => {
          this.$refs.cascader.panel.lazyLoad()
          this.$refs.cascader_now.panel.lazyLoad()
  }, 1500)