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

通过索引进行删除,进行测试,是否获取其索引:

测试效果:

 

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

data:{imgUrl:'../res/images/',imgName:'lovely.ico',goods:{id:'',name:'',price:'',num:'',type:''},goodsType:['零食','电子产品','生活用品'],goodsArry:[{id:'001',name:'可乐',price:3.5,num:10,type:'零食'},{id:'002',name:'GTX2080',price:9999,num:20,type:'电子产品'},{id:'003',name:'牙刷',price:5,num:30,type:'生活用品'}],colNum:7,delArray:[]},

 

测试的HTML代码:

            for="(item,index) in goodsArry" :key="item.id">{{index}}{{item.id}}{{item.name}}{{item.price}}{{item.num}}{{item.type}}"checkbox" :value="index" v-model="delArray"/>{{delArray}}

 

 

 

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

 

 

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

测试使其列表从小排到大

 

 测试代码:

 

 delSelected(){this.delArray.sort((a,b)=>{return a-b;});console.log(this.delArray);for(var i=0;i<this.delArray.length;i++){this.goodsArry.splice(this.delArray[i]-i,1);}this.delArray=[];}}

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

  1 
  2 
  3     
  4         "UTF-8">
  5         商品管理------创建页面与部分数据
  6         
  7         
  8         
 72         
144     
145     
146         
"container"> 147 148 149
class="header"> 150 "imgUrl+imgName" class="logo" height="80px" width="100px" /> 151

class="title">商品管理

152 153
154 155 156
class="form-warp"> 157
class="sub_title">添加商品
158
class="content"> 159 160 商品编号:"text" placeholder="请输入商品编号" v-model="goods.id"/>
161 商品名称:"text" placeholder="请输入商品名称" v-model="goods.name"/>
162 商品价格:"text" placeholder="请输入商品价格" v-model="goods.price"/>
163 商品数量:"text" placeholder="请输入商品数量" v-model="goods.num"/>
164 商品类型:<select v-model="goods.type"> 165 166 167 168 169 select> 170 171
172
class="form-btn"> 173 174 175 176 177 178
179 180
181 182
class="table-warp"> 183
class="{fontColor:goodsArry.length<=0}" class="sub_title">商品列表
184 "1" align="center"> 185186187188189190191192193194195196199200for="(item,index) in goodsArry" :key="item.id"> 201202203204205206207210211217218 {{delArray}} 219
序号 编号 名称 价格 数量 类型 删除 选择
"colNum" height="150px" v-show="goodsArry.length<=0"> 197 暂无商品 198
{{index}} {{item.id}} {{item.name}} {{item.price}} {{item.num}} {{item.type}} 208 209 212 "checkbox" :value="index" v-model="delArray"/> 213 214 215 216
220 221 222 223 224 228 229
230 231 232 233 234 235
236 237
实现批量删除功能代码

 

转载于:https://www.cnblogs.com/jiguiyan/p/10706745.html

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

Copyright www.122dh.com Rights Reserved.