06-HR-角色管理（角色管理介绍，角色管理组件布局，获取角色列表数据，处理表格分页，处理序号问题，添加表格loading效果，删除角色功能，添加角色弹窗控制）

---

theme: github

角色管理模块

角色管理介绍

目标：不同的用户登录系统后，能够操作不同的菜单。

总结：角色的增删改查

• 用户（员工）账号：用来登录系统
• 角色：员工的身份，不同的身份拥有不同的菜单，角色可以分配给用户
• 权限：功能按钮，可以分配给角色

总结：不同的用户登录系统后可以操作不同的菜单

角色管理组件布局

根据以上的结构，我们采用element-ui的组件实现**src/views/setting/index.vue**

<template>
  <div class="setting-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 左侧 -->
          <el-tab-pane label="角色管理">
            <!-- 按钮 -->
            <el-button
              icon="