功能点:数据选中效果,点击选中,再次点击取消选中。点击全选,数据列表全部选中,更新统计的选中数据。
代码片段js:
data(){
return {
//假数据省略了
productList:[{....},{......}],
// 选中项的集合
selectedList:[],
}
}
methods:{
//单个选中效果,checkbox点击事件
selectedData(item){
//先判断是否存在字段checked,没有就添加
if(typeof item.checked === 'undefined'){
this.$set(item,"checked",true);
}else{
item.checked = !item.checked;
}
//选中项的集合
this.totalData();
},
// 全选checkAll(true)和取消全选 checkAll(false)
checkAll(flag){
this.ckeckAllFlag = flag;
this.productList.forEach((item,index)=>{
if(item.checked === 'undefined'){
this.$set(item,"checked",this.ckeckAllFlag);
}else{
item.checked = !this.ckeckAllFlag;
}
})
//选中项的集合
this.totalData();
},
//选中项的集合
totalData(){
this.selectedList=[];
this.productList.forEach((item,index)=>{
if(item.checked){
this.selectedList.push(item);
}
})
}
}