[TOC]
⻆⾊管理属于权限管理的⼀部分，我们可以预设⼀些⻆⾊例如课程管理员，⼴告管理员，超级管理员，普通⽤户，然后在实际使⽤时分配给不同⽤户不同的⻆⾊，便于操作。（⽆需给某个⽤户进⾏详细的功能设置）
功能有：
制作添加⻆⾊、编辑⻆⾊、分配菜单。
布局、列表展示、删除功能⾃⾏练习完成。分配资源与分配菜单类似，作为练习。
基础准备⼯作说明：
⻆⾊⻚⾯初始代码。
// role/index.vueclass=“role”>
⻆⾊列表组件初始代码（实现展示与删除功能）
// role/components/list.vueclass=“role-list”>
class=“box-card”>
:data=“roles”
style=“width: 100%”
v-loading=“isLoading”
>
prop=“id”
label=“编号”
/>
prop=“name”
label=“⻆⾊名称”
/>
prop=“description”
label=“描述”
/>
prop=“createdTime”
label=“添加时间”
/>
label=“操作”
align=“center”
width=“150px”
>
slot-scope=“scope”>
type=“text”
>分配菜单
type=“text”
>分配资源
type=“text”
@click=“handleEdit(scope.row)”
>编辑
type=“text”
@click=“handleDelete(scope.row)”
>删除
</el-table-column>
</el-table>
</el-card>
</div>
</template>
slot=“header” class=“clearfix”>
ref=“form” :model=“form”>
label=“⻆⾊名称” prop=“name”>
v-model=“form.name”>
type=“primary”
@click=“onSubmit”
:disabled=“isLoading”
>查询搜索
:disabled=“isLoading”
@click=“onReset”
>重置
创建⽂件 services/role.js ⻆⾊接⼝操作模块
// services/role.js import request from ‘@/utils/request’ // 获取⻆⾊ export const getRoles = data => { return request({ method: ‘POST’, url: ‘/boss/role/getRolePages’, data }) } // 删除⻆⾊ export const deleteRole = id => { return request({ method: ‘DELETE’, url:/boss/role/${</font><font style="color:rgb(0,92,197);">id</font><font style="color:rgb(102,153,0);">}
})
}
若有收获，就点个赞吧
0 人点赞
