element-ui el-tree实现权限配置

element文档
核心代码块

      <el-dialog :visible.sync="visible" title="菜单授权" @close="checkedKeys = []" append-to-body>
            <el-tree 
                     ref="tree"
                     :data="menuList"
                     show-checkbox
                     default-expand-all
                     check-on-click-node
                     node-key="id"
                     :default-checked-keys="checkedKeys"
                     @check="check"
                     :props="defaultProps">
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="visible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="saveRoleMenu">确 定</el-button>
              </span>
        </el-dialog>

  data() {
   
            return {
   
                visible: false,
                menuList: [],
                defaultProps: {
   
                    children: 'children',
                    label: 'name'
                },
                checkedKeys: [], // 已配置的菜单
                checkedMenuIds: [],
                roleId: "",
                boolChecked: false, // 用于判断是否点过菜单选项，确认是否调用过check方法
            }
        },

第一步 获取树形结构menuList，根据自己字段配置defaultProps， node-key
第二步 配置默认选中，即checkedKeys，
问题：若选中项有（系统管理，角色管理，菜单管理）这个数组，父节点选中，则子节点会全部选中，就会出现用户管理也被选中了（意思就是在设置默认选中的时候只设置叶子节点）
解决：后端封装数据，若父节点有子节点，把子节点挂在父节点上。返回的List不是树形结构，但是List里每个节点都是树形结构。前端只需要把List里的每个元素的叶子节点放进checkedKeys就好了。 我之前已经写好了方法，直接调用就好，主要是方便，可根据自己需要调整。（ 代码里需要的类和方法放在了最后）

 // 这里返回的不是树形结果，只是把父节点的子节点set进去 原因 element-ui el-tree 在setCheckedKeys会把所有子节点都选中
    @Override
    public List<MenuVo> getRoleMenuList(Long roleId) {
   
        List<MenuVo> menuList = menuMapper.getRoleMenuList(roleId);
        if (menuList == null || menuList.size() == 0) {
   
            return null;
        }
        // 构建children
        List<MenuVo> menuVoList = new ArrayList<>();
        // 先找到所有的一级菜单
        for (MenuVo menu : menuList) {