admin

9_vue/练习4_商品列表.html

@@ -61,10 +61,11 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr v-for="(item,index) in tableData" >
+                    <!-- <tr @click="checkLine(item.id)" :class="{'active':item.isCheck}" v-for="(item,index) in tableData" > -->
+                    <tr @click="item.isCheck = !item.isCheck" :class="{'active':item.isCheck}" v-for="(item,index) in tableData" >
                         <th scope="row">{{index+1}}</th>
                         <td>
-                            <input type="checkbox">
+                            <input type="checkbox" :checked="item.isCheck">
                         </td>
                         <td>{{item.name}}</td>
                         <td>{{item.price}}</td>
@@ -73,7 +74,7 @@
                         </th>
                     </tr>
                     <th scope="row" colspan="3">总价</th>
-                    <td>0</td>
+                    <td>{{totalPrice}}</td>
                     <td>
                         <button type="button" class="btn btn-primary btn-sm">删除选中</button>
                     </td>
@@ -118,6 +119,20 @@
                 goodsName:"",
                 goodsPrice:""
             },
+            computed:{
+                // 计算选中商品的总价
+                totalPrice(){
+                    let total = 0;
+                    // 1. 先筛选出选中的商品
+                    this.tableData.forEach((item) => {
+                        if(item.isCheck){
+                            total += item.price;
+                        }
+                    });
+                    // 2. 返回总价
+                    return total;
+                }
+            },
             methods:{
                 // 搜索
                 searchFun(){
@@ -150,6 +165,18 @@
                     }
 
                     
+                },
+                // 单行选中
+                checkLine(id){
+                    console.log(id);
+                    // 根据id值进行匹配修改isCheck
+                    let newData = this.tableData.map((item)=>{
+                        if(item.id == id){
+                            item.isCheck = !item.isCheck
+                        }
+                        return item;
+                    })
+                    this.tableData = newData;
                 }
             }
         })