<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%">
<el-table-column type="index" ></el-table-column>
<el-table-column prop="roleName" label="职位" width="180"></el-table-column>
<el-table-column prop="roleDesc" label="角色" width="180"></el-table-column>
<!--<el-table-column prop="roleDesc" label="角色" width="180"></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}
</style>
