uni-app做购物车的全选和选中, 进行判断, 首先要用到es6的every方法, 详细请看(ES6 数组的扩展 - ES6文档), every的好处就是, 根据遍历数组如果条件全部满足则返回true, 否则返回false, 这个用来做子类的选中和全选的选中紧紧相连, 话不多说, 上代码
子类的选中和控制全选
// 点击值为false
if (value.goods_state == 2) {
// if(state.count < 1) return
state.sum -= value.goods_price * value.goods_num // 总价
state.count -= +value.goods_num // 取消减去
value.goods_state = 1 // 1为false 2 为 true
state.allChecked = false // 点击任何一个多选框 直接全选为false
} else {
state.count += +value.goods_num // 添加加量
value.goods_state = 2
state.sum += value.goods_price * value.goods_num // 值为true+去
const carList = state.shopList.every(item => {
return item.goods_state === 2
})
// 如果条件为真
if (carList) {
state.allChecked = true // 全选按钮为true
} else {
state.allChecked = false // 全选按钮为false
}
}全选控制子类的checked
state.allChecked = !state.allChecked // 取反
// 如果全选为true
if (state.allChecked) {
state.sum = 0
state.count = 0
state.shopList.forEach(item => {
item.goods_state = 2
// 全选则相加
state.sum += item.goods_price * item.goods_num
state.count += +item.goods_num
})
console.log(state.sum, state.count);
} else {
// 如果全不选则数量0总价0
state.count = 0
state.sum = 0
state.shopList.map(item => {
item.goods_state = 1
})
}效果图
