操作按钮的渲染
<el-table-column label="操作" width="300px">
<!-- 作用域插槽的形式渲染权限等级 -->
<template slot-scope="scope">
<!-- scope.row将拿到的数据渲染 -->
<el-button size="mini" type="primary" round icon="el-icon-edit">编辑</el-button>
<el-button size="mini" type="success" round icon="el-icon-delete">删除</el-button>
<el-button size="mini" type="warning" round icon="el-icon-setting">分配权限</el-button>
</template>
</el-table-column>
<el-table-column type="expand"></el-table-column>
形成展开列
<template>
<div>
<!-- 面包屑导航区 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>权限管理</el-breadcrumb-item>
<el-breadcrumb-item>角色列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区域 -->
<el-card>
<!-- 添加角色的按钮,最好放到row中 -->
<el-row>
<el-col>
<el-button type="primary">添加角色</el-button>
</el-col>
</el-row>
<!-- 角色列表区域,首先拿到角色列表的数据 -->
<!-- data指定数据源 stripe斑马隔行变色 border边框-->
<el-table border :data="rolesList" stripe>
<!-- 展开列 -->
<el-table-column type="expand"></el-table-column>
<!-- 索引列 -->
<el-table-column type="index" label="#"></el-table-column>
<!-- prop是data数组中的数据 -->
<el-table-column label="角色名称" prop="roleName">
</el-table-column>
<el-table-column label="角色描述" prop="roleDesc">
</el-table-column>
<!-- width 为了能一列显示按钮 -->
<el-table-column label="操作" width="300px">
<!-- 作用域插槽的形式渲染权限等级 -->
<template slot-scope="scope">
<!-- scope.row将拿到的数据渲染 -->
<el-button size="mini" type="primary" round icon="el-icon-edit">编辑</el-button>
<el-button size="mini" type="success" round icon="el-icon-delete">删除</el-button>
<el-button size="mini" type="warning" round icon="el-icon-setting">分配权限</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
export default{
created() {
//在已进入该路由的时候就获取所有权限
this.getRolesList()
},
data() {
return {
//所有角色列表
rolesList:[]
}
},
methods: {
async getRolesList(){
const {data:res}=await this.$http.get('roles')
if(res.meta.status!==200) return this.$message.error('获取用户角色数据失败')
this.rolesList=res.data
//console.log(this.rolesList) //测试
}
},
}
</script>
<style lang="less" scoped></style>