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的话表示子项，父级会有一个展开效果)

{
    "code": 1,
    "msg": "成功",
    "data": [
        {
            name:"超级管理员",
            id:1,
            pid:0,
            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