admin

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

@@ -61,7 +61,8 @@
                         </tr>
                     </thead>
                     <tbody class="table-group-divider">
-                        <tr @click="checkLine(item.id)" :class="{'table-active':item.isCheck}" 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" v-bind:checked="item.isCheck">
@@ -74,7 +75,7 @@
                         </tr>
                         <tr>
                             <th colspan="3">总价</th>
-                            <td>100</td>
+                            <td>{{sum}}</td>
                             <td>
                                 <button type="button" class="btn btn-primary btn-sm">删除选中</button>
                             </td>
@@ -116,14 +117,25 @@
                 ]
             },
             methods: {
-                checkLine(id){
-                    this.dataList.map((val)=>{
-                        if(val.id == id){
+                checkLine(id) {
+                    this.dataList.map((val) => {
+                        if (val.id == id) {
                             val.isCheck = !val.isCheck;
                         }
                     })
                 }
             },
+            computed: {
+                sum() {
+                    let sumVal = 0;
+                    this.dataList.forEach((val)=>{
+                        if(val.isCheck){
+                            sumVal += val.price;
+                        }
+                    });
+                    return sumVal
+                }
+            }
         })
     </script>
 </body>