<template>
<div>
<!-- OK OK -->
<!-- A面包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>权限管理</el-breadcrumb-item>
<el-breadcrumb-item>权限列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- B卡片视图区域 -->
<el-card>
<el-table :data="rightList" border stripe>
<el-table-column type="index" label="#"></el-table-column>
<el-table-column label="权限名称" prop="authName"></el-table-column>
<el-table-column label="路径" prop="path"></el-table-column>
<el-table-column label="权限等级" prop="level">
<template slot-scope="scope"><!--@@@@@@@@通过作用域与插槽放入el-tag实现自定义格
式，再根据数据的level判断显示哪个等级的tag -->
<!-- {{scope.row}} 输出一行的消息 -->
<el-tag v-if="scope.row.level==='0'">一级</el-tag>
<el-tag type="success" v-else-if="scope.row.level==='1'">二级</el-tag>
<el-tag type="warning" v-else>三级</el-tag>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
export default {
name:"Rights",
data() {
return {
rightList:[]//权限列表
}
},
created(){
// 获取所有的权限
this.getRightList()
},
methods:{
// 获取权限列表
async getRightList(){
const {data:res} =await this.$http.get("rights/list")
if(res.meta.status!==200){
return this.$message.error("获取权限列表失败")
}
this.rightList=res.data
console.log(this.rightList,"这里是rightList");
}
}
}
</script>
<style lang="less" scoped>
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/126773.html
