任务:把后端传过来的平铺数组数据处理为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调用此函数去渲染
版权归原作者 mini猪 所有, 如有侵权,请联系我们删除。