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

2020-03-04  本文已影响0人  七號7777

参考文章: 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)
}
上一篇下一篇

猜你喜欢

热点阅读