我们一般后台管理的项目是又后台去配置路由和权限的,而我们前端需要添加菜单就需要我们自己写一个菜单管理的页面进行配置了
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=