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>
实现批量删除功能代码
Vue小案例 之 商品管理------批量删除与商品数量的调整的更多相关文章
- python3 - 商品管理的程序，商品信息都存在一个json串里面
商品管理的程序,商品信息都存在一个json串里面 1.查询商品信息 #校验商品是否存在 2.新增商品 # #校验商品是否存在 #校验价格是否合法 3.修改商品信息 ##校验商品是否存在 if chic ...
- Vue小案例 之 商品管理------删除商品与提示
实现删除商品功能 根据索引来进行删除商品: 实现删除商品的HTML: <!--显示表格--> <div class="table-warp"> <di ...
- Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式
代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...
- Vue小案例 之 商品管理------修改商品数量以及增加入库日期属性
实现修改商品的数量: 加入的代码: css: .clear-btn{ text-align: right; padding-right: 10px; } .table-warp a{ text-dec ...
- Vue小案例 之 商品管理------为之前的页面修改样式
最终修改的页面效果: 修改的css: <style> #container{ margin: auto; text-align: center; width: 1000px; border ...
- Vue小案例 之 商品管理------添加商品
进行添加button,以及商品列表的创建 html: <div class="form-btn"> <button>确认添加</button> ...
- Vue小案例 之 商品管理------创建页面与部分数据
logo的路径: 页面的初始布局: 初始的HTML: <div id="container"> <!--logo title--> <div clas ...
- Vue小案例（一）
案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...
- vue小案例--简易评论区
一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件. ...
随机推荐
- [LeetCode] 566. Reshape the Matrix_Easy
In MATLAB, there is a very useful function called 'reshape', which can reshape a matrix into a new o ...
- 左右两栏div布局，高度自适应
页面结构如下: <div class="container"> <div class="left"> left </div> ...
- SEO--多领域
1.社交媒体SEO优化,例如:视频,吸引流量 2.电商SEO,很多不是皇冠的商家也可以被搜索到 3.新媒体 微博 和 微信营销 手机端的SEO等.传统的SEO已经渐渐不具备竞争力 SEO盈利:网盟.广 ...
- iOS UI基础-8.0 UIAlertView使用
弹出框的使用 1.实现代理UIAlertViewDelegate 2.弹出框 // 弹框初始化 UIAlertView *alert = [[UIAlertView alloc] initWithTi ...
- 从零开始一起学习SLAM | 神奇的单应矩阵
小白最近在看文献时总是碰到一个奇怪的词叫“homography matrix”,查看了翻译,一般都称作“单应矩阵”,更迷糊了.正所谓:“每个字都认识,连在一块却不认识”就是小白的内心独白.查了一下书上 ...
- Oracle 11g快速收集全库统计信息
环境:Oracle 11.2.0.4 采用并行的方式,快速收集全库统计信息,多用于跨版本升级之后,对全库的统计信息重新进行快速收集: --开启计时 set timing on --设置并行收集 exe ...
- sqli-labs(十八)
第五十五关:和上一关类似,只是拼凑的方法不一样,所以需要先判断后台是怎么拼凑的 分别输入id=1'--+ id=1"--+ id=') --+ ...
- npm 安装React Devtools调试工具
有时候没有***工具时,怎么安装React DevTool, 其一直接搜索到Chrome的插件安装即可. 其二, 可以通过下载github上的react-devtools, 然后打包,最后导入chro ...
- jQuery-图片轮播-随意切换图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- hbase-java-api002(flush)
package api; import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apa ...