
<template>
<div>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
<el-breadcrumb-item>角色列表</el-breadcrumb-item>
</el-breadcrumb>
<el-card class="box-card">
<el-row :gutter="20">
<el-col >
<el-button type="primary">添加角色</el-button>
</el-col>
</el-row>
</el-card>
<!--<template>-->
<el-table :data="roleList"
stripe style="width: 100%" border>
<el-table-column type="expand">
<template slot-scope="scope">
<el-row v-for="(item1, i1) in scope.row.children" :key="item1.id" :class="['wbottom', i1 === 0 ? 'wtop' : 'wbottom']">
<!--渲染一级权限-->
<el-col :span="5">
<el-tag>{{item1.authName}}</el-tag>
</el-col>
<!--渲染二级权限-->
<!--<el-row v-for="(item2, i2) in scope.row.children.children" :key="item2.id">-->
<!--<el-col :span="10">-->
<!--<el-tag>{{item2.authName}}</el-tag>-->
<!--</el-col>-->
<!--</el-row>-->
</el-row>
<!--<pre>{{scope.row}}</pre>-->
</template>
</el-table-column>
<el-table-column type="index" width="50px"></el-table-column>
<el-table-column prop="roleName" label="职位" width="300px"></el-table-column>
<el-table-column prop="roleDesc" label="角色" width="300px"></el-table-column>
<el-table-column label="操作" width="300px">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini" @click="editRoleinfo(scope.row.id)"></el-button>
<el-button type="primary" icon="el-icon-delete" size="mini" @click="editRoleinfo(scope.row.id)"></el-button>
<el-tooltip class="item" effect="dark" content="分配权限" placement="top-end">
<el-button type="primary" icon="el-icon-share" size="mini" placement="top-end" ></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!--</template>-->
</div>
</template>
<script>
export default {
data(){
return{
roleList:[]
}
},
created(){
this.getRolesList()
},
methods:{
async getRolesList(){
const{data:res} = await this.$http.get('roles')
if( res.meta.status !== 200 ){
return this.$message.error('获取信息失败')
}
// debugger
this.roleList = res.data
console.log(this.roleList)
}
}
//methods
}
</script>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.el-main{
line-height: 10px!important;
}
.box-card {
width: 100%;
}
.el-card {
border: 0!important;
border-radius: 0!important;
background-color: #FFF;
color: #303133;
-webkit-transition: .3s;
transition: .3s;
}
.el-table{padding: 0 24px 24px!important;box-sizing: border-box}
.el-col{margin-top:20px;margin-bottom:20px;}
.wbottom{border-bottom:1px solid #ccc}
.wtop{border-top:1px solid #ccc}
</style>