el-checkbox 全选/反选 赋值

本文介绍了如何在Vue.js中使用el-checkbox组件动态绑定数据,并将对象数组转化为数值数组,以便于全选/全不选操作。通过uselist和v-model的配合,展示了如何处理多选状态并保持一致性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我的数据是

[{"label":"住宅","value":"1"},{"label":"商业","value":"2"},{"label":"公寓","value":"3"}]

 目的是返回一个数组[1,2,3]

<el-checkbox :indeterminate="isuseIndeterminate" v-model="usecheckAll" @@change="useCheckAllChange">全选</el-checkbox>
                            <el-checkbox-group v-model="select.use" @@change="useCheckedCitiesChange">
                                <el-checkbox v-for="use in uselist" :label="use.value" :key="use.value">{{use.label}}</el-checkbox>
                            </el-checkbox-group>

:label="use.value" 这个必须设置成value,如果设置成了label,会返回中文了。

data:

uselist: [],

isuseIndeterminate: true,
usecheckAll: false,

methods: {
            useCheckAllChange(val) {
                this.select.use = val ? this.uselist.map(v => v.value) : [];
                this.isuseIndeterminate = false;
            },
            useCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.usecheckAll = checkedCount === this.uselist.length;
                this.isuseIndeterminate = checkedCount > 0 && checkedCount < this.uselist.length;
            }
}

this.uselist.map(v => v.value)这句是关键。不然你得到的是对象的数组,赋值不了的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值