<el-submenu index="1-4"> <template slot="title">测试5</template> <el-menu-item index="1-4-1">选项4-1</el-menu-item> </el-submenu> --></el-menu-item-group></el-submeu></el-menu></el-col></el-row></template>.el-menu-vertical-demo{ height: 645px }export default { na...
<el-submenu index="2"> <template slot="title">達豐中国</template> <el-menu-item index="about">達豐概况</el-menu-item> <el-menu-item index="culture">達豐文化</el-menu-item> <el-menu-item index="history">達豐年鉴</el-menu-item> <el-menu-item index="trailer">宣传片</el-menu-it...
达成这样的效果,其实根本在于,通过开启el-menu的route属性,点击menu菜单后会进行路径的跳转,但是你跳转的路由地址必须写为根组件的子路由地址,否则会直接进行整个页面的跳转,失去了这样的效果。 然后看一下el-tabs,这里放一下elementUI的官方文档 子元素都是可以通过for遍历循环出来的,所以到了这里,基本的思路应该就...
<el-container style="height: 100vh; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <!-- <el-menu :default-openeds="['1', '3']"> 表示默认展开第几个菜单 --> <!-- 1对应了el-submenu index="1" --> <!-- :default-openeds...
8 接着我们继续将含有子路由的菜单内容提取出来，el-submenu是个菜单项没有实际内容，所以我们不需要对该项进行跳转。直接使用template标签实现即可。在显示图标和标题时我们最好先对路由进行过滤，如果存在则显示，不然容易报错的。这时候我们只是获取了一个带有展开/收起箭头的菜单项，里面没有实际内容的，要想在子...
选择倒数第二个,复制到项目的 Home页面,需要编写less样式,所以要安装less 和 less-loader 这两个包: npm i less 和 npm i less-loader@5.0.0 Home.vue 添加了<el-container style="height: 100%"> ...
<el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :unique-opened="true" :default-active="$route.path" @select="handleSelect"> <el-submenu index="1"> ...
我们要做的,就是开始理解Vue增删页面的模式,组件和路由(就是网页链接URL)的跳转模式。 大致理解Vue设计思想 首先要理解的是vue的设计理念是怎样的?在我眼里,组件化是vue最为成功的一项涉及。组件化这个特性把一整个网站都打散成了很小的一个又一个部分。举个例子,看目前的目录下,有三个文件:整个项目目录下的ind...
测验</el-menu-item> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项1</el-menu-item> <el-menu-item index="2-4-2">选项2</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item> </el-submenu> </el-submenu...
测验</el-menu-item> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项1</el-menu-item> <el-menu-item index="2-4-2">选项2</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item> </el-submenu> </el-submenu...