页面搭建

<template><div class="container"><div class="app-container"><el-button size="mini" type="primary">添加权限</el-button><el-table-column label="名称" /><el-table-column label="标识" /><el-table-column label="描述" /><el-table-column label="操作"><el-button type="primary" mini="size">添加</el-button><el-button type="primary" mini="size">删除</el-button><el-button type="primary" mini="size">编辑</el-button></el-table-column></div></div>
</template>

封装接口调用

api

import request from '@/utils/request'// 获取权限列表
export function getPermissionList() {return request({url: '/sys/permission'})
}

一进页面就调用

export default {name: 'Permission',created() {this.getPermissionList()},methods: {async getPermissionList() {const result = await getPermissionList}}
}

 将获取的数据转换为树形

 methods: {async getPermissionList() {// 将获取的数据转换为树形this.list = transListToTreeData(await getPermissionList, 0)}}

给表格绑定数据，添加 row-key和default-expand-all和默认展开节点属性

 <el-table :data="list" roe-key="id" default-expand-all>

用插槽和v-if设置二级权限没有添加

 <template v-slot="{row}"><el-button v-if="row.type === 1" type="primary" mini="size">添加</el-button><el-button type="primary" mini="size">删除</el-button><el-button type="primary" mini="size">编辑</el-button></template>

员工角色分配-弹出层

 点击按钮

1.设置控制退出角色的显示的变量

 showRoleDialog: false,

2.visible加.sync可以让我们点击x直接关闭弹层

  <el-dialog :visible.sync="showRoleDialog" />

3.封装api

// 获取可用角色
export function getEnableRoleList() {return request({url: '/sys/role/list/enabled'})
}

4.弹出层

<el-checkbox-group v-model="roleIds"><el-checkbox v-for="item in roleList" :key="item.id">{{ item.name }}</el-checkbox></el-checkbox-group>

回显数据

1.回显数据 

  methods: {// 点击角色按钮弹层出现async btnRole(id) {// 通过传入的id获取当前用户所拥有的角色this.roleList = await getEnableRoleList()// 记录当前点击的id，因为之后确定取消要存取给对应的用户this.currentUserId = id// 调用接口,解构数据，获取当前用户拥有的角色const { roleIds } = await getEmployeeDetail(id)// 赋值给对应的显示的勾选this.roleIds = roleIds// 先获取接口，获取成功了在显示弹层，否则页面来不及跳转this.showRoleDialog = true},

 2.确定按钮

调用接口，传入参数，提示信息

 async  btnRoleOk() {await assignRole({// 传入参数id: this.currentUserId,roleIds: this.roleIds})this.$message.success('分配用户角色成功')this.showRoleDialog = false}

3.取消按钮

          <el-button size="mini" @click="showRoleDialog=false">取消</el-button>

给角色分配权限-弹出层

1.控制弹层显示（:visible要加.sync修饰符，还要加title）

   <el-dialog :visible.sync=" showPermissionDialog" title="分配权限"><!--放置权限数据--></el-dialog>

2.步骤同上

这里用了文档里的方法，通过获取实例调用方法来实现双向绑定