VUE+Element-ui 后台管理平台给角色分配权限详解_角色权限 ui

VUE+Element-ui 后台管理平台给角色分配权限详解

给角色分配权限，哇塞，这个真的对初学者很难啊，相当棘手，思虑再三，终于出来了，下面就是详细步骤。
一、页面信息
下面展示一些 弹窗部分页面表单信息。

//这里是打开弹窗的页面按钮信息
<el-table-column label="操作">
   <template slot-scope="scope">
   //获取点击分配权限的当前行信息
      <el-button type="primary" round @click="openPowerDialog(scope.row)">分配权限</el-button>
    </template>
</el-table-column>
//这里是弹窗的信息
<el-dialog
    title="编辑角色权限"
    :visible.sync="dialogVisible">
    <el-tree
    :data="ColumnList"
    show-checkbox
    node-key="auth_id"
    ref="tree"
    :default-expanded-keys="defaultTds"
    :default-checked-keys="defaultTds"
    :props="defaultProps">
    </el-tree>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeColumn">确 定</el-button>
    </div>
    </el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

备注：:data ：是数据存储区域，也是页面数据来源
show-checkbox：是否被选中
node-key=“auth_id”：我们页面会包含一些已经选中的数据，node-key是必需设置项，是我们后端数据中的一个字段，且该字段是在数据中是唯一的。
:default-expanded-keys：展开时的默认节点
:default-checked-keys：默认选中的节点
:props=“defaultProps”：指定标签节点信息，我这里的值为：

defaultProps: {
            label: 'auth_name',
            children: 'children',
        },
1
2
3
4

二、js部分
1.引入接口

import {
    getColumnApi,
    putRolePowerApi
} from "@/api"
1
2
3
4

2、在data中定义信息

data() {
      return {
        // 当前默认权限
        defaultTds:[],
        selectRole:[],
        // 角权限色弹窗信息包
        ColumnList:[],
        defaultProps: {
            label: 'auth_name',
            children: 'children',
          
        },
        // 分配权限弹窗信息
        dialogVisible: false,
        // 修改信息弹窗
        row:{},
        tableData: [],
        loading: true,
        // 弹窗信息
        dialogFormVisible: false,
        form: {
            role_id:"",
            role_name:'',
            role_describe:''
        }
     }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

3、点击修改弹窗按钮js

// 打开分配角色权限弹窗获取信息
        openPowerDialog(row){
            this.selectRole.role_id = row.role_id
            getColumnApi().then(res=>{
                this.ColumnList = res.data
                // 默认显示已有的权限
                let tmp = row.auth_ids_son ? row.auth_ids_son.split(','): []
                this.defaultTds = tmp
                console.log(this.defaultTds)
            })
            // 显示弹窗
            this.dialogVisible = true
        },
1
2
3
4
5
6
7
8
9
10
11
12
13

4、选择好权限后，点击确定部分的js

// 确定修改权限，权限状态切换
        changeColumn(){
            var temId = []
            let temIdson = []
            // console.log(this.$refs.tree.getCheckedNodes());
            if(this.$refs.tree.getCheckedNodes()){
                this.$refs.tree.getCheckedNodes().forEach(firstItem => {
                    // console.log(firstItem)
                    if(firstItem.auth_id) temId.push(firstItem.auth_id)
                    if(firstItem.auth_id && firstItem.auth_pid != 0) temIdson.push(firstItem.auth_id)
                    if(firstItem.children){
                        firstItem.children.forEach((twoItem)=>{
                            if(twoItem.auth_id) temId.push(twoItem.auth_id)
                            if(twoItem.auth_id && twoItem.auth_pid !=0) temIdson.push(twoItem.auth_id)
                        })
                    }
                });
            }
            // console.log(temId)
            // console.log(temIdson)
            // // ES6去重
            // console.log([...new Set(temId)])
            // console.log([...new Set(temIdson)])
            let auth_ids = [...new Set(temId)].join(',')
            let auth_ids_son = [...new Set(temIdson)].join(',')
            putRolePowerApi({
                role_id:this.selectRole.role_id,
                auth_ids:auth_ids,
                auth_ids_son:auth_ids_son
            })
            .then(res=>{
                console.log(res)
                if(res.meta.state == 200){
                    this.$message.success("操作成功")
                    this.initData()
                    this.dialogVisible = false
                }else{
                    this.$message.error(res.meta.msg)
                }
            })

        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

bingo