美文网首页
element-ui el-checkbox绑定和获取值的问

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

作者: 七號7777 | 来源:发表于2020-03-04 16:37 被阅读0次

    参考文章: 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)
    }
    

    相关文章

      网友评论

          本文标题:element-ui el-checkbox绑定和获取值的问

          本文链接:https://www.haomeiwen.com/subject/ugbvlhtx.html