2020 zero base to quickly develop Vue family bucket develop the electricity business management system (Element-UI) [] permissions list

Article Directory

1 Introduction
2, the list of permissions

2.1 shows the list of permissions by routing components
2.2 drawing and breadcrumbs card view
2.3 calls the API to get the list of permissions data
2.4 rendering permissions list of UI structure

3, rights management business analysis
4 Conclusion
Click to enter Vue❤ learn column ~

1 Introduction

寒假是用来反超的！Vue put together to learn, this blog is about the permissions list, please enlighten ~

2, the list of permissions

2.1 shows the list of permissions by routing components

Here Insert Picture Description

2.2 drawing and breadcrumbs card view

 	<!--面包屑导航区-->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区域-->
    <el-card >
    </el-card>

Here Insert Picture Description

2.3 calls the API to get the list of permissions data

	 //获取所有的权限
    async getRightsList(){
        const {data:res} = await this.$http.get('rights/list')
        if(res.meta.status !== 200) return this.$message.error('获取权限列表失败!')
        this.rightsList = res.data
        console.log(res)
    }

Here Insert Picture Description

2.4 rendering permissions list of UI structure

	 <!--卡片视图区域-->
    <el-card >
        <!--权限列表区域-->
        <el-table :data="rightsList" border stripe>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="权限名称" prop="authName"></el-table-column>
            <el-table-column label="路径" prop="path"></el-table-column>
            <el-table-column label="权限等级" prop="level">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.level == '0' ">一级</el-tag>
                    <el-tag type="success" v-else-if="scope.row.level == '1' ">二级</el-tag>
                    <el-tag type="warning" v-else>三级</el-tag>
                </template>
                
            </el-table-column>
        </el-table>
    </el-card>

Here Insert Picture Description

3, rights management business analysis

What can be controlled by a rights management module different users can be controlled by specific character manner, i.e., each user is assigned a specific role, including different functional roles permissions
Here Insert Picture Description

4 Conclusion

At this point, our function is complete!
Here Insert Picture Description

Vue family bucket develop the electricity business management system code cloud address, welcome to learn together ~

https://gitee.com/Chocolate666/vue_shop

Finally, after reading this blog, I feel quite helpful, can continue to view the contents of other columns wailing, Vue together to learn it ~
Here Insert Picture Description