本文介绍了如何使用Vue和Bootstrap构建一个员工信息管理系统，包括全选单选功能，以及针对在职、离职状态的筛选和编辑功能。展示了表格布局、数据绑定和Bootstrap组件的运用。
Vue+ bootStrap 实现员的增删改查 离职操作 全选单选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
</head>
<style>
table,
th {
text-align: center;
}
table {
margin-top: 10px
}
.user-list {
width: 900px;
margin: 100px auto;
}
.bg-success {
height: 40px;
font-size: 18px;
font-weight: bold;
line-height: 40px;
padding-left: 20px;
}
.sex-group label {
margin: 0px 10px;
}
</style>
<body>
<div id="app">
<div class="user-list">
<button type="button" class="btn btn-primary" @click="showModal()">添加用户</button>
<button type="button" class="btn btn-success" @click="showType = 1">显示所有用户</button>
<button type="button" class="btn btn-info" @click="showType = 2">显示在职用户</button>
<button type="button" class="btn btn-warning" @click="showType = 3">显示离职用户</button>
<table class="table table-bordered">
<thead>
<tr>
<th><input type="checkbox" v-model="allChecked"></th>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>工资</th>
<th>离职</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in tableShowData" :key="user.id" :class="{'bg-danger': user.status}">
<td><input type="checkbox" v-model="user.status"></td>
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.sex?"男":"女"}}</td>
<td>{{user.salary}}</td>
<td>{{user.status ? '是' : '否'}}</td>
<td>
<button type="button" class="btn btn-warning" @click="showModal(user.id)">修改</button>
<button type="button" class="btn btn-danger" @click="delHandle(user.id)">删除</button>
</td>
</tr>
</tbody>
</table>
<p class="bg-success">
总人数：{{count}}；在职人数：{{onlineCount}}；离职人数：{{unOnlineCount}}；
</p>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ref="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">添加用户信息</h4>
</div>
<div class="modal-body">
<form>
<input type="hidden" name="id" v-model="modalData.id">
<div class="form-group">
<label for="name">用户名：</label>
<input v-model="modalData.name" type="text" class="form-control" name="name" id="name"
placeholder="请输入用户名...">
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input v-model="modalData.age" type="number" class="form-control" id="age" name="age" max="100" min="0"
placeholder="请输入年龄...">
</div>
<div class="form-group">
<label>性别：</label>
<div class="sex-group">
<label><input type="radio" name="sex" value="1" v-model.number="modalData.sex"> 男 </label>
<label><input type="radio" name="sex" value="0" v-model.number="modalData.sex"> 女 </label>
</div>
</div>
<div class="form-group">
<label for="salary">工资：</label>
<input v-model="modalData.salary" type="number" class="form-control" id="salary" name="salary"
placeholder="请输入工资..." min="0">
</div>
<div class="form-group">
<label>是否离职：</label>
<div class="sex-group">
<label><input type="radio" name="status" :value="false" v-model="modalData.status"> 在职 </label>
<label><input type="radio" name="status" :value="true" v-model="modalData.status"> 离职 </label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" @click="submitHandle">保存</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="/jquery-3.1.1/jquery-3.1.1.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="./js/vue2.6.14.js"></script>
<script>
new Vue({
el:'#app',
data:{
userList: [
{ id: Number.parseInt(Date.now() + Math.random() * 1000), name: '李明', age: 29, sex: 1, salary: 10000, status: true },
{ id: Number.parseInt(Date.now() + Math.random() * 1000), name: '杨顶天', age: 39, sex: 1, salary: 16000, status: false },
{ id: Number.parseInt(Date.now() + Math.random() * 1000), name: '张三', age: 33, sex: 1, salary: 13000, status: false },
{ id: Number.parseInt(Date.now() + Math.random() * 1000), name: '李四', age: 45, sex: 0, salary: 11000, status: false },
{ id: Number.parseInt(Date.now() + Math.random() * 1000), name: '王五', age: 50, sex: 0, salary: 12000, status: false },
],
modalData: {
id: '',
name: '',
age: 0,
sex: 1,
salary: 0,
status: false
},
showType: 1,
},
methods: {
emptyModalData(){
this.modalData = {
id:'',
name:'',
age:0,
sex:1,
salary:0,
status: false
}
},
//添加
showModal(id){
this.emptyModalData()
if(id) this.modalData = this.userList.find(el =>el.id ==id)
$('#myModal').modal('show')
},
//提交
submitHandle(){
if (this.modalData.name.trim().length === 0) return alert('用户名不能为空')
if(!this.modalData.id) this.userList.push({...modalData,id: Number.parseInt(Date.now() + Math.random() * 1000) })
if(this.modalData.id) this.userList.splice(this.userList.findIndex(el =>el.id === this.modalData.id),1,this.modalData)
$('#myModal').modal('hide')
},
//删除
delHandle(id){
this.userList = this.userList.filter(el => el.id !== id)
}
},
computed:{
allChecked:{
get(){
},
set(){
}
},
//总人数
count(){
return this.userList.length;
},
//在职人数
onlineCount(){
return this.userList.reduce((num,el) => num+= !el.status,0)
},
//离职人数
unOnlineCount(){
return this.userList.reduce((num,el) => num+= el.status,0)
},
tableShowData() {
if (this.showType === 1) return this.userList
if (this.showType === 2) return this.userList.filter(el => !el.status)
if (this.showType === 3) return this.userList.filter(el => el.status)
}
}
})
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
