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"><spanaria-hidden="true">&times;</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.userListif (this.showType === 2) return this.userList.filter(el => !el.status)if (this.showType === 3) return this.userList.filter(el => el.status)}}
})
</script>
</html>

Vue+ bootStrap 实现员的增删改查离职操作全选单选相关推荐

vue实现对数据的增删改查(CURD)
vue实现对数据的增删改查(CURD) 导语: 网上看到一个写的比较好的学习文章,转载分享一下在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的 ...
【Vue】MyClassroom.vue 使用组件方法实现增删改查-20221226
MyClassroom.vue 使用组件方法实现增删改查. <template><div class="container"><div class=& ...
web端获取微信小程序云数据库数据实现增删改查等操作
获取小程序数据库前言一.微信小程序Web SDK 1.微信官方示例 2.未登录模式注意事项二.完整流程演示 1.开启云数据库访问权限 2.编写云函数 3.web前端引入js 4.web页面js访 ...
spring入门(11)-spring与hibernate整合完成增删改查的操作（封装HibernateTemplate模版类对象）
今天是spring的最后一节课,这节课老师讲了spring与hibernate整合完成增删改查的操作,这是很重要的一节课,这也是第一次真正的实现spring结合Hibernate和数据库连接上,下面是 ...
php xml 增删改查,PHP实现对xml进行简单的增删改查(CRUD)操作示例
本文实例讲述了PHP实现对xml进行简单的增删改查(CRUD)操作.分享给大家供大家参考,具体如下: 假如有下面xml文件: 55.8 56 40 339 如何使用php对它进行CRUD?其实像这种简 ...
python单链表操作_单链表的创建、增删改查等操作（Python实现）
单链表的创建.增删改查等操作(Python实现) # 单链表 class Node: def __init__(self, elem): self.elem = elem self.next = No ...
python对sqlite增删改查_Python操作sqlite3数据库增删改查
SQLite,是一款轻型的数据库,占用资源非常的低.这里记录下对sqlite3的增删改查相关操作,顺便复习一下SQL语句- -. 一.创建数据库连接到一个现有的数据库.如果数据库不存在,那么它就会被 ...
动态网站作业4-JSP中实现数据库的增删改查的操作
动态网站作业4-JSP中实现数据库的增删改查的操作用Statement向数据库中添加元素 1.创建JavaBean–UserBean package com.media.bean;public cl ...
XML解析以及增删改查的操作6
有一个字符串操作类StringUtil要贴出来,之前代码里用到: public class StringUtil {public static final String BLANKS = " ...
用Python+Mysql+MDUI实现的数据库增删改查列表操作及单，多文件上传实例
用Python+Mysql+MDUI实现的数据库增删改查列表操作及单,多文件上传实例.web服务用flask框架,数据库操作用的pymysql框架.教程在我B站有的. 开源地址:https://git ...

Vue+ bootStrap 实现员的增删改查离职操作全选单选

Vue+ bootStrap 实现员的增删改查离职操作全选单选

Vue+ bootStrap 实现员的增删改查离职操作全选单选相关推荐

最新文章

热门文章

Vue+ bootStrap 实现员的增删改查 离职操作 全选单选

Vue+ bootStrap 实现员的增删改查 离职操作 全选单选

Vue+ bootStrap 实现员的增删改查 离职操作 全选单选相关推荐

最新文章

热门文章

Vue+ bootStrap 实现员的增删改查离职操作全选单选

Vue+ bootStrap 实现员的增删改查离职操作全选单选

Vue+ bootStrap 实现员的增删改查离职操作全选单选相关推荐