后台管理系统-篇五

1：路径和页面选中的对应

刷新选中的在对应路径

动态绑定default-active的值-----对应于userMenu的id

:="defaultvalue" 定在setup义变量 

根据路径->userMenus->menu.url->menu.id

思路

1）拿到当前路径：userRoute()

2）根据路径匹配menus 在工具文件导出 函数pathMapToMenu

遍历菜单

判断 是否是一级菜单 是继续遍历

继续判断 menu.url====current

3）获取menu.id

2:重定向拿不到menu 是undefined拿不到ID

一般情况下重定向菜单的第一个选项

1）拿到菜单的时候保存 const firstmenu=null 导出

2）/main 重定向 ->firstmenu.url 在路由守卫里面匹配

3：面包屑功能的实现

element-ui的组件实现

nav-head组件传面包屑的数据

根据路径获取列表名称（写一个工具函数）

pathMapBreadcrumbs()

computed的妙用--->当路由或者store改变 通过放在computed里面可以重新计算 计算属性对变量有依赖

4：input数据绑定 通过在User给子组件传递数据 ，但是我们在子组件修改违反了单向数据流

父组件：v-model="formDate"

子组件： modelValue 接收的默认值

  const formDate=computed( {

 get:()=>props.modelValue,

set:(newValue)=>{ emit('update:modelValue',newValue)}

})

--------属性发生改变set不会调用，但是还是双向绑定

--------最佳方案

...props.modelValue 拷贝了一份

在子组件 自己监听修改

watch(formDate,(newValue)=>

{

emit('update:modelValue',newValue),

{deep:true}

}

5:子组件里面添加插槽 父组件里可以添加 标签 搜索等功能 pagesearch的封装

6：列表展示

1）存放在user.vue userList=ref()->所有的用户数据

role.vue roleList=ref()=>

2)Vuex

模块划分

 

 

 

 

 

 

 

 

 导入system模块

 

 

 添加system 记得给模块作用域

对应逻辑放在actions里面 获取数据

actions：{

getPageListAction({commit},payload:any){

//通过这种方式可以传入一些参数

//现在user 拿到 store.dispach('system/getPageListAction',{

//pageUrl:/users/list,

//queryIofo

//1.对页面发送请求

const pageResult=await getPageListDate

 

})

}

发送网络请求

 

 

 post请求

hy

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

在user.vue拿到userList=computed(()=>{state.sy})

 

 

 展示userList

element table组件 有边框类型

 

 

 抽取封装 展示列表

在setup定义

const proprList=[]

 

 

 在模板就可以直接遍历了

 

 

 包裹一个div给padding

-----------显示的完善

封装table通用的列表

动态绑定插槽名字 scope.row