【电商后台管理项目】难点攻克之权限管理可选树形控件

最新推荐文章于 2023-06-21 21:00:40 发布

终极萌萌暴龙战士

最新推荐文章于 2023-06-21 21:00:40 发布

阅读量438

点赞数 2

文章标签： vue.js elementui javascript 前端 es6

本文链接：https://blog.csdn.net/weixin_60341434/article/details/127394294

版权

废话不多BB，这是使用Element UI搭出来的，使用了它的表格，它表格里有个组件，是type=“expand”，可以给每个表格增加一个独立的空间，可以通过作用域插槽进行添加渲染

<el-table-column type="expand" width="50">
    <template slot-scope="scope">
        <div v-for="(item1,index1) in scope.row.children" :key="item1.id" class="row1">
            <div class="card">
                <div class="col1">
                    <el-tag effect="dark" closable @close="closeTag(scope.row,item1.id)">{{item1.authName}}
                    </el-tag>
                    <span class="el-icon-right"></span>
                </div>
                <div class="card_box">
                    <div v-for="(item2,index2) in item1.children" :key="item2.id" class="row2">
                        <div class="col2">
                            <el-tag effect="dark" closable type="success"
                                @close="closeTag(scope.row,item2.id)">{{item2.authName}}</el-tag>
                            <span class="el-icon-right"></span>
                        </div>
                        <div>
                            <el-tag v-for="(item3,index3) in item2.children" :key="item3.id" effect="dark"
                                type="danger" closable @close="closeTag(scope.row,item3.id)">
                                {{item3.authName}}
                            </el-tag>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
</el-table-column>

接下来是分配权限的按钮，绑定点击事件，绑定ElementUI中的树形控件，可以使用本地的监听监听每一次触发的变化，也可以直接使用ref来获取原有的API，然后再模态框，难点在于需要通过递归来循环内部的数据，每点击一次分配就是一次请求，和渲染好的树形空间形成联动

        async setRole(){
            let arr=[
                ...this.$refs.refTree.getCheckedKeys(),
                ...this.$refs.refTree.getHalfCheckedKeys(),
            ]
            let rids = arr.join(",")
            let res= await this.$axios({
                url: `/api/private/v1/roles/${this.roleId}/rights`,
                method: "POST",
                data: {
                    roleId:this.roleId,
                    rids
                }
            }).catch(err=>err)
            this.showDialog=false
            this.getList()
            this.$message.success('分配成功');
        },
        async showRights(role){
            this.roleId=role.id
            this.getKeys(role,this.checkedKeys)
            this.showDialog=true
            let res=await this.$axios({
                url: `/api/private/v1/rights/tree`,
                method: "GET"
            })
            this.rightList = res.data
        },
        getKeys(role,arr){
            if(!role.children){
                return arr.push(role.id)
            }
            role.children.forEach(item=>{
                this.getKeys(item,arr)
            })
        },

这样高端大气上档次的功能就实现了

如果对你有帮助的话，就点个赞吧