关于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);
            }
        })
    }
}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值