每日总结及任务

任务:把后端传过来的平铺数组数据处理为tree组件需要的树形数据

 

1.1从图上可分析出通过pid的值判断是否是哪一个id的子级,例如:pid:2c是id:2c的子级.

1.2在utils/的index中,定义一个函数,来处理数据. //并不是vue中的方法,可以在任何地方定义并使用.

1.3.在函数中定义两个中间变量.

1.4循环遍历数组,如果item没有children,就给他加一个children

1.5建立映射管理,通过id快速的找到元素.

1.6再次循环,通过map里面的item.pid来判断(浅拷贝),如果有值,就有上级,则push到上级的children,如果没有则为一级菜单,直接添加到之前定义的空数组中.

1.7在department组件中导入,并使用.

 

 

 

 --------------------------------------------------------------------------------------------------------------------------------

今日总结:

1.在路由导航守卫中,通过判断是否有用户信息中的id,来决定是否发送ajax请求.

流程图如下:

 2.动态路由和静态路由   

目的:通过用户的登录来判断用户的权限,及访问的页面. //由后端来传递哪些页面的访问问题.

2.1在router/index.js  创建动态和静态两个路由表.并合并. //展开运算符合并

2.2动态路由表就是由权限来决定,用户是否可以访问.静态则是白名单,任何人都可以访问.例:404,login

2.3由于放在一个模块内,代码过于冗余,不便于维护.所以需要将其模块化,便于维护和查找.

3.理解项目中配置icon方法

3.1在路由配置中,有一个属性meta,里面包含了两个属性:title和icon

3.2tittle属性控制菜单的名称

3.3icon属性控制菜单的字体图标,可在src/icons/svg中获取icon的名字.如果没有满意的字体图标,可在https://www.iconfont.cn/中下载到src/icons/svg中,通过名称使用.

4.设置页面标题

4.1document.title = '标题内容'

4.2import getPageTitle from '@/utils/get-page-title'   引入工具方法

4.3在路由守卫中调用补充一个路由守卫

router.beforeEach((to, from, next) => {
 document.title = getPageTitle(to.meta.title)
 next()
})

****导航守卫可以写多个

5.修饰符

@click.native
//是用来在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的html标签看待
:a.sync
//实现父子组件数据之间的双向绑定，与v-model类似。
类别在于：一个组件上只能有一个v-model，.sync修饰符可以有多个。

6.从饿了么上拷贝树桩结构

6.1CVCVCVCVCVCVCV

6.2创建templete,cv   <cl-row>的内容到templete里

6.3slot-scope="{ node,data }"

6.4不可直接查看插槽定义的对象内容,则需要绑定点击事件log一下,由于不是原生的,所以要在点击事件后面加上.native,在控制台打印查看.并    <el-col>{{ data.manager }}</el-col>

6.5在api中建立一个js文件用来定义向服务器请求数据的ajax

6.6在.vue中按需导入 

6.7在methods中定义一个函数,使用在6.5中定义的ajax向服务器获取参数

6.7.1调用shift方法删除数组第一个元素并保存于data中

6.8因在页面加载时就需要渲染数据,所以在6.7中封装的函数,需要在created中使用 this调用此函数去渲染