VueJS实现用户管理系统
2023-09-07 阅读 15 评论 0
摘要：VueJS实现用户管理系统 @(VueJS)[基础] VueJS实现用户管理系统源代码源代码 <!doctype html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport"content="width=device-
VueJS实现用户管理系统

@(VueJS)[基础]
VueJS实现用户管理系统
- 源代码
源代码

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户管理系统</title><script src="js/jquery.js"></script><script src="js/bootstrap.js"></script><script src="js/vue.js"></script><link rel="stylesheet" href="css/bootstrap.css" type="text/css"><script>$(function () {let vm = new Vue({el: '#app',data: {user: {},users: [{name: 'Switch', age: 25, email: 'switchvov@163.com'},{name: 'Kitty', age: 25, email: 'kitty@163.com'},],nowIndex: -1, // 当前要删除项的索引delIndexes: [], // 删除项索引列表selectAll: false,   // 删除所有disableDelSelect: true, // 关闭删除选项modalTarget: '',modalToggle: ''},methods: {addUser: function () {this.users.push(this.user);this.user = {};},deleteUser: function () {if (this.delIndexes.length > 0) {// 从大到小排序，不排序则会出现删除错乱this.delIndexes.sort(function (a, b) {return b - a;});for (let i = 0; i < this.delIndexes.length; i++) {this.users.splice(this.delIndexes[i], 1);}this.delIndexes = [];this.selectAll = false;return;}if (this.nowIndex === -1) {this.users = [];return;}this.users.splice(this.nowIndex, 1);},toggleAll: function () {if (this.selectAll) {let length = this.users.length;this.delIndexes = [];for (let i = 0; i < length; i++) {this.delIndexes.push(i);}return;}this.delIndexes = [];}},watch: {delIndexes: function () {if (this.delIndexes.length > 0) {this.disableDelSelect = false;this.modalTarget = '#del';this.modalToggle = 'modal';return;}this.disableDelSelect = true;}}});});</script>
</head>
<body>
<div id="app" class="container"><h2 class="text-center">添加用户</h2><form class="form-horizontal"><div class="form-group"><label for="name" class="control-label col-sm-2 col-sm-offset-2">姓 名：</label><div class="col-sm-6"><input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名"></div></div><div class="form-group"><label for="age" class="control-label col-sm-2 col-sm-offset-2">年 龄：</label><div class="col-sm-6"><input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄"></div></div><div class="form-group"><label for="email" class="control-label col-sm-2 col-sm-offset-2">邮 箱：</label><div class="col-sm-6"><input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱"></div></div><div class="form-group text-center"><input type="button" value="添  加" class="btn btn-primary" @click="addUser"><input type="reset" value="重  置" class="btn btn-primary"></div></form><br/><table class="table table-bordered table-hover"><caption class="h3 text-center text-info">用户列表</caption><thead><tr><th class="text-center"><input type="checkbox" @click="toggleAll" v-model="selectAll"></th><th class="text-center">序号</th><th class="text-center">姓名</th><th class="text-center">年龄</th><th class="text-center">邮箱</th><th class="text-center">操作</th></tr></thead><tbody><tr v-for="(user, index) in users" class="text-center"><td><input type="checkbox" :value="index" :id="index" v-model="delIndexes" @click="selectAll = false"></td><td>{{ index+1 }}</td><td>{{ user.name }}</td><td>{{ user.age }}</td><td>{{ user.email }}</td><td><button class="btn btn-danger" data-toggle="modal" data-target="#del" @click="nowIndex = index;delIndexes=[]">删除</button></td></tr><tr><td colspan="6" class="text-right"><button class="btn btn-danger" data-toggle="modal" data-target="#del" @click="nowIndex = -1;delIndexes=[]">删除所有</button><button class="btn btn-danger" :data-toggle="modalToggle" :data-target="modalTarget":class="{disabled:disableDelSelect}">删除选中</button></td></tr></tbody></table><!-- 弹出框 --><div class="modal" id="del"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button class="close" data-dismiss="modal"><span>&times;</span></button><h4 class="modal-title" v-show="delIndexes.length > 0">确认要删除用户<span v-for="(value, index) in delIndexes">{{ users[value].name }}<span v-if="index < delIndexes.length - 1">、</span></span>吗？</h4><h4 class="modal-title" v-show="delIndexes.length === 0 && nowIndex !== -1">确认要删除用户{{ users[nowIndex] ? users[nowIndex].name : '' }}吗？</h4><h4 class="modal-title" v-show="delIndexes.length === 0 && nowIndex === -1">确认要删除所有用户吗？</h4></div><div class="modal-body text-center"><button class="btn btn-primary" data-dismiss="modal">取消</button><button class="btn btn-primary" data-dismiss="modal" @click="deleteUser">确认</button></div></div></div></div>
</div>
</body>
</html>
GitHub：vue-user-manager
原文链接：https://hbdhgg.com/4/14806.html
发表评论: