admin

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

@@ -70,14 +70,14 @@
                             <td>{{item.name}}</td>
                             <td>{{item.price}}</td>
                             <td>
-                                <button type="button" class="btn btn-primary btn-sm">删除</button>
+                                <button @click.stop="delFun(item.id)" type="button" class="btn btn-primary btn-sm">删除</button>
                             </td>
                         </tr>
                         <tr>
                             <th colspan="3">总价</th>
                             <td>{{sum}}</td>
                             <td>
-                                <button type="button" class="btn btn-primary btn-sm">删除选中</button>
+                                <button @click="delCheck" type="button" class="btn btn-primary btn-sm">删除选中</button>
                             </td>
                         </tr>
                     </tbody>
@@ -117,12 +117,31 @@
                 ]
             },
             methods: {
+                // 单行选中
                 checkLine(id) {
                     this.dataList.map((val) => {
                         if (val.id == id) {
                             val.isCheck = !val.isCheck;
                         }
                     })
+                },
+                // 单行删除
+                delFun(id){
+                    let newDataList = this.dataList.filter((val)=>{
+                        if(val.id != id){
+                            return true
+                        }
+                    })
+                    this.dataList = newDataList;
+                },
+                // 删除选中
+                delCheck(){
+                    let newDataList = this.dataList.filter((val)=>{
+                        if(!val.isCheck){
+                            return true
+                        }
+                    })
+                    this.dataList = newDataList;
                 }
             },
             computed: {