参考文章: https://blog.csdn.net/qq_33769914/article/details/81324267?utm_source=blogxgwz0
<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>
1、el-checkbox是放在el-checkbox-group里面进行循环的。
2、传值给后端与显示的不同,这时候注意绑定方式。
① v-model上面的值是你checkebox的选中的值,也就是label绑定的值(v-model绑定的是数组) --- id(也就是我们想要获取给后台的)而不是显示的内容。要显示的文本在标签<el-checkbox>之间渲染需要显示的名字即可
② v-model写在了checkbox-group上面(绑定的是数组)。这样获取的就是循环的里面所有选中的,不是一条数组选中的。有了v-model就可以不用写:checked属性来决定他是否选中了。如果要选中了,就在v-model绑定的那个数组里添加上这个id值就可以啦,如果取消选中就在数组里删除这个值。
3、只能写@change事件而不能写@click。而且你可以把这个事件加在el-checkbox-group上面。这样每次点击的checkbox框变化他都能捕捉到。也可以放在el-checkbox上面,这样点击时获取的是你当时点击的checkbox。(这点看个人需求)
4、@change事件如何获取他点击是取消还是选中,不同版本获取到的会有区别,可自行打印看结果
// 1.~版本
handleCheckAllChange(event) {
console.log(event.target.checked)
}
// 2.0版本的是boolean值
handleCheckAllChange(val) {
console.log(val)
}