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>
浙公网安备 33010602011771号