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

1.概述

在上一篇文章的基础，做了测试，发现存在两个问题
第一，我们在点开权限分配时，没有把原本存在的数据显示在内容中——这里需要数据的回选。
第二，我们在选中一些内容后，下次点击时，还是存在选中的内容——这里需要清空上次选择过的数据。

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

2.1default-checked-keys属性使用

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

<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.完整代码展示

<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">
                                        
                                        <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">
            
            
            <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>