Vue + Element UI 实现权限管理系统 前端篇（十四）：菜单功能实现菜

Vue + Element UI 实现权限管理系统 前端篇（十四）：菜单功能实现 

菜单功能实现

菜单接口封装

菜单管理是一个对菜单树结构的增删改查操作。

提供一个菜单查询接口，查询整颗菜单树形结构。

http/modules/menu.js 添加 findMenuTree 接口。

import axios from '../axios'

/* 
 * 菜单管理模块
 */

 // 保存
export const save = (data) => {
    return axios({
        url: '/menu/save',
        method: 'post',
        data
    })
}
// 删除
export const batchDelete = (data) => {
    return axios({
        url: '/menu/delete',
        method: 'post',
        data
    })
}
// 查找导航菜单树
export const findNavTree = (params) => {
    return axios({
        url: '/menu/findNavTree',
        method: 'get',
        params
    })
}
// 查找导航菜单树
export const findMenuTree = () => {
    return axios({
        url: '/menu/findMenuTree',
        method: 'get'
    })
}

菜单管理界面

菜单管理界面是使用封装的表格树组件显示菜单结构，并提供增删改查的功能。

Menu.vue

其中对表格树组件进行了简单的封装。

views/Core/TableTreeColumn.vue

测试效果

最终测试效果下图所示。

源码下载

后端：kitty: 基于Spring Boot、Spring Cloud、Vue.js 、Element UI实现，采用前后端分离架构的权限管理系统，JAVA快速开发平台。

前端：kitty-ui: Kitty 前端，基于 Vue + Element 实现的权限管理系统。