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
新建期望
期望返回数据
{"code": 1,"msg": "成功","data": [{name:"超级管理员",id:1,pid:0,edit:false,del:false,children:[{name:"二级管理员1",id:2,pid:1,children:[{name:"三级管理员1",id:21,pid:2},{name:"三级管理员2",id:22,pid:2 }]},{name:"二级管理员2",id:3,pid:1,children:[{name:"三级管理员3",id:31,pid:3},{name:"三级管理员4",id:32,pid:3}]},{name:"二级管理员3",id:4,pid:1,children:[{name:"三级管理员5",id:41,pid:4]}]}]
}(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
//定义表格列
const columns = [{ label: '角色名称', field: 'name', width: 200},{ label: '角色ID', field: 'id', width: 120},{label: '父角色ID', field: 'pid', width: 120,temp: (row, index) => { return row.pid ? `<b>${row.pid}</b>` : '—' },}
](2)写入接口路径
包含全部列信息，新增，修改，删除
// 写入表格请求路径
const apiUrl = {list: '/role/list',add: '/role/add',edit: '/role/edit',del: '/role/del'
}(3)引入表格
在页面中引入表格组件
import Tables from "@/components/Table.vue"; //引入表格(4)表格组件写入
写入表格组件，并携带路径参数，表头数组，禁止显示分页，禁止分页，
<template><Tables :apiUrl="apiUrl" :showPage="false" :showSearch="false" :columns="columns"></Tables>
</template>(5)解决箭头和文字不在一行显示问题
目前实现的效果，出现错位的样式
修改样式效果
(6)目前效果展示
由下图可知，已经实现
4、表单实现
表单中的父角色的数据需要从表格组件中的全部角色获取，每一个都可以作为父角色
(1)表格组件-表格数据的传递
getDataCallback() ↓
getData( (data) => { emit("update:tableData", data); } )↓
getData中的post(...) 发起请求↓
收到响应 res.code == 1↓
tableData.value = res.data↓
执行 callback(res.data)↓
emit("update:tableData", res.data) → 父组件监听到事件并接收数据getDataCallback方法
const getDataCallback = () => {getData((data) => {emit("update:tableData", data);})
}直接调用了 getData(...)，并传入了一个匿名函数 (data) => { ... }。
- 这里将一个函数作为参数传给了
getData。 - 这个函数就是所谓的callback（回调函数）。
- 当
getData执行完毕，并且从后端接口获取到数据后，会执行这个 callback 函数，并把数据传进去。
getData方法
const getData = (callback) => {// ...post(props.apiUrl.list, { data: searchField }).then(res => {