vue后台系统管理项目-菜单权限管理功能

置顶船长在船上

已于 2023-07-24 14:27:38 修改

阅读量6.7k

点赞数 22

CC 4.0 BY-SA版权

分类专栏： Vue vue项目非常实用的功能整理 vue后台系统管理项目全套功能文章标签：前端 javascript vue.js elementui

于 2022-09-15 11:38:59 首次发布

本文链接：https://blog.youkuaiyun.com/SmartJunTao/article/details/126864993

vue项目非常实用的功能整理同时被 3 个专栏收录

27 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

vue后台系统管理项目全套功能

15 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

Vue

198 篇文章

订阅专栏

本文介绍了基于Vue和Element-UI的后台管理系统中菜单权限管理的实现，包括菜单列表查询、筛选、分页、新建、编辑、删除、禁用等功能。详细阐述了各组件的样式设置、数据定义、接口调用以及方法处理，如表格样式、搜索重置、分页处理、接口请求等。此外，还提供了事件处理，如查看详情、启用禁用菜单的接口调用。

vue后台系统管理项目：

技术选型：vue + element-ui

菜单权限管理模块功能

菜单列表查询，通过（菜单名称；类型分为：全部、一级菜单、二级菜单；状态：启用、禁用）进行数据搜索。

查询、重置功能

菜单列表分页实现

菜单详情查看、菜单禁用、菜单编辑、删除操作

新建菜单功能包括对（菜单名称、类型、排序、url地址、图标、备注、父菜单选择）选项信息的配置。

vue后台系统管理项目

menu.vue 菜单页面

菜单名称、类型、状态搜索条件
菜单列表table
分页器

table属性：

border：是否带有纵向边框
highlight-current-row：是否要高亮当前行
header-cell-style 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style
cell-style 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style

<!--菜单管理-->
<template>
  <div class="p20">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumbTips">
      <el-breadcrumb-item :to=