系統網站首頁三種常見布局vue+elementui

  1. 左中右菜單布局 
    <template><el-container><el-menu  class="el-menu-vertical-demo" style="width: 80px; height: 100vh;"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"@select="handleSelect" @open="handleOpen" @close="handleClose" :collapse="isCollapse"><el-menu-item :index="item.path" :key="item.path" v-for="item in sidebarRouters" v-if="item.meta" ><i class="el-icon-menu"><div style="font-size: 14px"><y>{{ item.meta.title.substring(0, 2) }}</y></div></i></el-menu-item></el-menu><el-menu style="width: 200px; height: 100vh;"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"routeractive-text-color="#ffd04b"><el-menu-item  :index="item.path" :key="item.path" v-for="(item , index) in menuChildArr"><i class="el-icon-menu"></i><span >{{item.name}}</span></el-menu-item></el-menu><div class="scroll-box"><el-main><router-view></router-view></el-main></div></el-container></template><style>
.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;
}.scroll-box {width: 100%;height: 100vh; /* 占據屏幕高度的 50% */overflow-y: auto; /* 垂直滾動 */box-sizing: border-box;
}</style><script>
import store from "@/store";export default {data() {return {sidebarRouters: store.getters.sidebarRouters,countIndex: 0,menuChildMap:{},menuChildArr:  [{name: '用戶管理',path: '/system/user'},{name: '角色管理',path: '/system/role'}],isCollapse: true};},methods: {handleOpen(key, keyPath) {},handleSelect(key, keyPath){console.log("AAAAAAA="+ keyPath);console.log(key, keyPath);this.countIndex++;this.menuChildArr=[];let sidebarRouters = this.sidebarRouters;for (let i = 0; i < sidebarRouters.length; i++) {let item = sidebarRouters[i];if (item.meta && item.path==keyPath) {let title = item.meta.title;let children = item.children;for (let j = 0; j < children.length; j++) {let child = children[j];console.log("PPPPP:"+item.path+'/'+child.path);this.menuChildArr.push({name:child.meta.title, path:item.path+'/'+child.path});}}}console.log(JSON.stringify(this.menuChildArr));},handleClose(key, keyPath) {console.log(key, keyPath);}}
}
</script>

  2. 左右菜單布局 
    <template><el-container><el-header style="background-color:#545c64;color: #fff;height: 7vh;"><h1>TMS運輸管理系統</h1></el-header><el-container><div class="menu-container"><el-menu:default-active="activeIndex2"class="custom-menu"mode="vertical"@select="handleSelect"background-color="#545c64"text-color="#fff"routeractive-text-color="#ffd04b"><el-submenu  style="background-color: #545c64;" :index="item.path" :key="item.path" v-for="item in sidebarRouters" v-if="item.meta"><template slot="title" style="background-color: #545c64;">{{ item.meta.title }}</template><el-menu-item   style="background-color: #545c64;" :key="child.path" :index="item.path+'/'+child.path" v-for="child in item.children" v-if="child.meta" >{{ child.meta.title }}</el-menu-item></el-submenu><!--<el-menu-item index="/bar" >消息中心</el-menu-item><el-menu-item index="/foo" >消息中心2</el-menu-item><el-menu-item index=""><a href="https://www.ele.me" target="_blank">訂單管理</a></el-menu-item>--></el-menu></div><div class="scroll-box"><!-- 路由出口 --><!-- 路由匹配到的組件將渲染在這里 --><el-tagstyle="margin: 5px;":key="tag"v-for="(tag ,index) in dynamicTags"closable:disable-transitions="false":effect="tag.effect"@click="handleClick(tag)"@close="handleClose(tag)"><router-link :to="tag.path"> {{tag.name}} </router-link></el-tag><router-view></router-view></div></el-container></el-container></template><script>import {mapState} from "vuex";
import store from '@/store'
export default {name: 'Layout',data() {return {effectValue:'plain',dynamicTags: [{name:'首頁',path:'/',effect:'plain'}],activeIndex2: '0',menuIndexName:{'/system/user':'用戶管理', '/system/role':'角色管理',  '/system/menu':'菜單管理',  '/system/dept':'部門管理', '/system/dict':'字典管理', '/system/post':'崗位管理','/system/job':'任務管理', '/system/config':'參數管理', '/system/notice':'通知公告', '/system/logininfor':'登錄日志', '/system/operlog':'操作日志'},sidebarRouters: store.getters.sidebarRouters};},methods: {handleSelect(key, keyPath) {//console.log(JSON.stringify(store.getters.sidebarRouters))console.log(key, keyPath);let menuIndexName1 = new Map();let sidebarRouters = this.sidebarRouters;console.log("PPPPPFull111:"+JSON.stringify(sidebarRouters));for (let i = 0; i < sidebarRouters.length; i++) {let item = sidebarRouters[i];if (item.meta) {let title = item.meta.title;let children = item.children;for (let j = 0; j < children.length; j++) {let child = children[j];let pathFull = item.path+'/'+child.path;let titleChild = child.meta.title;console.log("PPPPP:"+pathFull,titleChild);menuIndexName1.set(pathFull,titleChild); // ={item.path+'/'+child.path:child.meta.title};}}}console.log("PPPPPFull:"+JSON.stringify(menuIndexName1));//置灰其它菜單按鈕tagthis.dynamicTags.forEach(item => {item.effect='plain';});//激活當前菜單按鈕taglet menuName = menuIndexName1.get(keyPath[1]);let menuNameJson={name:menuName, path:keyPath[1],effect:'dark'};this.dynamicTags.push(menuNameJson);//this.$router.push({path: keyPath});},handleClose(tag) {this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);//激活后一個按鈕tagif(this.dynamicTags.length>1){let dynamicTagsCur = this.dynamicTags[this.dynamicTags.length-1];dynamicTagsCur.effect='dark';let returnUrl = dynamicTagsCur.path;//刷新路由//this.$router.replace(decodeURIComponent(returnUrl || '/'));this.$router.push({path: returnUrl,query: {...this.$route.query,timestamp: Date.now()}});}},handleClick(tag){//置灰其它菜單按鈕tagthis.dynamicTags.forEach(item => {item.effect='plain';});//單擊事件激活當前按鈕tag.effect='dark';}}
};</script><style scoped lang="scss">
.el-tag + .el-tag {margin: 5px;
}
.menu-container {display: flex;width:  15vw;height: 93vh; /* 占據整個視口高度 */
}.custom-menu {flex: 1;height: 100%; /* 高度自適應父容器 */
}
.scroll-box {width:  100%;height: 93vh; /* 占據屏幕高度的 50% */overflow-y: auto; /* 垂直滾動 */box-sizing: border-box;
}</style>

  3. 上下菜單布局

?

<template><div id="app"><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"routeractive-text-color="#ffd04b"><el-submenu :index="item.path" :key="item.path" v-for="item in sidebarRouters" v-if="item.meta"><template slot="title" >{{ item.meta.title }}</template><el-menu-item  :key="child.path" :index="item.path+'/'+child.path" v-for="child in item.children" v-if="child.meta" >{{ child.meta.title }}</el-menu-item></el-submenu><!--<el-menu-item index="/bar" >消息中心</el-menu-item><el-menu-item index="/foo" >消息中心2</el-menu-item><el-menu-item index=""><a href="https://www.ele.me" target="_blank">訂單管理</a></el-menu-item>--></el-menu><!-- 路由出口 --><!-- 路由匹配到的組件將渲染在這里 --><el-tag:key="tag"v-for="(tag ,index) in dynamicTags"closable:disable-transitions="false":effect="tag.effect"@click="handleClick(tag)"@close="handleClose(tag)"><router-link :to="tag.path"> {{tag.name}} </router-link></el-tag><router-view></router-view></div></template><script>import {mapState} from "vuex";
import store from '@/store'
export default {name: 'Layout',data() {return {effectValue:'plain',dynamicTags: [{name:'首頁',path:'/',effect:'plain'}],activeIndex2: '0',menuIndexName:{'/system/user':'用戶管理', '/system/role':'角色管理',  '/system/menu':'菜單管理',  '/system/dept':'部門管理', '/system/dict':'字典管理', '/system/post':'崗位管理','/system/job':'任務管理', '/system/config':'參數管理', '/system/notice':'通知公告', '/system/logininfor':'登錄日志', '/system/operlog':'操作日志'},sidebarRouters: store.getters.sidebarRouters};},methods: {handleSelect(key, keyPath) {//console.log(JSON.stringify(store.getters.sidebarRouters))console.log(key, keyPath);let menuIndexName1 = new Map();let sidebarRouters = this.sidebarRouters;console.log("PPPPPFull111:"+JSON.stringify(sidebarRouters));for (let i = 0; i < sidebarRouters.length; i++) {let item = sidebarRouters[i];if (item.meta) {let title = item.meta.title;let children = item.children;for (let j = 0; j < children.length; j++) {let child = children[j];let pathFull = item.path+'/'+child.path;let titleChild = child.meta.title;console.log("PPPPP:"+pathFull,titleChild);menuIndexName1.set(pathFull,titleChild); // ={item.path+'/'+child.path:child.meta.title};}}}console.log("PPPPPFull:"+JSON.stringify(menuIndexName1));//置灰其它菜單按鈕tagthis.dynamicTags.forEach(item => {item.effect='plain';});//激活當前菜單按鈕taglet menuName = menuIndexName1.get(keyPath[1]);let menuNameJson={name:menuName, path:keyPath[1],effect:'dark'};this.dynamicTags.push(menuNameJson);//this.$router.push({path: keyPath});},handleClose(tag) {this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);//激活后一個按鈕tagif(this.dynamicTags.length>1){let dynamicTagsCur = this.dynamicTags[this.dynamicTags.length-1];dynamicTagsCur.effect='dark';let returnUrl = dynamicTagsCur.path;//刷新路由//this.$router.replace(decodeURIComponent(returnUrl || '/'));this.$router.push({path: returnUrl,query: {...this.$route.query,timestamp: Date.now()}});}},handleClick(tag){//置灰其它菜單按鈕tagthis.dynamicTags.forEach(item => {item.effect='plain';});//單擊事件激活當前按鈕tag.effect='dark';}}
};</script><style scoped lang="scss">
.el-tag {margin: 5px;
}
</style>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/84377.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/84377.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/84377.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

復習Git命令、Git命令使用流程、VSCode+Git插件管理工程源碼

復習Git命令、Git命令使用流程、VSCode+Git插件管理工程源碼

目錄 1 引言 2 直接整理一個常用的流程&#xff0c;而不是死記硬背各種命令 3 解決沖突的說明和理解 4 git fetch的說明和理解 5 真正開發不用Git命令&#xff0c;而是使用VSCode插件管理工程 1 引言 以前主要用svn&#xff0c;Git用的少&#xff0c;這次再復習一下Git命…
閱讀更多...
384_C++_unit是4字節大小，能存儲32位（bit）bool操作，[7][48]這里用于計劃表的時間節點內，二維數組中每一位代表一種AI功能的開關狀態

384_C++_unit是4字節大小，能存儲32位（bit）bool操作，[7][48]這里用于計劃表的時間節點內，二維數組中每一位代表一種AI功能的開關狀態

前置了解 uint 并不是 C/C++ 標準中的 原生類型，但不同平臺或框架可能有定義。通常： 1. uint 可能是 unsigned int 的別名 在某些代碼庫（如 Arduino、某些嵌入式系統、部分庫的頭文件）中，uint 可能被定義為：typedef unsigned int uint;此時，uint 的大小和 unsigned in…
閱讀更多...
css~word-break屬性

css~word-break屬性

CSS中如何強制換行“....................................”&#xff1f; 當盒子寬度能放下“...”元素時&#xff0c;正常展示如下&#xff1a; 當盒子寬度不夠放“...”元素時&#xff0c;文本就會溢出&#xff0c;導致整個內容被截斷&#xff1a; 如何才能讓其正常展示而不…
閱讀更多...
【Algorithm】Union-Find簡單介紹

【Algorithm】Union-Find簡單介紹

文章目錄 Union-Find1 基本概念1.1 Find(x) - 查詢操作1.2 Union(x, y) - 合并操作 2 并查集的結構和優化2.1 數據結構設計2.2 兩大優化策略&#xff08;關鍵&#xff09;2.2.1 路徑壓縮&#xff08;Path Compression&#xff09;2.2.2 按秩合并&#xff08;Union by Rank or S…
閱讀更多...
LeetCode 高頻 SQL 50 題（基礎版）之 【高級字符串函數 / 正則表達式 / 子句】· 上

LeetCode 高頻 SQL 50 題（基礎版）之 【高級字符串函數 / 正則表達式 / 子句】· 上

題目&#xff1a;1667. 修復表中的名字 題解&#xff1a; select user_id, concat(upper(left(name,1)),lower(right(name,length(name)-1))) name from Users order by user_id題目&#xff1a;1527. 患某種疾病的患者 題解&#xff1a; select * from Patients where con…
閱讀更多...
Linux系統的CentOS7發行版安裝MySQL80

Linux系統的CentOS7發行版安裝MySQL80

文章目錄 前言Linux命令行內的”應用商店”安裝CentOS的安裝軟件的yum命令安裝MySQL1. 配置yum倉庫2. 使用yum安裝MySQL3. 安裝完成后&#xff0c;啟動MySQL并配置開機自啟動4. 檢查MySQL的運行狀態 MySQL的配置1. 獲取MySQL的初始密碼2. 登錄MySQL數據庫系統3. 修改root密碼4.…
閱讀更多...
Java + Spring Boot項目枚舉（Enum）目錄建議

Java + Spring Boot項目枚舉（Enum）目錄建議

在Java Spring Boot項目中&#xff0c;枚舉&#xff08;Enum&#xff09;的定義文件沒有固定的強制目錄&#xff0c;但通常遵循項目結構和最佳實踐來組織代碼。以下是常見的推薦位置&#xff1a; 1. 領域模型相關枚舉 目錄: domain/enums 或 model/enums 場景: 當枚舉與業務模…
閱讀更多...
Vue 模板語句的數據來源

Vue 模板語句的數據來源

&#x1f9e9; Vue 模板語句的數據來源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表達式、指令綁定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一個特定的作用域內求值。這個作用域由當前 組件…
閱讀更多...
全新AI驅動Workspace Security 套件發布！Fortinet 電子郵件安全產品矩陣升級

全新AI驅動Workspace Security 套件發布！Fortinet 電子郵件安全產品矩陣升級

專注推動網絡與安全融合的全球性綜合網絡安全解決方案供應商 Fortinet&#xff08;NASDAQ&#xff1a;FTNT&#xff09;&#xff0c;近日宣布發布新一代企業級郵件安全解決方案FortiMail Workspace Security 安全套件&#xff0c;全面增強旗下數據和生產力安全產品組合&#xf…
閱讀更多...
二十、【用戶管理與權限 - 篇二】前端交互：實現用戶管理界面

二十、【用戶管理與權限 - 篇二】前端交互：實現用戶管理界面

【用戶管理與權限 - 篇二】前端交互：實現用戶管理界面 前言準備工作第一部分：更新并確認前端 API 服務第二部分：添加用戶管理頁面的路由和側邊欄入口第三部分：實現用戶列表頁面第四部分：實現用戶編輯對話框組件第五部分：全面測試總結前言 在上一篇《【用戶管理與權限 - …
閱讀更多...
LeetCode --- 452周賽

LeetCode --- 452周賽

題目列表 3566. 等積子集的劃分方案 3567. 子矩陣的最小絕對差 3568. 清理教室的最少移動 3569. 分割數組后不同質數的最大數目 一、等積子集的劃分方案 由于本題的數據范圍不大&#xff0c;我們可以暴力枚舉所有可能的劃分方式&#xff0c;代碼如下 // C class Solution { …
閱讀更多...
使用Python提取照片元數據：方法與實戰指南

使用Python提取照片元數據：方法與實戰指南

## 引言&#xff1a;元數據的重要性 照片元數據&#xff08;Metadata&#xff09;是嵌入在圖像文件中的隱藏信息&#xff0c;記錄了拍攝設備、時間、地理位置、光圈快門參數等關鍵數據。這些信息廣泛應用于**數字取證**、**照片管理**、**地理標記分析**和**版權驗證**等場景。…
閱讀更多...
使用docker在3臺服務器上搭建基于redis 6.x的一主兩從三臺均是哨兵模式

使用docker在3臺服務器上搭建基于redis 6.x的一主兩從三臺均是哨兵模式

一、環境及版本說明 如果服務器已經安裝了docker,則忽略此步驟,如果沒有安裝,則可以按照一下方式安裝: 1. 在線安裝(有互聯網環境): 請看我這篇文章 傳送陣>> 點我查看 2. 離線安裝(內網環境):請看我這篇文章 傳送陣>> 點我查看 說明&#xff1a;假設每臺服務器已…
閱讀更多...
阿里云ACP云計算備考筆記 (5)——彈性伸縮

阿里云ACP云計算備考筆記 (5)——彈性伸縮

目錄 第一章 概述 第二章 彈性伸縮簡介 1、彈性伸縮 2、垂直伸縮 3、優勢 4、應用場景 ① 無規律的業務量波動 ② 有規律的業務量波動 ③ 無明顯業務量波動 ④ 混合型業務 ⑤ 消息通知 ⑥ 生命周期掛鉤 ⑦ 自定義方式 ⑧ 滾的升級 5、使用限制 第三章 主要定義 …
閱讀更多...
CANopen轉Modbus TCP轉換器助生產線智能化升級

CANopen轉Modbus TCP轉換器助生產線智能化升級

在自動化工業控制領域&#xff0c;CANopen和Modbus TCP是兩種廣泛采用的通信協議。它們各自具有獨特的特點和優勢&#xff0c;但在某些應用場景中&#xff0c;需要設備能夠同時支持這兩種通信標準。這就需要一個能夠實現開疆智能CANopen轉Modbus TCP轉換的網關KJ-TCPC-CANP設備…
閱讀更多...
C++圖書管理

C++圖書管理

圖書館的書籍分類系統使用二進制標簽管理&#xff0c;0 代表兒童讀物&#xff0c;1 代表青少年書籍。管理員發現當前的書架排列中不允許出現青少年書籍之后連接兒童讀物的情況&#xff08;即 10 子串&#xff09;。管理員每次可以交換任意兩本書的位置。請計算讓書架符合規定所…
閱讀更多...
汽車免拆診斷案例 | 2010款捷豹XFL車制動警告燈、DSC警告燈異常點亮

汽車免拆診斷案例 | 2010款捷豹XFL車制動警告燈、DSC警告燈異常點亮

故障現象　 一輛2010款捷豹XFL車&#xff0c;搭載3.0 L發動機&#xff0c;累計行駛里程約為35萬km。車主反映&#xff0c;該車組合儀表上的制動警告燈、動態穩定控制系統&#xff08;DSC&#xff09;警告燈異常點亮&#xff08;圖1&#xff09;&#xff0c;且提示“DSC NOT AV…
閱讀更多...
el-upload組件，上傳文件失敗，:on-error方法失效

el-upload組件，上傳文件失敗，:on-error方法失效

el-upload組件方法失效 問題原因解決 問題 使用el-upload組件上傳文件&#xff0c;有這么一個問題上傳文件處理報錯Excel、Word。org.apache.poi.openxml4j.exceptions.OLE2NotOfficeXmlFileException。 按上述&#xff0c;后端編寫完代碼&#xff0c;輸出正常&#xff0c;但…
閱讀更多...
可視化圖解算法50：最小的K個數

可視化圖解算法50：最小的K個數

牛客網 面試筆試 TOP101 | LeetCode 面試題 17.14. 最小K個數 1. 題目 描述 給定一個長度為 n 的可能有重復值的數組&#xff0c;找出其中不去重的最小的 k 個數。例如數組元素是4,5,1,6,2,7,3,8這8個數字&#xff0c;則最小的4個數字是1,2,3,4(任意順序皆可)。 數…
閱讀更多...
Ragflow配置注意項

Ragflow配置注意項

在 .env文件中啟用v.0.19.0版本&#xff0c;帶emabedding models RAGFLOW_IMAGEinfiniflow/ragflow:v0.19.0 RAGFlow image tagImage size (GB)Has embedding models?Stable?v0.19.0≈9??Stable releasev0.19.0-slim≈2?Stable releasenightly≈9??Unstable nightly b…
閱讀更多...
最新文章

Copyright @ 2022~2023