vue中实现购物车效果复选框的全选、全不选、以及子选项
vue复选框的全选和全不选 适合初学者这是静态完整代码做了一个简单的购物车效果<li class="header"><div class="pro-check"><el-checkbox v-model="isAllCheck" @change="selectedAll">全选</el-checkbox>&l...
·
vue复选框的全选和全不选 适合初学者
这是静态完整代码
做了一个简单的购物车效果
<li class="header">
<div class="pro-check">
<el-checkbox v-model="isAllCheck" @change="selectedAll">全选</el-checkbox>
</div>
<div class="pro-img"></div>
<div class="pro-name">商品名称</div>
<div class="pro-price">单价</div>
<div class="pro-num">数量</div>
<div class="pro-total">小计</div>
<div class="pro-action">操作</div>
</li>
<li class="shoplist" v-for="(item,index) in shopCart" :key="index">
<div class="pro-check">
<el-checkbox v-model="item.select" @change="itemCheck(item)"></el-checkbox>
</div>
<div class="pro-img">
<img :src="item.imgSrc" alt="">
</div>
<div class="pro-name">{{item.title}}</div>
<div class="pro-price">¥{{item.price}}</div>
<div class="pro-num">
<el-input-number v-model="item.num" @change="handleChange" :min="1" :max="10" ></el-input-number>
</div>
<div class="pro-total">¥{{getTotalItem[index]}}</div>
<div class="pro-action">
<el-button type="danger" @click="removeShop(index)">删除</el-button>
</div>
</li>
重点来了
这是控制全选和全不选的复选框
这边是子选项
一、当勾选全选时下面子选项都要选中,再次点击全选时,则是取消全选;
二、当子选项都选中时,全选框也要选中;子选项有一个没有选中全选不勾选。
data() {
return {
// imgList: [],
isAllCheck: false,
// num: 1
}
},
selectedAll() {
// 控制全选 全不选
this.shopCart.forEach(item => {
!this.isAllCheck ? item.select = false : item.select = true
})
},
itemCheck(item) {
// 当子选项全选中时 全选按钮也要选中 反之则不选中
var arrTrue = [] // 定义两个空数组 当子选项是选中的状态则放入arrTrue数组中反之放进arrFalse里
var arrFalse = []
this.shopCart.forEach(item=> {
if(item.select) {
arrTrue.push(item.select)
}else {
arrFalse.push(item.select)
}
})
// 当arrTrue长度等于购物车列表的数组的长度时,说明全部选中
if(arrTrue.length == this.shopCart.length) {
this.isAllCheck = true
}
// 当arrFalse 长度大于0时 说明其中有 没有勾选的子选项
if(arrFalse.length >0) {
this.isAllCheck = false
}
},
全选效果
其中有一个没选中的效果
到这里差不多结束了 有什么问题可以留言哈。
更多推荐
已为社区贡献2条内容
所有评论(0)