由element组件搭建的左侧导航栏
预览:
html代码:
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-menu
default-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"
border
style="width: 100%">
<el-table-column
type="index"
width="100">
</el-table-column>
<el-table-column
prop="type"
label="客房类型"
align="center">
</el-table-column>
<el-table-column
prop="capacity"
label="额定容量"
align="center">
</el-table-column>
<el-table-column
prop="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_