8、角色列表

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

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

在路由中加載導(dǎo)入：

8.2 繪制基本布局結(jié)構(gòu)并獲取列表數(shù)據(jù)

效果圖：

面包屑導(dǎo)航：

卡片視圖：

API：

渲染數(shù)據(jù)：
定義數(shù)據(jù)date：

生命周期函數(shù)：

8.3 渲染角色列表數(shù)據(jù)

先渲染索引列：

優(yōu)化樣式：

在索列之前加和 展開列：

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

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

8.5 分析角色下權(quán)限渲染的思路

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

實現(xiàn)效果：

拿到數(shù)據(jù)之后通過三層for循環(huán)渲染出對應(yīng)的ui結(jié)構(gòu)

8.6 通過第一層for循環(huán)渲染一級權(quán)限

先做一下柵格布局，區(qū)分出三個區(qū)域用來放三層for循環(huán)：

scope.row是當(dāng)前對象的數(shù)據(jù)。 .children 是一級權(quán)限的數(shù)據(jù)， ：key每次循環(huán)綁定一個唯一的key值，通過插值表達(dá)式渲染出數(shù)據(jù)

放在el-tag標(biāo)簽中美化樣式

8.7 美化一級權(quán)限

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

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

8.8 通過二層for循環(huán)渲染二級權(quán)限

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

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

動態(tài)綁定class類，然后判斷

最終效果：

8.9 通過第三層for循環(huán)渲染三級權(quán)限

柵格布局：
注使用item2的children

通過作用域插槽拿到數(shù)據(jù) children 拿到子組件數(shù)據(jù)，通過柵格分隔樣式，動態(tài)綁定邊框值。

8.10 美化角色權(quán)限下的UI結(jié)構(gòu)

設(shè)置最小寬度：
設(shè)置body的最小寬度為1366px

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

最后把代碼插槽刪了

8.11 點擊刪除權(quán)限按鈕彈出確認(rèn)提示框

使用element組件中的可移除標(biāo)簽屬性：

closable屬性：

綁定點擊事件：
removeRightById：

定義事件：

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

catch捕獲錯誤：
結(jié)果判斷用戶操作：

這里只是打印了結(jié)果，沒有向后端發(fā)起請求。

8.12 完成刪除角色下指定權(quán)限的功能

上一節(jié)點擊了刪除按鈕后需要向后端發(fā)起刪除的請求，刪除用戶在數(shù)據(jù)庫中的權(quán)限：
API：

發(fā)起delect請求：
先把item3.id傳進(jìn)去：

在處理函數(shù)的形參中j接收一下：

然后再發(fā)起delect請求的時候用之前的參數(shù)字符串拼接
然后進(jìn)行判斷：

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

把close權(quán)限賦值給一級標(biāo)簽二級標(biāo)簽

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

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

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)