Maison > Article > interface Web > Méthode VueJS pour implémenter un système de gestion des utilisateurs

Méthode VueJS pour implémenter un système de gestion des utilisateurs

coldplay.xixiavant: 2020-07-17 17:35:182365parcourir

L'exemple de cet article partage le code spécifique de VueJS pour implémenter le système de gestion des utilisateurs pour votre référence. Le contenu spécifique est le suivant

Code source

<!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: &#39;#app&#39;,
  data: {
   user: {},
   users: [
   {name: &#39;Switch&#39;, age: 25, email: &#39;switchvov@163.com&#39;},
   {name: &#39;Kitty&#39;, age: 25, email: &#39;kitty@163.com&#39;},
   ],
   nowIndex: -1, // 当前要删除项的索引
   delIndexes: [], // 删除项索引列表
   selectAll: false, // 删除所有
   disableDelSelect: true, // 关闭删除选项
   modalTarget: &#39;&#39;,
   modalToggle: &#39;&#39;
  },
  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 = &#39;#del&#39;;
    this.modalToggle = &#39;modal&#39;;
    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 : &#39;&#39; }}吗？
   </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

Recommandations d'apprentissage associées : Tutoriel vidéo javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript github

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Explication détaillée de la mise en œuvre ajax de l'exportation de rapports ExcelArticle suivant：Explication détaillée de la mise en œuvre ajax de l'exportation de rapports Excel

Articles Liés

Voir plus