思路:
通过多选框的true 或者false,判断这条订单是否被选中。多选框的的选中与否自带true false,不用向后台数据额外插入字段来判断是否被选中。
HTML:
<ul>
<li v-for="item in dataList" :key="item.id" >
<div class="inline-block" >
<Checkbox
v-model="item.checked"
@on-change="oneCheckFun(item.checked,item.id)"
></Checkbox>
</div>
<img src="../../assets/goods/1.png" alt="商品图片" >
<span class="inline-block " >
{{item.goodsName}}
</span>
<span class="inline-block text-center red" >
{{item.price}}
</span>
<span class="inline-block text-center" >
<Input v-model="item.number" >
<Button slot="prepend" @click="changeNumber(item, -1)" :disabled="item.number == 1" >-</Button>
<Button slot="append" @click="changeNumber(item, 1)">+</Button>
</Input>
</span>
<span class="inline-block red text-center" >
{{ item.price*item.number }}
</span>
<span class="inline-block">
<Icon type="ios-trash" />
</span>
</li>
</ul>
js:
<script>
export default
{
data()
{
return{
checkAll: false, //全选
checkArr: [], //选中的数组
dataList:
[
{
id: 0,
goodsName: '0【七夕价】五谷磨房核桃芝麻黑豆粉',
price: 10,
number: 1
},
{
id: 1,
goodsName: '1五谷磨坊杂粮乌粉黑芝麻早餐食品即食粉',
price: 10,
number: 2
},
{
id: 2,
goodsName: '2美加净细嫩柔白防晒乳100ml50ml',
price:10,
number: 1
}
]
}
},
computed:
{
total()
{
let total = 0;
this.dataList.forEach( (item, index) => {
if(item.checked)
total +=item.price * item.number;
});
return total;
}
},
methods:
{
//全选
checkAllFun()
{
//如果全选值为true,向选中数组checkArr插入选中id
if(this.checkAll)
{
this.clearArr();
this.dataList.forEach( (item, index) => {
this.checkArr.push(item.id);
//给后台数据插入一个字段checked,主要用来控制订单的多选框,而不是用来判断是否选中。
this.$set(item, "checked", this.checkAll);
});
}
else
{
this.clearArr();
this.dataList.forEach( (item, index) => {
this.$set(item, "checked", this.checkAll);
});
}
},
//单选
oneCheckFun(check,id)
{
//如果单选,那就取消全选;
this.checkAll = false;
if(check)
{
this.checkArr.push(id);
this.checkArr.length == this.dataList.length ? this.checkAll = true : this.checkAll = false;
}
else
{
this.checkArr.splice(this.checkArr.indexOf(id), 1);
}
},
//清空选中数组
clearArr()
{
this.checkArr = [];
},
//修改商品数量
changeNumber(obj, value)
{
if( value < 0 && obj.number > 1)
{
--obj.number ;
}
else
{
++obj.number
}
}
}
}
</script>