admin

11_Vue基础/练习4_列表管理.html

@@ -61,10 +61,10 @@
                         </tr>
                     </thead>
                     <tbody class="table-group-divider">
-                        <tr class="table-active" v-for="(item,index) in dataList" :key="item.id">
+                        <tr @click="checkLine(item.id)" :class="{'table-active':item.isCheck}" v-for="(item,index) in dataList" :key="item.id">
                             <th scope="row">{{index+1}}</th>
                             <td>
-                                <input type="checkbox">
+                                <input type="checkbox" v-bind:checked="item.isCheck">
                             </td>
                             <td>{{item.name}}</td>
                             <td>{{item.price}}</td>
@@ -114,7 +114,16 @@
                         isCheck: false
                     }
                 ]
-            }
+            },
+            methods: {
+                checkLine(id){
+                    this.dataList.map((val)=>{
+                        if(val.id == id){
+                            val.isCheck = !val.isCheck;
+                        }
+                    })
+                }
+            },
         })
     </script>
 </body>