关于vue数据列表全选效果，checkbox选中效果

功能点：数据选中效果，点击选中，再次点击取消选中。点击全选，数据列表全部选中，更新统计的选中数据。

代码片段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);
            }
        })
    }
}