element-ui el-checkbox绑定和获取值的问题

参考文章: https://blog.csdn.net/qq_33769914/article/details/81324267?utm_source=blogxgwz0

全选

 
      {{operate.actionname}}
 

1、el-checkbox是放在el-checkbox-group里面进行循环的。

2、传值给后端与显示的不同,这时候注意绑定方式。

① v-model上面的值是你checkebox的选中的值,也就是label绑定的值(v-model绑定的是数组) --- id(也就是我们想要获取给后台的)而不是显示的内容。要显示的文本在标签之间渲染需要显示的名字即可
② 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)
}

你可能感兴趣的:(element-ui el-checkbox绑定和获取值的问题)