8、角色列表

8.1 通過路由展示角色列表組件

在power中新建一個roles.vue(角色列表）初始化基本結構：

在路由中加載導入：

8.2 繪制基本布局結構并獲取列表數據

效果圖：

面包屑導航：

卡片視圖：

API：

渲染數據：
定義數據date：

生命周期函數：

8.3 渲染角色列表數據

先渲染索引列：

優化樣式：

在索列之前加和 展開列：

8.4 說明角色列表需要完成的功能模塊

現在還沒有具體的樣式，后面會寫
角色信息的添加，刪除功能前面做了，所以這里就不寫了
點擊對應按鈕出現對應的彈出層，然后執行對應的操作。

8.5 分析角色下權限渲染的思路

在展開行中拿到渲染的數據
在請求數據列表中返回了數據children，通過作用域插槽來拿

實現效果：

拿到數據之后通過三層for循環渲染出對應的ui結構

8.6 通過第一層for循環渲染一級權限

先做一下柵格布局，區分出三個區域用來放三層for循環：

scope.row是當前對象的數據。 .children 是一級權限的數據， ：key每次循環綁定一個唯一的key值，通過插值表達式渲染出數據

放在el-tag標簽中美化樣式

8.7 美化一級權限

思路：
每行之間隔開距離，給每行放一個buttom的邊框，第一行放一個top邊框（這里使用三元表達判斷） 加圖標

每行都放buttom，利用三元表達式，如果i1===0.則bdtop否則空

8.8 通過二層for循環渲染二級權限

使用柵格布局分出2級權限和3級權限，，方法和之前的一樣。

添加邊框 線（上邊框）第一個不添加，利用三元表達式判斷：

動態綁定class類，然后判斷

最終效果：

8.9 通過第三層for循環渲染三級權限

柵格布局：
注使用item2的children

通過作用域插槽拿到數據 children 拿到子組件數據，通過柵格分隔樣式，動態綁定邊框值。

8.10 美化角色權限下的UI結構

設置最小寬度：
設置body的最小寬度為1366px

角色列表設置居中：
定義一個類：哪里用到往哪里加

最后把代碼插槽刪了

8.11 點擊刪除權限按鈕彈出確認提示框

使用element組件中的可移除標簽屬性：

closable屬性：

綁定點擊事件：
removeRightById：

定義事件：

然后彈框提示用戶是否要刪除，使用的還是element組件L

catch捕獲錯誤：
結果判斷用戶操作：

這里只是打印了結果，沒有向后端發起請求。

8.12 完成刪除角色下指定權限的功能

上一節點擊了刪除按鈕后需要向后端發起刪除的請求，刪除用戶在數據庫中的權限：
API：

發起delect請求：
先把item3.id傳進去：

在處理函數的形參中j接收一下：

然后再發起delect請求的時候用之前的參數字符串拼接
然后進行判斷：

有個缺點：刪除之后展開欄就被關閉了 解決辦法：

把close權限賦值給一級標簽二級標簽

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：csdn   作者：十九萬里

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務