由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_