Vue小案例 之 商品管理------批量删除与商品数量的调整

通过索引进行删除，进行测试，是否获取其索引：

测试效果：

测试代码，在vue中定义一个空的数组，以便后面进行数据的绑定：

data:{
                    imgUrl:'../res/images/',
                    imgName:'lovely.ico',
                    goods:{
                        id:'',
                        name:'',
                        price:'',
                        num:'',
                        type:''
                    },
                    goodsType:['零食','电子产品','生活用品'],
                    goodsArry:[
                    {id:'',name:'可乐',price:3.5,num:,type:'零食'},
                    {id:'',name:'GTX2080',price:,num:,type:'电子产品'},
                    {id:'',name:'牙刷',price:,num:,type:'生活用品'}

                    ],
                    colNum:,
                    delArray:[]

                },

测试的HTML代码：

            <tr v-for="(item,index) in goodsArry" :key="item.id">
                <td>{{index}}</td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.num}}</td>
                <td>{{item.type}}</td>
                <td>
                    <button  @click="delGoods(index)">删除</button>
                </td>

                <td>
                    <input type="checkbox" :value="index" v-model="delArray"/>

                </td>
            </tr>
            {{delArray}}

实现选择删除商品功能，通过遍历索引数组：

为了保证数据列表从小排到大:

测试使其列表从小排到大

测试代码：

 delSelected(){

                         this.delArray.sort((a,b)=>{
                             return a-b;
                         });

                         console.log(this.delArray);

                         for(var i=;i<this.delArray.length;i++)
                         {
                             this.goodsArry.splice(this.delArray[i]-i,);
                         }
                         this.delArray=[];
                     }

                }

最终实现该功能的总代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>商品管理------创建页面与部分数据</title>
         <script src="../js/vue.js"></script>

         <script>

             window .onload= () =>{
                 new Vue({
                 el:"#container",
                 data:{
                     imgUrl:'../res/images/',
                     imgName:'lovely.ico',
                     goods:{
                         id:'',
                         name:'',
                         price:'',
                         num:'',
                         type:''
                     },
                     goodsType:['零食','电子产品','生活用品'],
                     goodsArry:[
                     {id:'',name:'可乐',price:3.5,num:,type:'零食'},
                     {id:'',name:'GTX2080',price:,num:,type:'电子产品'},
                     {id:'',name:'牙刷',price:,num:,type:'生活用品'}

                     ],
                     colNum:,
                     delArray:[]//删除选中的索引

                 },
                 methods:{
                     addGoods(){

                         this.goodsArry.push(this.goods);
                         this.goods={};
                     },
                     delGoods(index){

                         this.goodsArry.splice(index,);
                     },
                     clearGoodsArry(){

                      this.goodsArry=[];
                      },
                      delSelected(){

                          this.delArray.sort((a,b)=>{
                              return a-b;
                          });

                          console.log(this.delArray);

                          for(var i=;i<this.delArray.length;i++)
                          {
                              this.goodsArry.splice(this.delArray[i]-i,);
                          }
                          this.delArray=[];
                      }

                 }
             });
             }
         </script>
         <style>
             #container{
                 margin:  auto;
                 text-align: center;
                 width: 1000px;
                 border:2px solid gray;
             }

           .header{

          margin: 10px;
          border: 1px solid gray;
           }

       .header .title{

       color: rgb(,,);
     background: rgb(,,);
        }
      .sub_title{
       background:rgb(,,);
      color: rgb(,,);
      font-size: 30px;
      }
 .form-warp{
    margin: 10px;
    padding-bottom: 10px;
   border: 1px solid gray;

 }
 .form-warp .content{

   line-height: 35px;
 }

 .form-warp input{
   width: 150px;
   height: 18px;

 }

         .form-warp select{
     width: 154px;
     height: 24px;
 }

    .table-warp{
     padding-bottom: 10px;
     margin: 10px;
      border: 1px solid gray;
 }
 .table-warp th{
   width: 80px;
   color: #ffff;
   background: rgb(,,);
 }

 .logo
 {
   position: relative;
   top: 12px;
 }
 .fontColor{

     color: gray;
     text-align: center;
 }

         </style>
     </head>
     <body>
         <div id="container">

             <!--logo title-->
             <div class="header">
                 <img :src="imgUrl+imgName" class="logo"  height="80px"  width="100px"   />
                 <h1 class="title">商品管理</h1>

             </div>

             <!--输入部分input-->
             <div  class="form-warp">
                 <div class="sub_title">添加商品</div>
                 <div class="content">

                     商品编号：<input type="text" placeholder="请输入商品编号"  v-model="goods.id"/><br />
                     商品名称：<input type="text" placeholder="请输入商品名称"  v-model="goods.name"/><br />
                     商品价格：<input type="text" placeholder="请输入商品价格"  v-model="goods.price"/><br />
                     商品数量：<input type="text" placeholder="请输入商品数量" v-model="goods.num"/><br />
                     商品类型：<select v-model="goods.type">

                         <option value="" disabled="disabled">--请选择--</option>
                         <option v-for="type in goodsType">{{type}}</option>

                     </select>

             </div>
             <div class="form-btn">
                 <button @click="addGoods">确认添加</button>
                 <button @click="goods= { } ">重置信息</button>

             </div>

     </div>
     <!--显示表格-->
     <div class="table-warp">
         <div :class="{fontColor:goodsArry.length<=0}"   class="sub_title">商品列表</div>
         <table border="" align="center">

             <tr>
                 <th>序号</th>
                 <th>编号</th>
                 <th>名称</th>
                 <th>价格</th>
                 <th>数量</th>
                 <th>类型</th>
                 <th>删除</th>
                 <th>选择</th>
             </tr>
             <td :colspan="colNum" height="150px" v-show="goodsArry.length<=0">
                 暂无商品
             </td>

             <tr v-for="(item,index) in goodsArry" :key="item.id">
                 <td>{{index}}</td>
                 <td>{{item.id}}</td>
                 <td>{{item.name}}</td>
                 <td>{{item.price}}</td>
                 <td>{{item.num}}</td>
                 <td>{{item.type}}</td>
                 <td>
                     <button  @click="delGoods(index)">删除</button>
                 </td>

                 <td>
                     <input type="checkbox" :value="index" v-model="delArray"/>

                 </td>
             </tr>
         {{delArray}}
         </table>

         <div class="clear-btn">
           <a href="#" @click="delSelected" v-show="delArray.length>0" >删除选中</a>
           <a href="#" @click="clearGoodsArry" v-show="goodsArry.length>0" >清空全部</a>
       </div>

       </div>

             </div>
     </body>
 </html>

实现批量删除功能代码