vue3:十四、脚色权限管理-表格引入-树形表格

一、实现结果

重要实现了脚色权限的表格数据展示，实现了树形结果
1、权限管理页面

2、权限管理表单页面

二、基本搭建

1、创建权限页面

在views中创建新文件RoleView.vue

2、修改路由

在router/index.js中增长一个role权限管理页面的路由

3、导航页面修改

将权限管理写入导航页的菜单项

三、基本数据操作

1、官网参考

Table 表格 | Element Plus
表格中找到树形数据与懒加载

  参照文档可知，当提供的表格数据含有childern字段，而且表格有属性row-key即可完成渲染
2、写入apifox接口请求

(1)查询全部列表

新建接口

新建接口/role/list

新建渴望

渴望返回数据

根据树形官网写法，写入返回数据(有children的话表示子项，父级会有一个展开结果)

1. {
2.     "code": 1,
3.     "msg": "成功",
4.     "data": [
5.         {
6.             name:"超级管理员",
7.             id:1,
8.             pid:0,
9.             children:[
10.                 {
11.                     name:"二级管理员1",
12.                     id:2,
13.                     pid:1,
14.                     children:[
15.                         {
16.                             name:"三级管理员1",
17.                             id:21,
18.                             pid:2
19.                         },
20.                         {
21.                            name:"三级管理员2",
22.                             id:22,
23.                             pid:2
24.                         }
25.                     ]
26.                 },
27.                 {
28.                     name:"二级管理员2",
29.                     id:3,
30.                     pid:1,
31.                     children:[
32.                         {
33.                             name:"三级管理员3",
34.                             id:31,
35.                             pid:3
36.                         },
37.                         {
38.                             name:"三级管理员4",
39.                             id:32,
40.                             pid:3
41.                         }
42.                     ]
43.                 },
44.                 {
45.                     name:"二级管理员3",
46.                     id:4,
47.                     pid:1,
48.                     children:[
49.                         {
50.                             name:"三级管理员5",
51.                             id:41,
52.                             pid:4
53.                     ]
54.                 }
55.             ]
56.         }
57.     ]
58. }

复制代码

(2)新增脚色

新建接口

新建接口/role/add，并写入须要传递的参数名称，父权限id，须要的权限数组

新建渴望

(3)编辑脚色

新建接口

新建接口/role/edit，而且传递修改行的id以及修改的数据name名称、pid父脚色id、arrays脚色权限数组

新建渴望

(4)删除脚色

新建接口

新建接口/role/del，并传递删除行的id

新建渴望

四、核心实现

1、将树形核心字段写入表格组件

在表格中的el-table中写入字段row-key="id" ：根据id举行判断举行树形结构设置，default-expand-all:默认展开

2、将树形row-key的值设置为变量

在表格标签中的row-key中写入变量threeRowKey

在参数中，写入threeRowKey，并设置默认值为id（这里须要由父页面提供参数值）

3、脚色页面表格实现

(1)界说表格列

根据之前的分类管理也买你，写入脚色信息的列信息，包含脚色名称，脚色ID，父脚色ID

1. //定义表格列
2. const columns = [
3.     { label: '角色名称', field: 'name', width: 200},
4.     { label: '角色ID', field: 'id', width: 120},
5.     {
6.         label: '父角色ID', field: 'pid', width: 120,
7.         temp: (row, index) => { return row.pid ? `<b>${row.pid}</b>` : '—' },
8.     }
9. ]

复制代码

(2)写入接口路径

包含全部列信息，新增，修改，删除

1. // 写入表格请求路径
2. const apiUrl = {
3.     list: '/role/list',
4.     add: '/role/add',
5.     edit: '/role/edit',
6.     del: '/role/del'
7. }

复制代码

(3)引入表格

在页面中引入表格组件

1. import Tables from "@/components/Table.vue"; //引入表格

复制代码

(4)表格组件写入

写入表格组件，并携带路径参数，表头数组，克制显示分页，克制分页，

1. <template>
2.     <Tables :apiUrl="apiUrl" :showPage="false" :showSearch="false" :columns="columns"></Tables>
3. </template>

复制代码

(5)办理箭头和文字不在一行显示问题

目前实现的结果，出现错位的样式

修改样式结果

(6)目前结果展示

由下图可知，已经实现

4、表单实现

表单中的父脚色的数据须要从表格组件中的全部脚色获取，每一个都可以作为父脚色
(1)表格组件-表格数据的传递

1. getDataCallback()
2.    ↓
3. getData( (data) => { emit("update:tableData", data); } )
4.    ↓
5. getData中的post(...) 发起请求
6.    ↓
7. 收到响应 res.code == 1
8.    ↓
9. tableData.value = res.data
10.    ↓
11. 执行 callback(res.data)
12.    ↓
13. emit("update:tableData", res.data) → 父组件监听到事件并接收数据

复制代码

<hr> getDataCallback方法

1. const getDataCallback = () => {
2.     getData((data) => {
3.         emit("update:tableData", data);
4.     })
5. }

复制代码

直接调用了 getData(...)，并传入了一个匿名函数 (data) => { ... }。

• 这里将一个函数作为参数传给了 getData。
  
• 这个函数就是所谓的callback（回调函数）。
  
• 当 getData 执行完毕，而且从后端接口获取到数据后，会执行这个 callback 函数，并把数据传进去。
  

<hr> getData方法

1. const getData = (callback

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。