Vue结合ElementUI封装菜单管理

男娘i 2023-09-24 22:58 48阅读 0赞

### 前言 ###

本文将介绍如何使用Vue和ElementUI开发一个简单的菜单管理系统。菜单管理系统可以让用户方便地添加、修改和删除菜单，是很多网站和应用程序的基础管理功能之一。

### 技术栈 ###

*  Vue.js
 *  ElementUI

### 功能 ###

*  展示菜单列表
 *  添加菜单
 *  修改菜单
 *  删除菜单

### 实现 ###

#### 1. 安装ElementUI ####

首先，我们需要在项目中安装ElementUI。可以使用npm安装：

npm install element-ui -S

然后在Vue的入口文件中引入ElementUI：

import Vue from 'vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.use(ElementUI)

#### 2. 创建菜单列表组件 ####

我们需要创建一个菜单列表组件，用于展示所有的菜单。

<template>
      <div>
        <el-table :data="menus" style="width: 100%">
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="url" label="URL"></el-table-column>
          <el-table-column prop="icon" label="图标"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="edit(scope.$index)">编辑</el-button>
              <el-button type="danger" size="small" @click="remove(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    export default {
        
      data() {
        
        return {
        
          menus: [
            {
         name: '首页', url: '/', icon: 'el-icon-menu' },
            {
         name: '用户管理', url: '/user', icon: 'el-icon-menu' }
          ]
        }
      },
      methods: {
        
        edit(index) {
        
          // TODO: 编辑菜单
        },
        remove(index) {
        
          // TODO: 删除菜单
        }
      }
    }
    </script>

#### 3. 创建菜单表单组件 ####

我们还需要创建一个菜单表单组件，用于添加和修改菜单。

<template>
      <el-form :model="menu" :rules="rules" ref="menuForm" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="menu.name"></el-input>
        </el-form-item>
        <el-form-item label="URL" prop="url">
          <el-input v-model="menu.url"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="menu.icon"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
    
    <script>
    export default {
        
      data() {
        
        return {
        
          menu: {
        
            name: '',
            url: '',
            icon: ''
          },
          rules: {
        
            name: [
              {
         required: true, message: '请输入名称', trigger: 'blur' }
            ],
            url: [
              {
         required: true, message: '请输入URL', trigger: 'blur' }
            ],
            icon: [
              {
         required: true, message: '请输入图标', trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        
        submit() {
        
          this.$refs.menuForm.validate(valid => {
        
            if (valid) {
        
              // TODO: 提交菜单
            }
          })
        },
        reset() {
        
          this.$refs.menuForm.resetFields()
        }
      }
    }
    </script>

#### 4. 添加菜单 ####

在菜单列表组件中，我们添加一个“添加菜单”按钮，点击后弹出菜单表单组件。

<template>
      <div>
        <el-table :data="menus" style="width: 100%">
          
        </el-table>
        <el-button type="primary" @click="add">添加菜单</el-button>
        <el-dialog :visible.sync="dialogVisible" title="添加菜单">
          <menu-form></menu-form>
        </el-dialog>
      </div>
    </template>
    
    <script>
    import MenuForm from './MenuForm.vue'
    
    export default {
        
      components: {
        
        MenuForm
      },
      data() {
        
        return {
        
          menus: [
            {
         name: '首页', url: '/', icon: 'el-icon-menu' },
            {
         name: '用户管理', url: '/user', icon: 'el-icon-menu' }
          ],
          dialogVisible: false
        }
      },
      methods: {
        
        add() {
        
          this.dialogVisible = true
        }
      }
    }
    </script>

#### 5. 修改菜单 ####

在菜单列表组件中，我们为每个菜单添加“编辑”按钮，点击后弹出菜单表单组件，并将要修改的菜单数据传递给表单组件。

<template>
      <div>
        <el-table :data="menus" style="width: 100%">
          
        </el-table>
        <el-dialog :visible.sync="dialogVisible" title="添加菜单">
          <menu-form :menu="menu"></menu-form>
        </el-dialog>
      </div>
    </template>
    
    <script>
    import MenuForm from './MenuForm.vue'
    
    export default {
        
      components: {
        
        MenuForm
      },
      data() {
        
        return {
        
          menus: [
            {
         name: '首页', url: '/', icon: 'el-icon-menu' },
            {
         name: '用户管理', url: '/user', icon: 'el-icon-menu' }
          ],
          dialogVisible: false,
          menu: null
        }
      },
      methods: {
        
        edit(index) {
        
          this.menu = this.menus[index]
          this.dialogVisible = true
        },
        remove(index) {
        
          // TODO: 删除菜单
        }
      }
    }
    </script>

#### 6. 删除菜单 ####

在菜单列表组件中，我们为每个菜单添加“删除”按钮，点击后删除该菜单。

<template>
      <div>
        <el-table :data="menus" style="width: 100%">
          
        </el-table>
        <el-button type="primary" @click="add">添加菜单</el-button>
        <el-dialog :visible.sync="dialogVisible" title="添加菜单">
          <menu-form :menu="menu"></menu-form>
        </el-dialog>
      </div>
    </template>
    
    <script>
    import MenuForm from './MenuForm.vue'
    
    export default {
        
      components: {
        
        MenuForm
      },
      data() {
        
        return {
        
          menus: [
            {
         name: '首页', url: '/', icon: 'el-icon-menu' },
            {
         name: '用户管理', url: '/user', icon: 'el-icon-menu' }
          ],
          dialogVisible: false,
          menu: null
        }
      },
      methods: {
        
        add() {
        
          this.dialogVisible = true
        },
        edit(index) {
        
          this.menu = this.menus[index]
          this.dialogVisible = true
        },
        remove(index) {
        
          this.menus.splice(index, 1)
        }
      }
    }
    </script>

### 总结 ###

本文介绍了如何使用Vue和ElementUI开发一个简单的菜单管理系统。我们使用了ElementUI的表格、表单、按钮和对话框等组件，实现了菜单的展示、添加、修改和删除功能。这个菜单管理系统是一个非常基础的管理功能，可以用于很多网站和应用程序中。