Vue+Vue-router+ElementUI实现简单的用户管理界面_vue.js + element ui多用户管理简单功能-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42337039/article/details/107901966

本文介绍了如何使用Vue.js、Vue-router和ElementUI构建一个简单的用户管理界面。通过分析项目结构，包括menu-config.js、NavMenu.vue、Header.vue、App.vue等关键组件，展示了不依赖config的配置方式。同时，文章还提到了index.js、main.js和BasicLayout的实现，并指出可以根据需求添加更多功能。最终实现的页面效果良好。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目结构
在这里插入图片描述
代码部分
menu-config.js

module.exports = [{
   
    name: '员工资料',
    id: 'basic',
    icon: 'th-large',
    sub: [{
   
      name: '基本资料',
      componentName: 'BasicLayout'
    }, {
   
      name: '高级资料',
      componentName: 'BasicContainer'
    }]
  }, {
   
    name: '人事管理',
    id: 'form',
    icon: 'wpforms',
    sub: [{
   
      name: '培训',
      componentName: 'FormRadio'
    }, {
   
      name: '考评',
      componentName: 'FormCheckbox'
    }]
  }]

NavMenu.vue

<template>
  <el-row class="tac">
  <el-col :span="24">
    <el-menu
      class="el-menu-vertical-demo"
      router
      unique-opened
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">

      <el-submenu v-for="item in menu" :index="item.id" :key="item.id">
        <template slot="title">
          <icon :name="item.icon"></icon>
          <span v-text="item.name"></span>
        </template>
        <el-menu-item-group class="over-hide" v-for="sub in item.sub" :key="sub.componentName">
          <el-menu-item :index="sub.componentName" v-text="sub.name">
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

    </el-menu>
  </el-col>
</el-row>
</template>

<style scoped>
  .over-hide{
   
    overflow: hidden;
  }
</style>

<script>
  import menu from '@/config/menu-config'
  export default {
   
    data () {
   
      return {
   
        menu: menu
      }
    },
    methods: {
   
      handleOpen (key, keyPath) {
   
        console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
   
        console.log(key, keyPath)
      }
    }
  }
</script>

Header.vue

<template>
    <el-row>
        <el-col :span="24">
            <div class="head-wrap">用户管理系统</div>
        </el-col>
    </el-row>
</template>
<style scoped>

&