admin

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

@@ -42,11 +42,11 @@
             </div>
             <!-- 添加商品 -->
             <div class="add-goods input-group mt-3">
-                <input type="text" class="form-control" placeholder="商品名称" aria-label="Recipient's username"
+                <input v-model="goodsName" type="text" class="form-control" placeholder="商品名称" aria-label="Recipient's username"
                     aria-describedby="button-addon2">
-                <input type="text" class="form-control" placeholder="商品价格" aria-label="Recipient's username"
+                <input v-model.number="goodsPrice" type="text" class="form-control" placeholder="商品价格" aria-label="Recipient's username"
                     aria-describedby="button-addon2">
-                <button class="btn btn-outline-secondary" type="button" id="button-addon2">添加商品</button>
+                <button @click="addGoods" class="btn btn-outline-secondary" type="button" id="button-addon2">添加商品</button>
             </div>
             <!-- 表格区域 -->
             <div class="table-content">
@@ -89,6 +89,8 @@
         let app = new Vue({
             el: "#app",
             data: {
+                goodsName:"",
+                goodsPrice:"",
                 searchInp: "",
                 dataList: [
                     {
@@ -118,6 +120,35 @@
                 ]
             },
             methods: {
+                // 添加商品
+                addGoods(){
+                    if(this.goodsName && this.goodsPrice){
+                        let newId = 0;
+                        // this.dataList.forEach((val)=>{
+                        //     if(val.id > newId){
+                        //         newId = val.id;
+                        //     }
+                        // })
+                        // Math.max(1,2,3,4)
+                        // console.log(newId);
+
+                        let idList = this.dataList.map((val)=>{
+                            return val.id;
+                        })
+                        // console.log(Math.max(...idList));
+                        newId = Math.max(...this.dataList.map(val => val.id))+1;
+                        console.log(newId);
+                        let newGoods = {
+                            id:newId,
+                            name:this.goodsName,
+                            price:this.goodsPrice,
+                            isCheck:false
+                        }
+                        this.dataList.push(newGoods);
+                    }else{
+                        alert("请输入商品名称和价格");
+                    }
+                },
                 // 单行选中
                 checkLine(id) {
                     this.dataList.map((val) => {