我们首先给项目做一个全局布局,布局的样式选择左侧栏、头部和主体样式。 复制Container容器中布局的代码 应用到项目Main组件中 3.2.配置Main组件路由 在router文件夹下配置index.js文件,添加Main组件路由映射关系。 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) // 导入组件 const...
中间红色框的范围为文件的可显示区域,当导入文件过多高度不够时,会触发overflow-y: auto;开启滚动条,可滚动显示。 那么问题就来了,小编在el-element中发现el-option(就是下拉框)的z-index 比较大(小编这边显示是z-index:2003), 会覆盖在其他元素上面。 看了链接楼主的分析后发现还是不会(小编太笨了),但也学...
element-ui 左侧导航栏的布局实现,效果如下图 涉及的组件: App.vue router.js layout.vue: nav.vue(左侧导航区域,内含循环小组件 asideBarItem.vue)、AppMain.vue (右侧主内容区域) 项目结构如下: 1、App.vue,通过router路由来控制页面的渲染, 很简单,一个router-view <template> <keep-alive> // 缓存组...
element ui 左侧导航栏 <el-menu class="left-menu" :default-active="$route.name" :unique-opened="true" :collapse="isCollapse"> <template v-for="(m, x) in menuOpts.data" > <el-submenu v-if="m.children.length && m.show" :index="m.value" class="level1-menu" :key="x"> <...
简介:Vue框架Element UI教程-左侧导航栏(四) 接前三篇, Vue框架Element UI教程-安装环境搭建(一)https://www.jianshu.com/p/ab3c34a95128 在用Element UI框架的时候 <template><el-row class="tac"><el-col :span="4"><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@c...
-- 左侧导航 --></el-aside><el-main><router-view/><!-- 路由出口 --></el-main></el-container><el-footer>Footer</el-footer></el-container></template>import { Location, } from '@element-plus/icons-vue' function handleOpen(key, keyPath) { console.log(...
/!*刷新后导航还是高亮显示且展开*!/ //或者直接$route.name //console.log(this.$route.path) /home/list 只取list就行 和el-menu-item的index对应 return this.$route.path.replace('/home/', ''); }*/ }, data() { return {} },
刷新页面,左边的菜单栏就出来了,效果如下: 这样左侧我们也做好了,但是点击左边的菜单会进入一个空白页面,因为我们开启了路由但是没有配置 四、其他组件 上面我们已经写好了左侧导航,并且点击能跳转到对应的路由,接下来我们来写对应的组件,我们把组件都放在src下的views下面。
vue+element-ui 实现多级侧边栏导航 @效果图 <>导航菜单 <!--导航菜单--> <el-menu router :default-active="$route.path" v-show="!collapsed" unique-opened> <!-- 左侧导航栏抽取循环部分 将路由列表传给子组件--> </el-menu> <>asideBarItem组件封装 <template> <el-submenu :index="index...
今天做项目的时候要做一个折叠左侧导航栏的功能。准备使用这个饿了么UI自带的折叠图标。图标长这样的: 但是引入了以后,发现图标不生效。在页面中没有显示出来。控制台审查一下元素发现,i标签倒是有,但是宽高为0(宽高为0就相当于没有),审查元素的图示如下: ...