79.(前端)分配权限数据回显——element-ui的树形结构回显功能的使用

1.概述

2.element-ui树形结构的数据回显使用

2.1default-checked-keys属性使用

使用此属性，需要把本身存在的属性做成一个数组，传递给此属性

<!--:default-expanded-keys数据回显，一定要使用node-key添加一个唯一标识  -->
<el-tree 
            :default-checked-keys="keyList"  
            node-key = "id"
            :data="menuList" 
            :props="menuProps" 
            show-checkbox></el-tree>

2.2测试

先往keyList添加点数据

2.3基本逻辑思路

要注意以下几步操作：

1. 需要使用getKeys获取没行中的菜单
2. 关闭时候需要清空列表中的元素，否则点击下一个时候还会存在
3. 点击取消时候也需要使用关闭函数dialogClose
4. 展现列表时，重新获取全部数据
5. 对于没有子节点的数据，这里没有勾选，因为真实开发中，不可以只有一个主节点的

3.树形结构的默认展开

4.效果展示

5.完整代码展示

<!-- components/power/Role.vue -->
<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <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-row :gutter="20">
                <el-col :span="2">
                    <el-button type="primary" icon="el-icon-circle-plus-outline">新增角色</el-button>
                </el-col>
            </el-row>
            <!-- 表格显示 -->
            <el-row>
                <el-col>
                    <el-table :data="roleList" border style="width:100%">
                        <!-- 展开行的使用 -->
                        <el-table-column type="expand">
                            <template slot-scope="scope">
                                <!-- 为每个权限用标签绑定，让第一行存在上边框，其余都是下边框 -->
                                <el-row :class="['bottom', i==0?'top':'', 'rcenter']" v-for=" (m,i) in scope.row.menu" :key="m.id">
                                    <el-col :span="8">
                                        <!-- closable添加叉号属性 添加点击属性 -->
                                        <el-tag closable @click="removeMenu(scope.row,m.id)">{{m.name}}</el-tag>
                                        <span class="el-icon-caret-right"></span>
                                    </el-col>
                                    <el-col :span="14">
                                        <el-tag closable @click="removeMenu(scope.row,sm.id)" type="success" v-for="sm in m.children" :key="sm.id">
                                            {{sm.name}}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column type="index"></el-table-column>
                        <el-table-column prop="id" label="ID"></el-table-column>
                        <el-table-column prop="name" label="角色名称"></el-table-column>
                        <el-table-column prop="desc" label="角色详情"></el-table-column>
                        <el-table-column prop="level" label="操作" width="300px">
                            <template slot-scope="scope">
                                <el-button size="mini" type="success" icon="el-icon-edit">修改</el-button>
                                <el-button size="mini" type="danger" icon="el-icon-edit">删除</el-button>
                                <el-button size="mini" type="warning" icon="el-icon-edit" @click="showMenuDialog(scope.row)">分配权限</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog title="分配权限" :visible.sync="menuDialogVisible" width="40%" :before-close="dialogClose">
            <!--:default-expanded-keys数据回显，一定要使用node-key添加一个唯一标识  -->
            <!--  -->
            <el-tree 
            :default-checked-keys="keyList"  
            node-key = "id"
            default-expand-all
            :data="menuList" 
            :props="menuProps" 
            show-checkbox></el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogClose()">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

export default {
    data () {
        return {
            roleList: [],
            menuDialogVisible:false,
            menuProps:{
                label: 'name',
                children: 'children'
            },
            menuList:[],
            keyList:[]
        }
    },
    created(){
        this.getRoleList()
        // this.getMenuList()
    },
    methods: {
        async getRoleList() {
            const { data: res } = await this.$axios.get('/api/role')
            if (res.status !== 200) return this.$msg.error(res.msg)
            console.log(res.data);
            this.roleList = res.data
        },
        removeMenu(row,mid) {
            this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { data: resp } = await this.$axios.get(`/api/del_menu/${row.id}/${mid}`)
                if (resp.status !== 200) return this.$msg(resp.msg)
                this.$msg({
                    type: 'success',
                    message: '删除成功!'
                });
                // this.getRoleList()
                // console.log(row.id);
                // console.log(mid);
                row.menu = resp.data
            }).catch(() => {
                this.$msg({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        showMenuDialog(row){
            this.getMenuList()
            this.menuDialogVisible = true
            // 显示菜单时调用，用于数据回显
            this.getKeys(row.menu)
        },
        async getMenuList(){
            const{data :resp} = await this.$axios.get('/api/menu')
            if (resp.status !== 200) return this.$msg.error(resp.msg)
            this.menuList = resp.data
        },
        // 获取menu中的元素
        getKeys(menu) {
            menu.forEach(item => {
                item.children.forEach(i => {    
                    this.keyList.push(i.id)
                })
            })
        },
        dialogClose(){
            this.keyList = []
            this.menuDialogVisible = false
        }
    }
   
}

</script>

<style lang="less" scoped>

    .top{
        border-top: 1px solid #eee
    }
    .bottom{
        border-top: 1px solid #eee
    }
    .el-tag{
        margin: 10px;
    }
    .rcenter{
        display:flex;
        align-items: center;
    }
</style>

这篇好文章是转载于：学新通技术网