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…...
中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试
作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...
使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
Go 并发编程基础：通道（Channel）的使用
在 Go 中，Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式，用于在多个 Goroutine 之间传递数据，从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化（Gradient Normalization） (2) 判别器梯度间隙正则化（Discriminator Gradient Gap Regularization） (3) 自注意力机制（Self-Attention） 3. 完整损失函数 二…...
Python实现简单音频数据压缩与解压算法
Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中，压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言，提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...
在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南
在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点（小球运动模拟）6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...
C++--string的模拟实现
一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现，其目的是加强对string的底层了解，以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量，…...
JS红宝书笔记 - 3.3 变量
要定义变量，可以使用var操作符，后跟变量名 ES实现变量初始化，因此可以同时定义变量并设置它的值 使用var操作符定义的变量会成为包含它的函数的局部变量。 在函数内定义变量时省略var操作符，可以创建一个全局变量 如果需要定义…...
数据库正常，但后端收不到数据原因及解决
从代码和日志来看，后端SQL查询确实返回了数据，但最终user对象却为null。这表明查询结果没有正确映射到User对象上。 在前后端分离，并且ai辅助开发的时候，很容易出现前后端变量名不一致情况，还不报错，只是单…...