vue實現全選框效果

一、總結

一句話總結：

全選的checkbox點擊的時候判斷這個checkbox的狀態，如果沒選中，說明下一個操作是選中所有

下面的每個checkbox判斷一下是否所有的checkbox都被選中，是則選擇全選那個，否則全選那個置為不選，因為vue數據更新有延遲，所以弄個定時器

  allClick: function() {
      this.lists.forEach((item,index,array)=>{
          if(!this.all_checked) item.checked=true;
          else item.checked=false;
      });
  },
  check_one:function () {
      var to=setTimeout(function () {
          var checked_num=0;
          my_vue.lists.forEach((item,index,array)=>{
              if(item.checked) checked_num++;
          });
          console.log(checked_num);

          if(checked_num==my_vue.lists.length) my_vue.all_checked=true;
          else my_vue.all_checked=false;
      },300);
      //clearTimeout(to);
  }

1、vue數據更新有延遲怎么辦（比如點擊事件更新單個數據，但是在點擊事件的函數里面要用整個數據）？

弄個定時器就好

  check_one:function () {
      var to=setTimeout(function () {
          var checked_num=0;
          my_vue.lists.forEach((item,index,array)=>{
              if(item.checked) checked_num++;
          });
          console.log(checked_num);

          if(checked_num==my_vue.lists.length) my_vue.all_checked=true;
          else my_vue.all_checked=false;
      },300);
      //clearTimeout(to);
  }

二、vue實現全選框效果

1、效果圖

2、代碼

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <script src="../js/vue.js"></script>
  9     <title>Document</title>
 10     <style>
 11         * {
 12             padding: 0;
 13             margin: 0;
 14         }
 15         
 16         .wrap {
 17             width: 300px;
 18             margin: 100px auto 0;
 19         }
 20         
 21         table {
 22             border-collapse: collapse;
 23             border-spacing: 0;
 24             border: 1px solid orange;
 25             width: 300px;
 26         }
 27         
 28         th,
 29         td {
 30             border: 1px solid orange;
 31             color: #404060;
 32             padding: 10px;
 33         }
 34         
 35         th {
 36             background-color: yellowgreen;
 37             font: bold 16px;
 38             color: #fff;
 39         }
 40         
 41         td {
 42             font: 14px;
 43         }
 44         
 45         tbody tr {
 46             background-color: pink;
 47         }
 48         
 49         tbody tr:hover {
 50             cursor: pointer;
 51             background-color: lightcyan;
 52         }
 53     </style>
 54 </head>
 55 
 56 <body>
 57     <div class="wrap" id="app">
 58         <table>
 59             <thead>
 60                 <tr>
 61                     <th>
 62                         <input v-model="all_checked" type="checkbox" @click="allClick()" />
 63                     </th>
 64                     <th>商品</th>
 65                     <th>價錢</th>
 66                 </tr>
 67             </thead>
 68             <tbody>
 69                 <tr v-for="item in lists">
 70                     <td>
 71                         <input v-model="item.checked" @click="check_one()" type="checkbox" />
 72                     </td>
 73                     <td>{{item.title}}</td>
 74                     <td>{{item.price}}</td>
 75                 </tr>
 76 
 77             </tbody>
 78         </table>
 79     </div>
 80     <script src="js/vue.js"></script>
 81     <script>
 82         window.onload = function() {
 83             var my_vue=new Vue({
 84                 el: '#app',
 85                 data: {
 86                     all_checked:false,
 87                     lists: [{
 88                         title: "FORD黑管金邊",
 89                         price: "599",
 90                         checked:true,
 91                     }, {
 92                         title: "YSL圓管",
 93                         price: "320",
 94                         checked:false,
 95                     }, {
 96                         title: "阿瑪尼",
 97                         price: "420",
 98                         checked:false,
 99                     }, {
100                         title: "嬌蘭kisskiss",
101                         price: "400",
102                         checked:true,
103                     }, {
104                         title: "香奈兒",
105                         price: "360",
106                         checked:false,
107                     }, ]
108                 },
109                 methods: {
110                     allClick: function() {
111                         this.lists.forEach((item,index,array)=>{
112                             if(!this.all_checked) item.checked=true;
113                             else item.checked=false;
114                         });
115                     },
116                     check_one:function () {
117                         var to=setTimeout(function () {
118                             var checked_num=0;
119                             my_vue.lists.forEach((item,index,array)=>{
120                                 if(item.checked) checked_num++;
121                             });
122                             console.log(checked_num);
123 
124                             if(checked_num==my_vue.lists.length) my_vue.all_checked=true;
125                             else my_vue.all_checked=false;
126                         },300);
127                         //clearTimeout(to);
128                     }
129                     
130                 },
131             })
132         }
133     </script>
134 </body>
135 
136 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue實現全選效果如何實現復選框的全選和取消全選效果 VUE+Elementui實現復選框的多選與全選 Vue實現勾選框全選和局部選擇功能 Vue復選框的全選 jQuery實現全選效果 html checkbox 實現全選/取消全選效果 Angular6實現復選框的全選實現復選框的全選和反選 layui 復選框checkbox 實現全選全選