VueJS实现用户管理系统的方法

前端  /  管理员 发布于 6年前   195

本文实例为大家分享了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: '[email protected]'},   {name: 'Kitty', age: 25, email: '[email protected]'},   ],   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><p id="app" class="container"> <h2 class="text-center">添加用户</h2> <form class="form-horizontal"> <p class="form-group">  <label for="name" class="control-label col-sm-2 col-sm-offset-2">姓 名：</label>  <p class="col-sm-6">  <input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名">  </p> </p> <p class="form-group">  <label for="age" class="control-label col-sm-2 col-sm-offset-2">年 龄：</label>  <p class="col-sm-6">  <input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">  </p> </p> <p class="form-group">  <label for="email" class="control-label col-sm-2 col-sm-offset-2">邮 箱：</label>  <p class="col-sm-6">  <input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱">  </p> </p> <p class="form-group text-center">  <input type="button" value="添 加" class="btn btn-primary" @click="addUser">  <input type="reset" value="重 置" class="btn btn-primary"> </p> </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> <!-- 弹出框 --> <p class="modal" id="del"> <p class="modal-dialog">  <p class="modal-content">  <p 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>  </p>  <p 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>  </p>  </p> </p> </p></p></body></html>

GitHub：vue-user-manager

相关学习推荐：javascript视频教程

以上就是VueJS实现用户管理系统的方法的详细内容，更多请关注其它相关文章！


  • 上一条：
    vue实现户籍管理系统的实例解析
    下一条：
    在 Vue 中实现 Echarts 随窗体变化

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客