目前本人再使用vue-element-admin項目時都是通過直接刪除一些用不上的路由來進(jìn)行側(cè)邊欄的清除，但是其實有一個更加好的辦法來對項目的側(cè)邊欄顯示的內(nèi)用進(jìn)行管理，就是權(quán)限管理，其實也不知道這個方法好不好，原理上來說時跟直接刪除該路由的方式時一樣的

展開渲染標(biāo)簽編輯權(quán)限

el-table-column type="expand"設(shè)置了expand則顯示為一個可展開的按鈕

顯示圖上的效果使用了三重for循環(huán) 按照 tree 數(shù)據(jù)結(jié)構(gòu) .children 取得下一級數(shù)據(jù)

<el-table-column type="expand">
          <template slot-scope="scope">
            <el-row v-for="(rights1,index) in scope.row.children" class="vertical" :key="index">
              <el-col :span="5">
                <el-tag class="tag1"
                        disable-transitions
                        closable
                        @close="remRight(scope.row,rights1.id)">
                  {{rights1.authName}}
                </el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <el-col :span="19">
                <el-row v-for="(rights2,index2) in rights1.children" class="vertical" :key="index2">
                  <el-col :span="6">
                    <el-tag class="tag2"
                            type="success"
                            disable-transitions
                            closable
                            @close="remRight(scope.row,rights2.id)">
                      {{rights2.authName}}
                    </el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <el-col :span="18">
                    <el-tag class="tag3"
                            type="warning"
                            v-for="(rights3,index3) in rights2.children"
                            disable-transitions
                            :key="index3"
                            closable
                            @close="remRight(scope.row,rights3.id)">
                      {{rights3.authName}}
                    </el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
pre 標(biāo)簽 整齊的排列 文本 代碼
<!--            <pre>-->
<!--              {{scope.row.children}}-->
<!--            </pre>-->
          </template>
        </el-table-column>

     // 關(guān)閉下拉的權(quán)限標(biāo)簽 事件
      async remRight(role,rightId){
        //彈窗詢問用戶是否刪除數(shù)據(jù)
        const confirmResult = await  this.$queding(
          '確定要為該角色刪除此權(quán)限嗎?',
          '提示',
          {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)
        // 如果用戶確認(rèn)刪除，則返回值為字符串 confirm
        // 如果用戶取消刪除，則返回值為字符串 cancel
        // console.log(confirmResult)
        if (confirmResult !== 'confirm'){
          return this.$Msg.info('已取消刪除')
        }
        const {data:res} = await this.$http.delete(`roles/${role.id}/rights/${rightId}`)
        if (res.meta.status !== 200) return this.$Msg.error('刪除此權(quán)限失??！')
        this.$Msg.success('刪除用戶成功！')
        // 參數(shù)不直接引用role.id 為了給 role.children 重新賦值 動態(tài)更新 不用刷新頁面 再展開查看
        // 返回的data, 是當(dāng)前角色下最新的權(quán)限數(shù)據(jù)
        role.children = res.data
      },

對話框內(nèi)樹形組件編輯權(quán)限

顯示樹形組件的對話框：

    <!--    編輯角色權(quán)限的對話框-->
    <el-dialog
      title="修改角色權(quán)限"
      :visible.sync="editNPCRightBox"
      @close="ERNPCClose"
      width="45%">
<!--      樹形控件組件-->
      <el-tree
        展示數(shù)據(jù)源
        :data="RightList"
        適用于需要選擇層級時使用
        show-checkbox
        每個樹節(jié)點用來作為唯一標(biāo)識的屬性，整棵樹應(yīng)該是唯一的
        node-key="id"
        ref="PushRoleRef"
        默認(rèn)全部展開
        default-expand-all
        默認(rèn)勾選的節(jié)點的 key 的數(shù)組
        :default-checked-keys="defKeys"
        配置選項
        :props="treeProps">
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ToEditRightNPC">確 定</el-button>
        <el-button @click="editNPCRightBox = false">取 消</el-button>
      </span>
    </el-dialog>
<script>
        editNPCRightBox:false,
        RightList:null,
        // 樹形配置 根據(jù)哪一個來渲染 名字和children屬性
        treeProps:{
          label:'authName',// 看到的是哪一個屬性
          children:'children'// 父子嵌套的關(guān)系
        },
        defKeys:[],
        // 點擊編輯權(quán)限按鈕時 記錄當(dāng)前ID 供應(yīng)其他方法使用
        PushRolesId:null
</script>

點擊編輯權(quán)限按鈕先把要展示的數(shù)據(jù)源 RightList 再使用遞歸把擁有權(quán)限的id push到 defKeys里之后顯示對話框

// 點擊表單內(nèi)的編輯按鈕
      async editNPCRightBoxShow(role){
        this.PushRolesId = role.id
        const {data:res} = await this.$http.get('rights/tree')
        if (res.meta.status !==200) return this.$Msg.error('獲取權(quán)限列表失敗')
        this.RightList = res.data
        //console.log(role)
        await this.getThreeKeys(role,this.defKeys)
        this.editNPCRightBox = true
      },
      // 通過遞歸的方式 獲取角色下所有的三級權(quán)限的id 并保存到defKeys 數(shù)組中
      getThreeKeys(node,arr){
        // 如果當(dāng)前節(jié)點不包含 children 那么他就是三級節(jié)點
        if(!node.children){
          return arr.push(node.id)
        }
        node.children.forEach(item =>{
          this.getThreeKeys(item,arr)
        })
      },

點擊體檢按鈕時通過ref調(diào)用

getCheckedKeys（返回目前被選中的節(jié)點所組成的數(shù)組）

getHalfCheckedKeys （返回目前半選中的節(jié)點的 key 所組成的數(shù)組）

把他倆合并并轉(zhuǎn)成字符串按照接口約定向服務(wù)器發(fā)送請求

      // 編輯角色權(quán)限的對話框 內(nèi)的確定按鈕 發(fā)送請求
      async ToEditRightNPC(){
        const prams = [
          ...this.$refs.PushRoleRef.getCheckedKeys(),
          ...this.$refs.PushRoleRef.getHalfCheckedKeys()
        ]
        const xxx = prams.join(',')
        //console.log(prams)
        const {data:res} = await this.$http.post(`roles/${this.PushRolesId}/rights`,{rids:xxx})
        if (res.meta.status !==200) return this.$Msg.error('為此角色修改權(quán)限失敗')
        await this.getNPCList()
        this.editNPCRightBox = false
        this.$Msg.success('修改角色權(quán)限成功')
      },
      // 編輯角色權(quán)限的對話框被關(guān)閉時 清空默認(rèn)選中的值 防止打開時id 重復(fù)
      ERNPCClose(){
        this.defKeys = []
      }

展示所有權(quán)限

很簡單就是請求數(shù)據(jù) 表格渲染

<template>
  <div>
    <!--    面包屑導(dǎo)航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }" >首頁</el-breadcrumb-item>
      <el-breadcrumb-item>權(quán)限管理</el-breadcrumb-item>
      <el-breadcrumb-item>權(quán)限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片區(qū)域-->
    <el-card>
      <el-table
        :data="RightsList"
        style="width: 100%"
        stripe
        border>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="authName" label="權(quán)限名稱"></el-table-column>
        <el-table-column prop="path" label="路徑"></el-table-column>
        <el-table-column label="權(quán)限等級">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level == 0">一級</el-tag>
            <el-tag v-else-if="scope.row.level == 1" type="success">二級</el-tag>
            <el-tag v-else type="warning">三級</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
  export default {
    name: 'Rights-content',
    created() {
      this.getRightsList()
    },
    data(){
      return{
        RightsList:null
      }
    },
    methods:{
       async getRightsList(){
        const {data:res} = await this.$http.get('rights/list')
         if (res.meta.status !==200) return this.$Msg.error('獲取權(quán)限列表失敗')
         this.RightsList = res.data
      }
    }
  }
</script>

到此這篇關(guān)于Vue element實現(xiàn)權(quán)限管理業(yè)務(wù)流程詳解的文章就介紹到這了,更多相關(guān)Vue element權(quán)限管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: