vuejs之结合使用vue+element-ui搭建后台管理页面

前端开发作者： 2024-08-23 09:15:01

1、新建一个vue项目 2、安装element-ui 进入到该项目目录，输入：npm install --save element-ui 之后可以在package.json中查看是否下载了相关依赖最

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

<template>
  div id="app">
    el-container style="height: 500px; border: 1px solid #eee">
      el-aside width="200px"
                style="background-color: rgb(238,241,246)">
        el-menu :default-openeds="['1','3']">
          el-submenu index="1">
            template slot="title">
              i class="el-icon-message"></i>导航一</el-menu-item-group>分组一el-menu-item ="1-1">选项1el-menu-item="1-2">选项2el-menu-item-group title="分组2"="1-3">选项3="1-4">选项4="1-4-1">选项4-1el-submenu="2"="el-icon-menu">导航二="2-1"="2-2"="2-3"="2-4"="2-4-1"="3"="el-icon-setting">导航三="3-1"="3-2"="3-3"="3-4"="3-4-1"el-menuel-aside>

      el-containerel-header ="text-align: right; font-size: 12px"el-dropdown="el-icon-setting"
               style="margin-right: 15px"el-dropdown-menu ="dropdown"el-dropdown-item>查看>新增>删除el-dropdown-menuspan>王小虎el-header>

        el-mainel-table :data="tableData"el-table-column prop="date"
                             label="日期"
                             width="140"el-table-column="name"="姓名"="120"="address"="地址"el-tablediv>
>

>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
script
export default {
  data () {
    const item = {
      date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(20).fill(item)
    }
  }
};
>

:default-openeds：默认展开的菜单，通过index属性进行设置。例如在el-submenu中的index='1'，如果在这里设置default-openeds='["1"]'，说明默认打开的index=1的子菜单。
:default-active：默认选中。可以这么设置:default-active=" '1-1' "。

index：菜单的下标，文本类型，不能是数字类型。

我们可以改造成这样：即再添加一级菜单。

="['1']"
                 :default-active="'1-1'"="1-3-1">选项1-3-1="1-3-2">选项1-3-2>

          >

h1>这是page1style scoped>

="['0','1']"
                 :router="$route"el-submenu v-for="(item,index) in $router.options.routes"
                      :key="index"
                      :index="index+''">{{item.name}}el-menu-item v-for="(item2,index2) in item.children"
                          :key="index2"="item2.path"
                      :class="$route.path==item2.path?'is-active':''">{{item2.name}}>
          router-view>
        >

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Test from '../views/Test.vue'
import PageOne from '../views/PageOne.vue'
import PageTwo from '../views/PageTwo.vue'
import PageThree from '../views/PageThree.vue'
import PageFour from '../views/PageFour.vue'
import Index from '../views/Index.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: "/",name: "导航一"'页面一''页面二''页面三''页面四'new VueRouter({
  mode: 'history'default router