Vue结合ElementUI封装菜单管理

三拾老师

于 2023-03-10 14:36:45 发布

阅读量874

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_27244301/article/details/129442338

版权

前言

本文将介绍如何使用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>