Vue开发菜单管理页面

最新推荐文章于 2024-07-18 15:15:07 发布

生活赐苦也赐甜

最新推荐文章于 2024-07-18 15:15:07 发布

阅读量2.3k

点赞数

文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/weixin_52093275/article/details/130763712

版权

本文档介绍了如何使用Vue.js开发菜单管理页面，包括新建菜单管理页面、编写页面代码、配置路由、设置图标和使用菜单管理API。通过这些步骤，可以实现前端自定义菜单配置的功能。

摘要由CSDN通过智能技术生成

我们一般后台管理的项目是又后台去配置路由和权限的，而我们前端需要添加菜单就需要我们自己写一个菜单管理的页面进行配置了

1. 新建菜单管理页面

在views下新建menu包，并在此包下新建SysMenu.vue页面

2. 菜单管理页面代码

<!-- 菜单管理页面 -->
<template>
 <div>
   <!-- 1、新增按钮区域 -->
   <div style="display: flex;justify-content: flex-start">
     <el-button type="primary" icon="el-icon-plus" size="small" @click="addFolder">新增</el-button>
   </div>
   <!-- 2、分隔线区域 -->
   <el-divider style="margin-top: 20px"></el-divider>
   <!-- 3、菜单表格区域 -->
   <el-table
     :data="menuTreeList"
     style="width: 100%;margin-bottom: 20px;"
     row-key="id"
     border
     :default-expand-all="false"
     height="72vh"
     :tree-props="{children: 'children'}">
     <el-table-column
       prop="name"
       label="菜单名称"
>
     </el-table-column>
     <el-table-column

       prop="type"
       label="类型">
       <!--进行条件判断-->
       <template slot-scope="scope">
         <!--获取type属性，进行条件判断-->
         <el-tag v-if="scope.row.type===0">目录</el-tag>
         <el-tag type="success" v-else-if="scope.row.type===1">菜单</el-tag>
         <el-tag type="info" v-else>按钮</el-tag>
       </template>
     </el-table-column>
     <el-table-column

       prop="icon"
       label="图标">
       <template slot-scope="scope">
         <i :class="scope.row.icon"></i>
       </template>
     </el-table-column>
     <el-table-column prop="perms" label="权限标识"/>
     <el-table-column prop="path" label="路由地址"/>
     <el-table-column prop="component" label="组件路径"/>
     <el-table-column prop="sortValue" label="排序"/>
     <el-table-column label="status" width="80">
       <template slot-scope="scope">
         <el-switch
           :value="scope.row.status === 1" :disabled="true">
         </el-switch>
       </template>
     </el-table-column>
     <el-table-column prop="createTime" label="创建时间" width="160"/>
     <el-table-column label="操作" width="180" fixed="right">
       <template slot-scope="scope">
         <el-button type="success" v-if="scope.row.type !== 2" icon="el-icon-plus" size="mini" @click="addLastNode(scope.row)" title="新增"/>
         <el-button type="primary" icon="el-icon-edit" size="mini" @click="alertNode(scope.row)" title="修改"/>
         <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteMenuData(scope.row.id)" title="删除" :disabled="scope.row.children.length > 0"/>
       </template>
     </el-table-column>
   </el-table>
   <!-- 4、新增、更新弹窗区域 -->
   <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%" @open="onOpen" @close="onClose">
     <el-form ref="menuForm" :model="menu" :rules="menuRules" size="small" label-width="150px">
       <el-form-item v-if="menu.parentName !== undefined" label="上级目录" prop="parentName">
         <el-input v-model="menu.parentName" :disabled='true' clearable :style="{width: '100%'}"></el-input>
       </el-form-item>
       <el-form-item label="菜单类型" prop=