admin

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

@@ -19,7 +19,8 @@
         .add-box {
             width: 600px;
         }
-        .active{
+
+        .active {
             background-color: #ddd;
         }
     </style>
@@ -35,18 +36,19 @@
             </nav>
             <div class="row search-box my-3">
                 <div class="col-8">
-                    <input v-model="searchName" type="text" class="form-control" placeholder="请输入商品名称" aria-label="First name">
+                    <input v-model="searchName" type="text" class="form-control" placeholder="请输入商品名称"
+                        aria-label="First name">
                 </div>
                 <div class="col-4">
                     <button @click="searchFun" type="button" class="form-control btn btn-primary">搜索</button>
                 </div>
             </div>
             <div class="input-group mb-3 add-box">
-                <input v-model="goodsName" type="text" class="form-control" placeholder="请输入商品名称" aria-label="Recipient's username"
-                    aria-describedby="button-addon2">
+                <input v-model="goodsName" type="text" class="form-control" placeholder="请输入商品名称"
+                    aria-label="Recipient's username" aria-describedby="button-addon2">
 
-                <input v-model="goodsPrice" type="text" class="form-control" placeholder="请输入商品价格" aria-label="Recipient's username"
-                    aria-describedby="button-addon2">
+                <input v-model="goodsPrice" type="text" class="form-control" placeholder="请输入商品价格"
+                    aria-label="Recipient's username" aria-describedby="button-addon2">
 
                 <button @click="addFun" class="btn btn-outline-secondary" type="button" id="button-addon2">添加</button>
             </div>
@@ -62,7 +64,8 @@
                 </thead>
                 <tbody>
                     <!-- <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" >
+                    <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" :checked="item.isCheck">
@@ -70,14 +73,16 @@
                         <td>{{item.name}}</td>
                         <td>{{item.price}}</td>
                         <th>
-                            <button type="button" class="btn btn-primary btn-sm">删除</button>
+                            <button @click.stop="delSingle(item.id)" type="button"
+                                class="btn btn-primary btn-sm">删除</button>
                         </th>
                     </tr>
-                    <th scope="row" colspan="3">总价</th>
-                    <td>{{totalPrice}}</td>
-                    <td>
-                        <button type="button" class="btn btn-primary btn-sm">删除选中</button>
-                    </td>
+                    <tr>
+                        <th scope="row" colspan="3">总价</th>
+                        <td>{{totalPrice}}</td>
+                        <td>
+                            <button @click="delCheck" type="button" class="btn btn-primary btn-sm">删除选中</button>
+                        </td>
                     </tr>
                 </tbody>
             </table>
@@ -114,18 +119,18 @@
         new Vue({
             el: '#app',
             data: {
-                tableData:_data,
-                searchName:"",
-                goodsName:"",
-                goodsPrice:""
+                tableData: _data,
+                searchName: "",
+                goodsName: "",
+                goodsPrice: ""
             },
-            computed:{
+            computed: {
                 // 计算选中商品的总价
-                totalPrice(){
+                totalPrice() {
                     let total = 0;
                     // 1. 先筛选出选中的商品
                     this.tableData.forEach((item) => {
-                        if(item.isCheck){
+                        if (item.isCheck) {
                             total += item.price;
                         }
                     });
@@ -133,45 +138,59 @@
                     return total;
                 }
             },
-            methods:{
+            methods: {
+                // 删除选中商品
+                delCheck(){
+                    let newData = this.tableData.filter((item) => {
+                        return !item.isCheck
+                    })
+                    this.tableData = newData;
+                },
+                //删除单个商品
+                delSingle(id) {
+                    let newData = this.tableData.filter((item) => {
+                        return item.id != id;
+                    })
+                    this.tableData = newData;
+                },
                 // 搜索
-                searchFun(){
+                searchFun() {
                     // 过滤数组中符合条件的元素
-                    let newData = _data.filter((item)=>{
-                        if(item.name.indexOf(this.searchName)!=-1){
+                    let newData = _data.filter((item) => {
+                        if (item.name.indexOf(this.searchName) != -1) {
                             return true
                         }
                     })
                     this.tableData = newData;
                 },
                 // 添加商品
-                addFun(){
+                addFun() {
                     // 1. 先判断商品名称和商品价格是否为空
-                    if(this.goodsName=="" || this.goodsPrice==""){
+                    if (this.goodsName == "" || this.goodsPrice == "") {
                         console.log("请输入商品名称和商品价格")
-                        
-                    }else{
+
+                    } else {
                         let newGood = {
-                            id:_data[_data.length-1].id+1,
-                            name:this.goodsName,
-                            price:this.goodsPrice,
-                            isCheck:false
+                            id: _data[_data.length - 1].id + 1,
+                            name: this.goodsName,
+                            price: this.goodsPrice,
+                            isCheck: false
                         }
                         // 2. 添加商品
                         this.tableData.push(newGood)
                         // 3. 清空输入框
-                        this.goodsName=""
-                        this.goodsPrice=""
+                        this.goodsName = ""
+                        this.goodsPrice = ""
                     }
 
-                    
+
                 },
                 // 单行选中
-                checkLine(id){
+                checkLine(id) {
                     console.log(id);
                     // 根据id值进行匹配修改isCheck
-                    let newData = this.tableData.map((item)=>{
-                        if(item.id == id){
+                    let newData = this.tableData.map((item) => {
+                        if (item.id == id) {
                             item.isCheck = !item.isCheck
                         }
                         return item;