Vue element-ui 前端頁面使用後端介面
阿新 • • 發佈:2020-10-22
首先:
1.佈局:使用一個麵包屑導航:
<!-- 麵包屑導航--> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item>> <el-breadcrumb-item>許可權管理</el-breadcrumb-item> <el-breadcrumb-item>許可權列表</el-breadcrumb-item> </el-breadcrumb>
對於佈局或許還需要設定麵包屑的css樣式,將card的margin-top設定一下
展示結果;
2:card頁面:
<card>
佔位
</card>
card中的程式碼是這樣的:(許可權管理但是還沒有美化!)
<el-card> <!-- border 加邊框線 stripe加斑馬線--隔行變色--> <el-table :data="rightsList" border stripe> <el-table-column type="index"></el-table-column> <!-- prop繫結的是:data陣列中每一個元素對應的值--> <el-table-column label="許可權名稱" prop="authName"></el-table-column> <el-table-column label="路徑" prop="path"></el-table-column> <el-table-column label="許可權等級" prop="level"></el-table-column> </el-table> </el-card>
美化操作~!
3:函式,定義 方法:
<script> export default{ data(){ return{ //許可權列表 rightsList:[] // 定義一個rightList物件 } }, created() { this.getRightslist() // 獲取許可權列表 }, methods: { async getRightslist() { // http的async 和 await方法,其中返回的是promise,需要await簡化操作 const {data:res}=await this.$http.get('rights/list') //{data:res} 解析data物件 if (res.meta.status!==200){ // status不為200說明獲取失敗 return this.$message.error('獲取許可權列表失敗') } this.rightsList=res.data console.log(this.rightsList) } } } </script>
作用域插槽:
<el-table-column label="許可權等級" prop="level"> <template slot-scope="scope"> // scope.row可以提取每一列的值 <el-tag v-if="scope.row.level==='0'">一級許可權</el-tag> <el-tag v-if="scope.row.level==='1' " type="success">二級許可權</el-tag> <el-tag v-if="scope.row.level==='2'" type="warning">三級許可權</el-tag> </template> </el-table-column>
展示效果:
完整程式碼:
<template> <div> <!-- 麵包屑導航--> <el-breadcrumb separator="/"> <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> <!-- border 加邊框線 stripe加斑馬線--隔行變色--> <el-table :data="rightsList" border stripe> <el-table-column type="index"></el-table-column> <!-- prop繫結的是:data陣列中每一個元素對應的值--> <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 v-if="scope.row.level==='1' " type="success">二級許可權</el-tag> <el-tag v-if="scope.row.level==='2'" type="warning">三級許可權</el-tag> </template> </el-table-column> </el-table> </el-card> </div> </template> <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 console.log(this.rightsList) } } } </script> <style lang="less" scoped> </style>