杭州公司网站制作维护,版纳网站建设,网络营销与电子商务的关系,中国风配色网站系列文章目录
一、elementui 导航菜单栏和Breadcrumb 面包屑关联
二、elementui 左侧导航菜单栏与main区域联动
三、elementui 中设置图片的高度并支持PC和手机自适应
四、elementui 实现一个固定位置的Pagination#xff08;分页#xff09;组件 文章目录 系列文章目录…系列文章目录
一、elementui 导航菜单栏和Breadcrumb 面包屑关联
二、elementui 左侧导航菜单栏与main区域联动
三、elementui 中设置图片的高度并支持PC和手机自适应
四、elementui 实现一个固定位置的Pagination分页组件 文章目录 系列文章目录前言一、实现步骤1.el-menu中设置属性router为true2.el-menu-item中设置路由 route/3.el-main里设置路由出口4.在路由inde.js文件中设置要关联的页面 二、完整代码1.HomeView.vue2.路由inde.js 实现效果1.访问地址http://101.43.20.1122.实现联动效果 总结 前言
elementui vue2.0 点击导航栏不同的菜单列表,可以在右侧 (Main) 主体区域显示不同的组件页面
一、实现步骤
1.中设置属性router为true
el-menu :routertrue/el-menu2.中设置路由 route“/”
el-menu-item route//el-menu-item3.里设置路由出口 el-main!-- 路由出口渲染与当前菜单项关联的组件 --router-view/router-view/el-main4.在路由inde.js文件中设置要关联的页面
{path: /,name: home,component: HomeView,children: [{path: /filmview,component: () import( ../views/FilmView.vue)}]
},二、完整代码
1.HomeView.vue
templatedivel-container styleborder: 1px solid #cccel-headerHeader/el-headerel-containerel-aside width200px stylebackground-color: #545c64el-menudefault-active2classel-menu-vertical-demoopenhandleOpenclosehandleClosebackground-color#545c64text-color#fffactive-text-color#ffd04b:routertrue el-submenu index1template slottitlei classel-icon-video-camera-solid/i电影/templateel-menu-item-group!-- template slottitle新片*热片/template--el-menu-item index1-1 route/filmviewel-badge valuehot classitem2024新片精品 /el-badge/el-menu-itemel-menu-item index1-2 route/el-badge valuehot classitem2024必看热片 /el-badge/el-menu-itemel-menu-item index1-3 route/经典大片/el-menu-item/el-menu-item-group/el-submenuel-submenu index2template slottitlei classel-icon-s-platform/i电视剧/templateel-menu-item-group!-- template slottitle新片*热片/template--el-menu-item index2-1el-badge valuehot classitem2024最新上架/el-badge/el-menu-itemel-menu-item index2-22024必看喜剧/el-menu-itemel-menu-item index2-3古装/el-menu-item/el-menu-item-group/el-submenuel-submenu index3template slottitlei classel-icon-camera-solid/i动漫/templateel-menu-item-groupel-menu-item index3-1内地/el-menu-itemel-menu-item index3-2日本/el-menu-itemel-menu-item index3-3欧美/el-menu-item/el-menu-item-group/el-submenu/el-menu/el-asideel-containerel-main!-- 路由出口渲染与当前菜单项关联的组件 --router-view/router-view/el-mainel-footer styleheight: 20px;color: #ff1b08;div stylefont-size: 10px底部/div/el-footer!--el-footer styleheight: 20px;color: #ff1b08;div stylefont-size: 10px【影视天堂】提示该网站为个人网站服务不稳定喜欢的资源可以保存到自己网盘哦/div/el-footer--/el-container/el-container!--el-containerel-mainel-table :datatableDatael-table-column propdate label日期 width140/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propaddress label地址/el-table-column/el-table/el-main/el-container--/el-container/div
/templatestyle scoped.el-aside {color: #48b7d1;}.el-main {background: #eaedf2;height: calc(100vh - 100px);}body .el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.item {margin-top: 0px;margin-right: 40px;}
/stylescriptexport default {name: HomeView,data() {const item {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄};return {tableData: Array(20).fill(item)}},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}};/script2.路由inde.js
{path: /,name: home,component: HomeView,children: [{path: /filmview,component: () import( ../views/FilmView.vue)}]
},实现效果
1.访问地址http://101.43.20.112
2.实现联动效果
PS:最后将左侧菜单栏调整成水平关联展示 总结
上面是实现水平导航菜单栏与main区域联动后的个人视频分享网站最新效果该网站支持PC和手机各位大佬们感兴趣的记得收藏视频资源不定期更新让你在闲暇之余既能学技术也能看感兴趣的视频资源
