记一次前端项目遇到的问题以及解决办法（vue+element）

  一，Cascader 级联选择器显示过高的问题

  这个问题只需要在全局css文件添加一下代码

.el-cascader-menu {
    height: 300px;
}

.el-cascader-menu__wrap {
    height: 300px;
}

  在此项目中如果只添加第一个属性，在项目上线之后下拉框会出现另一个显示问题，所以我这里给.el-cascader-menu__wrap属性也添加了一个固定高。

 

二，includes()在判断时的问题

  在此项目中有一个需要判断一个数组中的元素在另一个数组中是否存在，在forEach循环之后，我用includes()进行判断却出现判断错误，以下是错误示例：

const pets = ['aut710', 'aut718', 'aut719'];

console.log(pets[0].includes('aut71'));

  此时返回的值为true，这是因为includes()方法在判断字符串的时候是判断一个字符串是否包含在另一个字符串中，所以如果用这个判断就会导致我们的后续得出新数组的结果持续多余的元素，所以最后我还是使用全等来进行判断，代码如下：

for (let i = 0; i < this.Arr1.length; i++) {
        // console.log(this.Arr1[i])
        for (let y = 0; y < Arr2.length; y++) {
          if (editStatu.apoint_machine.length && Arr2[y].replace(/\s*/g, '') === this.Arr1[i].label.toString()) {
            optoions.push(this.Arr1[i].value)
            // console.log('add')
          }
        }
      }

  在判断之前最好还是先处理一下数据的格式，再进行判断。

 

三，VUE路由权限的设置

  首先在路由上标记相应的权限信息

const routes = [{
        path: '/home',
        component: Home,
        redirect: '/servers',
        meta: {
            roles: ['0', '1', '2']
        },
        children: [{
            path: '/proerrors',
            component: ProErrors,
            meta: {
                roles: ['0', '1', '2']
            }
        },{
            path: '/configservers',
            component: configservers,
            meta: {
                roles: ['0']
            }
        }
        }]
    },
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        component: Login
    }
]

const router = new VueRouter({
    routes
})

// 路由导航守卫
router.beforeEach((to, from, next) => {
    if (to.path === '/login') return next()
    const tokenstr = window.sessionStorage.getItem('token')
    if (!tokenstr) return next('/login')
    const role = window.sessionStorage.getItem('usertype')
    console.log(role)
    if (to.meta.roles.includes(role)) {
        next() // 放行
    } else {
        next('/401') // 跳到401页面
        return
    }
    next()
})

  

全局路由守卫每次都判断用户是否已经登录，没有登录则跳到登录页。已经登录(已经取得后台返回的用户的权限信息(角色之类的))，则判断当前要跳转的路由，用户是否有权限访问(根据路由名称到全部路由里找到对应的路由，判断用户是否具备路由上标注的权限信息(比如上面的roles: ['0']))。没有权限则跳到事先定义好的界面(401,403之类的)。

这种方式，菜单可以直接用路由生成(用户没有权限的菜单也会显示，点击跳转的时候才做权限判断)，也可以在用户登录后根据用户权限把路由过滤一遍生成菜单(菜单需要保存在vuex里)。

 

四，深拷贝

  在点击修改之后由于是直接用scope.row获取的所有数据，在操作某一项取消之后会改变原数据，只需要对原数据进行深拷贝即可，深拷贝代码如下：

// 对data进行深拷贝
      function clone (target, map = new Map()) {
      if (typeof target === 'object') {
          const cloneTarget = Array.isArray(target) ? [] : {}
          if (map.get(target)) {
              return map.get(target)
        }
          map.set(target, cloneTarget)
          for (const key in target) {
              cloneTarget[key] = clone(target[key], map)
        }
          return cloneTarget
      } else {
          return target
        }
      }

 

五，搜索结果页面重置为第一页

  在其他页面进行搜索，如果不将页面重置为1的话搜索结果页面就会停留在当前页面，如果搜索结果没有此页则会报错，所以在进行搜索之前我们需要将页面参数重置为1，并且要使用分页组件的current-page属性，在搜索之前将页面和此属性皆重置为1即可正常搜索和显示了。

 // 搜索重置页面
    search () {
      this.queryinfo.p = 1
      this.currentPage = 1
      this.getadsenselist()
    }