700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > elementUI checkbox选中回显操作注意事项

elementUI checkbox选中回显操作注意事项

时间:2018-11-29 14:43:10

相关推荐

elementUI  checkbox选中回显操作注意事项

具体的详情介绍请看,elementUI checkbox。

checkbox的回显操作是基于el-checkbox-group 标签v-module绑定的数组来实现回显,这个数组可以是一维数组,也可以是数组对象,具体使用那个都行,

不同点在于,el-checkbox 标签绑定的lable值的不同,如果 group 标签绑定的是数组对象,则 lable 绑定的是每一个对象;

如果group 绑定的是一维数组,则 lable 绑定的是具体值。

<template><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox><div style="margin: 15px 0;"></div><el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"><el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox></el-checkbox-group></template>

// 这是一维数组checkedCities: ['上海', '北京'],cities: ['上海', '北京', '广州', '深圳'],

也可以是数组对象,数据来源为数组对象,回显绑定的也可以是一维数组:

<el-checkbox-group v-model="checkedList" class="checked-list" @change="handleChange"><template v-for="(item,index) in memberList"><el-checkboxv-if="!item.contacts && ind!=1":label="item.imAccount":key="index"@change="(val)=>(checkChange(val,item))"><userAndGroupChatAvatar:text="item.textAvator":avatar="item.imgAvator"></userAndGroupChatAvatar><span>{{ item.nickName }}</span></el-checkbox></template></el-checkbox-group>

lable 绑定为每一个数组对象中的具体值:imAccount。

回显主要应用事件为 全选的change事件,及el-checkbox-group 标签的 change 事件,而el-checkbox-group 标签的 change 事件总是返回当前更新后的值

想要知道当前点击是取消,还是勾选,可以借用el-checkbox-group 标签内嵌的 el-checkbox 标签的 change 事件,可以携带参数,

如上代码段中的checkChange 事件:

checkChange(val,item){if(val){// 添加this.selectedPerson.push(item)}else{ // 删除this.selectedPerson = this.selectedPerson.filter(filter=>filter.imAccount != item.imAccount)}},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。