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

测试效果：

测试代码，在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>

实现批量删除功能代码

Vue小案例 之 商品管理------批量删除与商品数量的调整的更多相关文章

  1. python3 - 商品管理的程序，商品信息都存在一个json串里面

    商品管理的程序,商品信息都存在一个json串里面 1.查询商品信息 #校验商品是否存在 2.新增商品 # #校验商品是否存在 #校验价格是否合法 3.修改商品信息 ##校验商品是否存在 if chic ...

  2. Vue小案例 之 商品管理------删除商品与提示

    实现删除商品功能 根据索引来进行删除商品: 实现删除商品的HTML: <!--显示表格--> <div class="table-warp"> <di ...

  3. Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式

    代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...

  4. Vue小案例 之 商品管理------修改商品数量以及增加入库日期属性

    实现修改商品的数量: 加入的代码: css: .clear-btn{ text-align: right; padding-right: 10px; } .table-warp a{ text-dec ...

  5. Vue小案例 之 商品管理------为之前的页面修改样式

    最终修改的页面效果: 修改的css: <style> #container{ margin: auto; text-align: center; width: 1000px; border ...

  6. Vue小案例 之 商品管理------添加商品

    进行添加button,以及商品列表的创建 html: <div class="form-btn"> <button>确认添加</button> ...

  7. Vue小案例 之 商品管理------创建页面与部分数据

    logo的路径: 页面的初始布局: 初始的HTML: <div id="container"> <!--logo title--> <div clas ...

  8. Vue小案例（一）

    案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...

  9. vue小案例--简易评论区

    一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件. ...

随机推荐

  1. FluentScheduler:开源轻量级定时任务调度架构

    安装:FluentScheduler Install-Package FluentScheduler 一.控制台中使用 using System; using System.Collections.G ...

  2. 10.C# 构造函数

    1.构造函数 构造函数是用来初始化对象的,只能由new运算符调用.构造函数与类同名,没有返回值,不能用void修饰,可以有public和private两种修饰符,当用private修饰时外界不能访问到 ...

  3. react-redux 使用后台数据初始化（渲染）界面

    注:首先在redux中改变state只能通过action操作,reducers改变state 在组件中 store.js import { createStore } from "redux ...

  4. Bootstrap-常用图标glyphicon

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  5. Bootstrap-全局CSS样式-图片样式

    Bootstrap第二部分:全局CSS样式-图片样式.img-rounded   圆角图片.img-circle    圆形图片.img-thumbnail 缩略图片.img-responsive响应 ...

  6. linux中使用另一用户打开拥有图形界面的程序

    在archlinux中使用oracle用户执行oui无法显示图形界面的问题.结果没解决,后来发现执行 xhost +si:localuser:oracle, 然后再使用oracle用户执行oui即可. ...

  7. Spark核心RDD：combineByKey函数详解

    https://blog.csdn.net/jiangpeng59/article/details/52538254 为什么单独讲解combineByKey? 因为combineByKey是Spark ...

  8. Windows 下VC++6.0制作、使用动态库和静态库

    Windows 下VC++6.0制作.使用动态库和静态库 一.VC++6.0制作.使用静态库 静态库制作 1.如图一在VC++6.0中new一个的为win32 static library工程并新建一 ...

  9. Beta分布深入理解

    一些公式 Gamma函数 (1) 贝叶斯公式 (2) 贝叶斯公式计算二项分布概率 现在有一枚未知硬币,我们想要计算抛出后出现正面的概率.我们使用贝叶斯公式计算硬币出现正面的概率.硬币出现正反率的概率和 ...

  10. django models数据库操作

    一.数据库操作 1.创建model表         基本结构 1 2 3 4 5 6 from django.db import models     class userinfo(models.M ...