element左侧导航栏
由element组件搭建的左侧导航栏
预览:
html代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title><style>
/*<!-- 调整页面背景颜色-->*/body{background-color: #eef1f6;}.el-row {display: flex;height: 100vh; /* 设置高度为视口高度 */}.el-col {display: flex;flex-direction: column;}.el-menu {flex-grow: 1;}</style>
</head>
<body>
<div id="app"><el-row>
<!-- 导航页 --><el-col :span="3"><el-menudefault-active="0"class="el-menu-vertical-demo"@select="handleSelect"background-color="#303133"text-color="#fff"active-text-color="#ffd04b"><h3 style="text-align: center; background-color: yellow">酒店客房管理系统</h3><el-menu-item index="0">首页</el-menu-item><el-submenu index="1"><template slot="title"><span>系统管理</span></template><el-menu-item index="1-1">用户管理</el-menu-item><el-menu-item index="1-2">日志管理</el-menu-item></el-submenu><el-submenu index="2"><template slot="title"><span>报表管理</span></template><el-menu-item index="2-1">预定客人报表</el-menu-item><el-menu-item index="2-2">在线客人报表</el-menu-item><el-menu-item index="2-3">离店客人报表</el-menu-item><el-menu-item index="2-4">财务进账报表</el-menu-item></el-submenu><el-submenu index="3"><template slot="title"><span>房客管理</span></template><el-menu-item index="3-1">客房预定管理</el-menu-item><el-menu-item index="3-2">入住登记管理</el-menu-item><el-menu-item index="3-3">预定转入住</el-menu-item><el-menu-item index="3-4">换房管理</el-menu-item><el-menu-item index="3-5">结账管理</el-menu-item></el-submenu><el-submenu index="4"><template slot="title"><span>客房管理</span></template><el-menu-item index="4-1">客房信息管理</el-menu-item></el-submenu><el-submenu index="5"><template slot="title"><span>消费管理</span></template><el-menu-item index="5-1">附加消费入账</el-menu-item></el-submenu><el-submenu index="6"><template slot="title"><span>基础信息管理</span></template><el-menu-item index="6-1">客房类型管理</el-menu-item><el-menu-item index="6-2">楼层管理</el-menu-item><el-menu-item index="6-3">商品类别管理</el-menu-item><el-menu-item index="6-4">商品管理</el-menu-item><el-menu-item index="6-5">会员管理管理</el-menu-item></el-submenu><el-menu-item index="7"><span><a href="index.html">退出登录</a></span></el-menu-item></el-menu></el-col>
<!-- 首页 --><el-col :span="21" v-if="this.page == 0"><center><h1>欢迎使用酒店客房管理系统</h1></center><h2>你是{{user.position}}</h2></el-col>
<!--客房管理 --><el-col :span="21" v-if="this.page == '6-1'"><h1>客房管理</h1><el-divider></el-divider><el-button style="width: 150px" type="primary" @click="addRoomType()">新增客房类型</el-button><el-table:data="roomTypeTableData"borderstyle="width: 100%"><el-table-columntype="index"width="100"></el-table-column><el-table-columnprop="type"label="客房类型"align="center"></el-table-column><el-table-columnprop="capacity"label="额定容量"align="center"></el-table-column><el-table-columnprop="note"label="备注"align="center"></el-table-column><el-table-column label="操作" width="200" align="center"><template slot-scope="scope"><el-button type="primary" size="mini" @click="editRoomType(scope.row)">编辑</el-button><el-button type="danger" size="mini" @click="deleteRoomType(scope.row)">删除</el-button></template></el-table-column></el-table></el-col></el-row><div id="dialog">
<!-- 新增客房类型对话框 --><el-dialog title="新增客房类型" :visible.sync="addRoomTypeFormVisible"><el-form :model="roomType"><el-form-item label="类型名" label-width="120px" :rules="[{ required: true, message: '请输入客房类型名', trigger: 'blur' }]"><el-input v-model="roomType.type"></el-input></el-form-item><el-form-item label="额定人数" label-width="120px" :rules="[{ required: true, message: '请输入额定人数', trigger: 'blur' }]"><el-input v-model="roomType.capacity"></el-input></el-form-item><el-form-item label="备注" label-width="120px"><el-input type="textarea" v-model="roomType.note"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="addRoomTypeFormVisible = false">取 消</el-button><el-button type="primary" @click="summitRoomType">提 交</el-button></div></el-dialog><el-dialog title="编辑客房类型" :visible.sync="editRoomTypeFormVisible"><el-form :model="roomType"><el-form-item label="类型名" label-width="120px" ><el-input v-model="roomType.type"></el-input></el-form-item><el-form-item label="额定人数" label-width="120px"><el-input v-model="roomType.capacity"></el-input></el-form-item><el-form-item label="备注" label-width="120px"><el-input type="textarea" v-model="roomType.note"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="editRoomTypeFormVisible = false">取 消</el-button><el-button type="primary" @click="updateRoomType">确 定</el-button></div></el-dialog></div></div><script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>new Vue({el: '#app',data() {return {},methods: {handleSelect(key,keyPath){this.page = key;if(key=='6-1'){this.selectAll();}}},mounted(){this.$message({message: '欢迎使用酒店管理系统',type: 'success'})}})
</script>
</body>
</html>需要引入vue.js文件和饿了么组件包,需要文件的话可以去官网获得,也可以加我v : LXY_OvO_
相关文章：
element左侧导航栏
由element组件搭建的左侧导航栏 预览: html代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>首页</title><style> /*<!-- 调整页面背景颜色-->*/body{background-colo…...
【金融贷后】贷后运营精细化管理
文章目录 一、贷后专业术语讲解① 什么是贷后，贷后部是干什么的？② 贷后部门常见组织架构？③ 贷后专业术语有哪些？ 二、贷后常用作业手段介绍① 贷后产品形态介绍？② 催收常用的方法？ 三、贷后策略岗位介绍…...
学习CSS第七天
学习文章目录 一.交集选择器 一.交集选择器 使用多个条件符合的元素，可提高区分的精准度 元素配合类名是使用场景最多的 （元素必须是第一位，ID一般不写） <!DOCTYPE html> <html lang"zh-CN"> <head>…...
Image Stitching using OpenCV
文章目录 简介图像拼接管道特征检测和提取特征检测特征提取 特征匹配强力匹配FLANN（近似最近邻快速库）匹配 单应性估计扭曲和混合结论 使用opencv进行图像拼接 原为url: https://medium.com/paulsonpremsingh7/image-stitching-using-opencv-a-step-by-s…...
CentOS7 安装Selenium（使用webdriver_manager自动安装ChromeDriver）
在 CentOS 7 上安装 Selenium 通常涉及几个步骤，包括安装 Python、安装 Selenium 库、安装 WebDriver 以及配置环境。以下是详细的步骤： 1. 安装 Python 和 pip 如果你的系统中还没有安装 Python 和 pip，可以使用以下命令进行安装ÿ…...
鸿蒙手机文件目录
最近在开发鸿蒙，想把文件从电脑上发送到鸿蒙上我的手机APP的根目录，但是试了几次目录都不对，最后终于找到了，在这里记录一下 鸿蒙手机路径: /storage/media/100/local/files/Docs 将文件从电脑发送到手机：hdc file s…...
泷羽Sec学习笔记-Bp中ip伪造、爬虫审计
ip伪造与爬虫审计 ip伪造 下载插件：burpFakeIP 地址：GitHub - TheKingOfDuck/burpFakeIP: 服务端配置错误情况下用于伪造ip地址进行测试的Burp Suite插件 python版需要配置jython：下载地址：Maven Central: org.python:jython-…...
电子电工一课一得
首语 在现代社会中，电子电工技术已经渗透到我们生活的方方面面，从家用电器到工业自动化，从通信设备到智能系统，无一不依赖于电子电工技术。因此，掌握电子电工的基础知识，不仅对理工科学生至关重要…...
Cesium 限制相机倾斜角(pitch)滑动范围
1.效果 2.思路 在项目开发的时候，有一个需求是限制相机倾斜角，也就是鼠标中键调整视图俯角时，不能过大，一般 pitch 角度范围在 0 至 -90之间，-90刚好为正俯视。 在网上查阅了很多资料，发现并没有一个合适的…...
配置ssh-key连接github
GitHub 通过在 2022 年 3 月 15 日删除旧的、不安全的密钥类型来提高安全性。 具体内容参考如下链接 https://docs.github.com/zh/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent mac配置 ssh-keygen -t ed25519 -C …...
Linux——进程控制模拟shell
1.进程创建 我们在之前的文章中介绍过进程创建的方法，可以通过系统调用接口fork来创建新的进程。 fork在创建完新的子进程之后，返回值是一个pid，对于父进程返回子进程的pid，对于子进程返回0。fork函数后父子进程共享代码ÿ…...
【HarmonyOS】鸿蒙应用实现手机摇一摇功能
【HarmonyOS】鸿蒙应用实现手机摇一摇功能 一、前言 手机摇一摇功能，是通过获取手机设备，加速度传感器接口，获取其中的数值，进行逻辑判断实现的功能。 在鸿蒙中手机设备传感器ohos.sensor (传感器)的系统API监听有以下…...
Kael‘thas Sunstrider Ashes of Al‘ar
Kaelthas Sunstrider 凯尔萨斯逐日者 <血精灵之王> Kaelthas Sunstrider - NPC - 魔兽世界怀旧服TBC数据库_WOW2.43数据库_70级《燃烧的远征》数据库 Ashes of Alar 奥的灰烬 （凤凰 310%速度） Ashes of Alar - Item - 魔兽世界怀旧服TBC数据…...
CNCF云原生生态版图
CNCF云原生生态版图 概述什么是云原生生态版图如何使用生态版图 项目和产品（Projects and products）会员（Members）认证合作伙伴与提供商（Certified partners and providers）无服务（Serverless&a…...
渐冻症：真的无药可治？
“渐冻症”，这个令人闻之色变的疾病，仿佛是生命的冷酷冰封者。一提到渐冻症，很多人脑海中立刻浮现出绝望的画面，认为它无药可治。但事实真的如此吗？ 渐冻症，医学上称为肌萎缩侧索硬化症，是一种渐…...
`pg_wal` 目录
在 PostgreSQL 中，自动清理 pg_wal 目录主要通过配置参数 min_wal_size、max_wal_size 和 wal_keep_size 来实现。以下是如何配置 PostgreSQL 以自动清理 WAL 文件的详细步骤和建议： 配置 min_wal_size 和 max_wal_size： min_wal_size&#x…...
【信息系统项目管理师】论文：论信息系统项目的整合管理
文章目录 正文一、制定项目章程二、指定项目管理计划三、指导与管理项目工作四、管理项目知识五、监控项目工作六、实施整体变更控制七、结束项目或阶段 正文 根据省自然资源厅的总体部署，XX市决定于2023年8月开始全市不动产登记系统建设，要求在2024年8…...
MATLAB深度学习(七)——ResNet残差网络
一、ResNet网络 ResNet是深度残差网络的简称。其核心思想就是在，每两个网络层之间加入一个残差连接，缓解深层网络中的梯度消失问题 二、残差结构 在多层神经网络模型里，设想一个包含诺干层自网络，子网络的函数用H(x)来表示&#x…...
)
freeswitch(配置event_socket连接)
亲测版本centos 7.9系统–》 freeswitch1.10.9 本人freeswitch安装路径（根据自己的路径进入） /usr/local/freeswitch/etc/freeswitch场景说明： 如果想使用代码进行控制freeswitch添加账号、获取注册信息、强拆等，可以使用ESL控制vim autoload_configs/event_socket.conf.x…...
C++ SQLite轻量化数据库使用总结
官网下载：https://www.sqlite.org/download.html 示例1 #include <iostream> #include <sqlite3.h>int main() {sqlite3* db;char* zErrMsg 0;int rc;// 打开数据库连接（如果数据库不存在，则会自动创建）rc sqlite…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为 以太坊（Ethereum）平台编写智能合约的高级编…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...
JVM 内存结构 详解
内存结构 运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...