element-ui el-checkbox的一些坑

本文详细介绍了 Element UI 中 Checkbox 组件的使用方法,包括如何通过 v-model 控制选中状态、@change 事件的使用及不同版本的处理方式等。此外还介绍了如何添加和删除选中的项。

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

<el-checkbox @change="handleCheckedCitiesChange"  v-model="checkAll"   :label="list.eventtypeid"  >全选</el-checkbox>

 <el-checkbox-group   v-model="checkOne" class="checkGroup" >
      <el-checkbox  v-for="(operate,index1) in list.operation" :label="operate.actionid"   :key="operate.actionid"  @change="handleCheckedCitiesChange">{{operate.actionname}}</el-checkbox>
 </el-checkbox-group>

看上面的例子,都是把el-checkbox放在el-checkbox-group里面进行循环的

1.只能写@change事件而不能写@click。而且你可以把这个事件加在el-checkbox-group上面。这样每次点击的checkbox框变化他都能捕捉到。也可以放在el-checkbox上面,这样点击时获取的是你当时点击的checkbox。

2.v-model上面的值是你checkebox的选中的值,这里label绑定的是id(也就是我们想要获取给后台的)而不是显示的内容。而且必须写个label赋值id,不然你写name的话,他选择时就把名字相同的都选中了。v-model写在了checkbox-group上面。这样获取的就是循环的里面所有选中的,不是一条数组选中的。有了v-model就可以不用写:checked属性来决定他是否选中了。如果选中了。你就在v-model绑定的那个数组里添加上这个id值就可以啦,如果取消选中就在数组里删除这个值。

删除:比如this.actionid是我们想删除的。

this.checkOne=this.checkOne.map(res=>{
        if(res!=this.actionid){return res;}
});

添加:this.checkOne.push(this.actionid);

3.@change事件如何获取他点击是取消还是选中呢?这里element-ui 1.~版本和2.~版本写法不一样。

低版本获取的是一个对象,你从对象里获取到target.checked的boolean值。高版本直接是boolean值

1.~版本

handleCheckAllChange(event) {
        this.checkedCities = event.target.checked ? cityOptions : [];
        this.isIndeterminate = false;
      },

2.0版本的是boolean值
handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      }

4.v-model="checkOne"绑定的checkOne是个数组。定义的时候如果不是数组可能会选择一个其他所有的都被选中了

评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值