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)}},
elementUI checkbox选中回显操作注意事项相关推荐
- Element-ui表格选中回显
先瞄一下,是不是你要的效果 然后,废话不多说,直接上代码啦 1 <template> 2 <div class> 3 <div class="projectDa ...
- SpringBoot+MyBatisPlus+DataTables实现退货管理的添加和编辑时控制checkbox的回显选中
场景 SpringBoot+My BatisPlus+DataTables实现企业车间退货管理(学习企业级开发思想): https://blog.csdn.net/BADAO_LIUMANG_QIZH ...
- iview table后端分页 多选 翻页选中回显
在iview的table组件中,前端在多选时如果点击下一页则丢失了上一页table的多选数据(由于采用的后端分页,每次翻页会直接刷新为新数据) 实现效果 全选反选 选中单条 取消单条 代码部分 定义数 ...
- java select下拉标签_java中下拉框select和单选按钮的回显操作
前提: 1.下拉框select 请选择部门 selected="selected" >${department.department} 2.单选按钮radio的回显 chec ...
- ElementUI级联框回显问题
每一次错误的发生都是成长的开始! 在开发中使用Element的级联框回显后台返回的数据时产生了回显异常的问题.产生的问题点是各级联中已经选中正确的数据了,但是数据框中没有数据显示出来.如图: 正确显示 ...
- select2回显操作
1.在做项目的过程中,经常用到select2,它比select下拉框方便,经常有一些需求就是select搜出来显示的和回显到select框上的结果不一样. 效果图如下: 下拉框搜索展示的 下拉框回显的 ...
- java中下拉框select和单选按钮的回显操作
1.下拉框select的回显 <select name="departmentId" id="departmentId"><option va ...
- 通过jquery回显操作(笔记)
123
- elementUI checkbox选中与取消选中
<template><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll&qu ...
最新文章
- python绘图添加上下标
- 中国航发9名劳模工匠变身“高级制造工程师”
- 使用VSCode写Python代码的推荐安装的插件
- 以列表形式输出_04 Python之列表、集合和字典的推导式
- Youtube最佳Red5 官方视频下载指南,字幕【亲测成功】
- postfix和dovecot架设邮件服务器的一些记录1
- python实现人形识别_100行Python代码实现人体肤色检测
- Adobe DPS解决方案工作流程及其收费情况介绍
- 计算机Excel运行环境,Excel Server Tutorial
- HP WebInspect 软件 简介
- 2008服务器系统之家,UEFI+GPT模式安装Windows server 2008 R2教程
- 悦听player音乐播放器
- Reasoning-RCNN 论文笔记
- flutter 斗音页面
- 尝试用visio画个等边三角形
- 在VFP中如何调用其它程序
- 根号 巴比伦_建立巴比伦卫生设计系统
- word设置每页50行
- 如何选择PXI与PXIe开关模块
- 第十三章:项目相关方管理 - (13.0 什么是项目相关方管理)