国内好看的网站设计,河北省住房和城乡建设局网站,1688外贸,西安哪有做网站的后面会补充github地址 文章目录 目录 文章目录 案例说明 1.引入库 2.创建布局组件 3.创建布局组件 4.菜单效果展示 5.创建顶部组件 5.创建顶部面包屑组件 6.创建内容区域组件 7.效果总览 7.布丁#xff08;实现一些小细节#xff09; 前言一、pandas是什么#xff1f;二、使… 后面会补充github地址 文章目录 目录 文章目录 案例说明 1.引入库 2.创建布局组件 3.创建布局组件 4.菜单效果展示 5.创建顶部组件 5.创建顶部面包屑组件 6.创建内容区域组件 7.效果总览 7.布丁实现一些小细节 前言一、pandas是什么二、使用步骤 1.引入库2.读入数据总结 案例说明
徒手搭建后台管理系统模板2.0
之前网上找了以下模板大多太重我想要一款超轻量级此处量级是指代码结构目录结构简单。 因果需要在大屏系统中假如后台管理系统大屏用的是2.0 1.引入库
代码如下示例
import Element from element-ui
import element-ui/lib/theme-chalk/index.css2.创建布局组件
代码如下layout/index
div classadmin-wrapperdiv classsidebar-container!--左侧菜单--/divdiv classmain-containerdiv classheader-main!--顶部菜单--/div!--内容区域--/div
/div3.创建布局组件
代码如下layout/components/menuBar
el-scrollbar wrap-classscrollbar-wrapperel-menu!--菜单组件menu-item--menu-item v-for(router, key) in menulist :keykey :itemrouter//el-menu
/el-scrollbar模拟菜单数据 menuList: mockMenuData
const mockMenuData [{ id: 1, level: 1, name: 菜单A, parentId: 0, path: },{ id: 2, level: 1, name: 菜单B, parentId: 0, path: /yjcd,children: [{ id: 2_1, level: 2, name: 菜单B_A, parentId: 1, path: },{ id: 2_2, level: 2, name: 菜单B_B, parentId: 1, path: },{ id: 2_3, level: 2, name: 菜单B_C, parentId: 1, path: ,children: [{ id: 2_1_1, level: 2, name: 菜单B_C_A, parentId: 2, path: },{ id: 2_1_1, level: 2, name: 菜单B_C_B, parentId: 2, path: },{ id: 2_1_1, level: 2, name: 菜单B_C_C, parentId: 2, path: }]}]}
]
菜单组件递归子组件 menu-item
div classmenu-itemel-submenu v-ifitem.children :indexitem.path popper-append-to-bodytemplate slottitlespan slottitle v-textitem.name/span/templatemenu-item v-for(item_, key_) in item.children :keykey_ :itemitem_//el-submenutemplate v-elseel-menu-item :indexitem.path :iditem.pathspan slottitle v-textitem.name/span/el-menu-item/template
/div 4.菜单效果展示 5.创建顶部组件
代码如下layout/components/navBar
div classnav-bar!--开合按钮--div classtoggle-switchdiv classicon clickhandleToggleSwitch v-ifshowi classel-icon-s-fold/i/divdiv classicon clickhandleToggleSwitch v-elsei classel-icon-s-unfold/i/div/div!--面包屑--breadcrumb/!--菜单--div classright-boxel-dropdown classavatar-container triggerclickdiv classavatar-wrapperimg src classuser-avatar/divel-dropdown-menu slotdropdownel-dropdown-item divided click.nativehandleLogoutspan styledisplay:block;退出登录/span/el-dropdown-item/el-dropdown-menu/el-dropdown/div
/div
5.创建顶部面包屑组件
代码如下layout/components/breadcrumb el-breadcrumb classapp-breadcrumb separator/transition-group namebreadcrumbel-breadcrumb-item v-for(item,index) in levelList :keyitem.pathspan v-ifitem.redirectnoRedirect||indexlevelList.length-1 classno-redirect{{ item.meta.title }}/spana v-else click.preventhandleLink(item){{ item.meta.title }}/a/el-breadcrumb-item/transition-group/el-breadcrumbconst matched this.$route.matched.filter(item item.meta item.meta.title)
this.levelList matched.filter(item item.meta item.meta.title item.meta.breadcrumb ! false)
6.创建内容区域组件
代码如下layout/components/appMain
section classapp-maintransition namefade-transform modeout-inrouter-view //transition
/section
7.效果总览 7.布丁实现一些小细节
项目要求切换时候有loading
嘿嘿咱之前做移动端时候又类似代码代码如下记得import Loading 哈
export const el_import (viewPath) {return resolve {const el_ld Loading.service({text: 加载中···})require([/views/ viewPath], component {el_ld.close()resolve(component)})}
}
使用方法 { path: /test, name: test, meta: { title: test, index: 0, keepAlive: false, requireAuth: false }, component: el_import(admin/index) } 好了本期内容就到这里结束吧。
