vue 之 用Element ui 写一个简单的后台界面

Posted 2021-07-31 智商不够_熬夜来凑

安装和引入Element ui

https://element.eleme.cn/#/zh-CN/

界面分析

 整个界面分为三个板块：左侧的导航栏，右侧顶部的header以及内容界面（router-view）,参考：https://element.eleme.cn/#/zh-CN/component/container ，那主要就是实现elementui的导航菜单点击跳转事件。

为了界面清晰，左侧菜单和顶部单独写为组件

Home.vue

<template>
    <!--  -->
  <el-container class="el-container" 
  :style="'height:'+winHeight+'px'">
        <el-aside :width="asideWidth+'px'" >
          <Logo v-if="!iscollapse"/>
          <Tabbar :iscollapse="iscollapse"/>
        </el-aside>
        <el-container>
          <el-header>
          <Header v-on:showMenu="showMenu"/>
          </el-header>
          <el-main>
           <router-view></router-view>
          </el-main>
        </el-container>
  </el-container>
    <!--  -->
</template>

<script>
// @ is an alias to /src
//import { ajax } from '@/utils/ajax'
import Tabbar from '@/components/common/Tabbar'
import Header from '@/components/common/Header'
import Logo from '@/components/common/Logo'
export default {
  name: 'Home',
  components: {
    Tabbar,
    Header,
    Logo
  }
  ,data() {
      return {
        iscollapse:false,
        asideWidth:200,
        winHeight:window.innerHeight
      }
  }
  ,methods:{
    showMenu(e){
      if(e){
        this.asideWidth=200
        this.iscollapse=false
      }else{
        this.asideWidth=64
        this.iscollapse=true
      }
    }
    // ,navto(e){
    //   console.log(e)
    //   this.$router.push(e)
    // }
  }
}
</script>
<style lang="less">
  .el-aside {
    color: #333;
    border-right:1px solid #dbdbdb;

    .el-menu{
      border:none
    }
  }
 .el-header {
    color: #333;
    line-height: 60px;
    border-bottom:1px solid #dbdbdb;
  }
</style>

左侧导航Tabbar.vue

<template>
    <!-- 侧边栏菜单 -->
    <el-menu router :default-openeds="openeds" :collapse-transition='false' @select="handleOpen"
     :collapse="iscollapse" default-active="/Firm/Firm">
      <template v-for="item in menuList" >
        <!-- 有分组 -->
        <el-submenu v-if="item.child" :index="item.index"
         v-bind:key="item.title">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{item.title}}</span>
          </template>
          <template
          v-for="itemGroup in item.child">
          <!-- group -->
            <el-menu-item-group v-if="itemGroup.type=='group'"  v-bind:key="itemGroup.groupTitle" >
            <span slot="title" v-if="itemGroup.groupTitle&&itemGroup.groupTitle!=''">{{itemGroup.groupTitle}}</span>
            <el-menu-item v-for="child in itemGroup.child" v-bind:key="child.title"
             :index="child.index">{{child.title}}</el-menu-item>
          </el-menu-item-group>
          <!-- group -->
          <!-- option -->
            <el-submenu v-bind:key="itemGroup.groupTitle" :index="itemGroup.index" v-if="itemGroup.type=='option'">
                <template slot="title">{{itemGroup.groupTitle}}</template>
                <el-menu-item  v-for="child in itemGroup.child" v-bind:key="child.title"
             :index="child.index">{{child.title}}</el-menu-item>
            </el-submenu>
          <!-- option -->
          </template>

        </el-submenu>
          <!-- 无分组 -->
        <el-menu-item  v-else
         v-bind:key="item.title" :index="item.index">
          <i :class="item.icon"></i>
          <span slot="title">{{item.title}}</span>
        </el-menu-item>
      </template>
    </el-menu>
</template>
<script>
export default {
    name:"Tabbar",
    props: {
      iscollapse: Boolean
    },
    data(){
      return{
        openeds:['1'],
        menuList:[
          {
            icon:'el-icon-info',
            title:'基本信息',
            index:'1',
            disabled:false,
            child:[
              {
                groupTitle:'',
                type:'group',
                child:[
                  {
                    title:'企业信息',
                    index:'/Firm/Firm'
                  },
                  {
                    title:'资质证件',
                    index:'/Firm/Cert'
                  }
                ]
              }
            ]
          },
          {
            icon:'el-icon-s-promotion',
            title:'任务中心',
            index:'2',
            disabled:false,
            child:[
              {
                groupTitle:'计划安排',
                type:'group',
                child:[
                  {
                    title:'任务排班',
                    index:'/Task/Scheduling'
                  },{
                    title:'任务日历',
                    index:'/Task/Calendar'
                  }
                ]
              },
              {
                groupTitle:'设置',
                type:'group',
                child:[
                  {
                    title:'服务项目',
                    index:'/Task/Project'
                  },{
                    title:'任务类型',
                    index:'/Task/Mold'
                  }
                ]
              }
            ]
          }
          ,
          {
            icon:'el-icon-s-custom',
            title:'客户管理',
            index:'3',
            disabled:false,
            child:[
              {
                groupTitle:'',
                type:'group',
                child:[
                  {
                    title:'企业信息',
                    index:'3-1'
                  },
                  {
                    title:'资质证件',
                    index:'3-2'
                  }
                ]
              },
              {
                groupTitle:'其他',
                type:'option',
                index:'2-0',
                child:[
                  {
                    title:'企业信息',
                    index:'3-3'
                  },
                  {
                    title:'资质证件',
                    index:'3-4'
                  }
                ]
              }
            ]
          },
          {
            icon:'el-icon-s-data',
            title:'数据统计',
            index:'4-1',
            disabled:false
          }
        ]
      }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
            this.$emit("navto",key)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>

顶部Header.vue

<template>
<!-- 首页顶部菜单栏 -->
 <div class="header">      
    <div class="left">
    <i :class="showLeft?'el-icon-s-fold':'el-icon-s-unfold'" class="left-icon" @click="showMenu"></i>
    </div>
    <div class="right">
    <el-dropdown>
      <el-avatar class="avatar" :size="40" :src="avatarUrl"></el-avatar>
        <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>查看</el-dropdown-item>
        <el-dropdown-item>新增</el-dropdown-item>
        <el-dropdown-item>删除</el-dropdown-item>
      </el-dropdown-menu>          
    </el-dropdown>
    <div class="amdinText">王小虎</div>
    </div>           
</div>
            
</template>
<script>
export default {
    props:[],
    data(){
        return {
            showLeft:true,
            avatarUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            
        }
    },
    methods: {
        showMenu(){
            this.showLeft?this.showLeft=false:this.showLeft=true 
            this.$emit("showMenu",this.showLeft)
        }
    }
}
</script>
<style lang="less">
  .header{
    display: flex;
    font-size: 12px;
    .left{
      flex:10;
      .left-icon{
          cursor:pointer;
          font-size: 20px;
      }
    }
    .right{
      display: flex;
      flex:14;
      justify-content: flex-end;
      text-align: right;
      height:60px;
      line-height: 60px;
    }
    .avatar{
      margin:10px auto;
    }
    .amdinText{
      height: 60px;
      line-height: 60px;
      margin:0 5px;
      text-align: center;
    }
  }
</style>

实现点击菜单，router-view跳转

需要在路由中添加如下设置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Firm from '../views/Firm/Firm'

Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    redirect:'/Home'
  },{
    path: '/Home',
    name: 'Home',
    component: Home,
    redirect:Firm,
    children:[       //主要设置
      {
        path: '/Firm/Firm',
        name: 'Firm',
        component: Firm
      },
      {
        path: '/Firm/Cert',
        name: 'Cert',
        component: ()=>import('@/views/Firm/Cert')
      },
      {
        path: '/Task/Scheduling',
        name: 'Scheduling',
        component: ()=>import('@/views/Task/Scheduling')
      },
      {
        path: '/Task/Calendar',
        name: 'Calendar',
        component: ()=>import('@/views/Task/Calendar')
      },
      {
        path: '/Task/Project',
        name: 'Project',
        component: ()=>import('@/views/Task/Project')
      },
      {
        path: '/Task/Mold',
        name: 'Mold',
        component: ()=>import('@/views/Task/Mold')
      }
    ]
  },{
    path: '/About',
    name: 'About',
    component: About
  }
  
]

const router = new VueRouter({
  routes
})

export default router