許可權列表頁面實現
阿新 • • 發佈:2021-02-13
1.components新建power資料夾
新建檔案Rights.vue並新增路由
import Rights from ‘…/…/src/components/power/Rights.vue’
2.獲取許可權列表
<script>
export default {
data () {
return {
// 許可權列表
rightsList: []
}
},
created () {
// 獲取所有的許可權
this.getRightsList()
},
methods: {
// 獲取所有的許可權
async getRightsList () {
const { data: res } = await this.$http.get('rights/list')
if (res.meta.status !== 200) {
return this.$message.error('獲取許可權列表失敗')
}
this.rightsList = res.data
}
}
}
</script>
3.麵包屑和卡片檢視區
Tag 標籤用於美化許可權等級
<!--麵包屑導航區-- >
<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>
<el-table :data="rightsList" border stripe>
<el-table-column type="index"></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 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>