elementui复选框组使用与遇到的问题

1、复选框组使用
2、默认值的设置
3、遇到的问题
- 3.1、导致问题的写法
- 3.2、正常可以使用的写法
4、事件冒泡的问题

今天有个弹出窗编辑的时候elementui的复选框出了问题，控制台也没有报错，但就是死活选不中，解决后决定写一遍文章描述一下复选框的用法，以及这个问题是怎么导致的。

1、复选框组使用

// deviceDialogFormData.config默认为['0']
<el-checkbox-group v-model="deviceDialogFormData.config" @change="handleCheckedChange"><el-checkbox :label="'0'" disabled>小明</el-checkbox><el-checkbox :label="'1'">小红</el-checkbox><el-checkbox :label="'2'">小张</el-checkbox>
</el-checkbox-group>

复选框值改变事件的方法

// value复选框组的选中值组成的数组
handleCheckedChange(value) {let checkedCount = value.length;
}

2、默认值的设置

复选框组的选中值以数组形式返回，所以默认值也必须设置为数组。

deviceDialogFormData.config = ['0']

3、遇到的问题

新增与编辑用的是同一个组件，但是新增的复选框组没有问题，编辑时复选框组却点了没反应。
随后在handleCheckedChange方法中打印，点击“小红”，发现数组选中值也没有改变，但是仍然出发了事件，这就很奇怪了。

// value复选框组的选中值组成的数组
handleCheckedChange(value) {console.log(value); // 点击选中小红打印选中的值结果依然为['1']，正常情况下应该为['1','2']let checkedCount = value.length;
}

随后检查代码，发现是在传值时对象写法问题。因为使用的表单，所以是进行了表单数据绑定的，deviceDialogFormData对象绑定了表单，deviceDialogFormData.config则对应选中的复选框数据，但是因为在编辑时赋值写法问题，所以导致无法正常操作。

复选框组所在的表单行的html标签代码：

            <el-form-item label="设备配置" prop="config" style="text-align: left;"><el-checkbox:indeterminate="isIndeterminate"v-model="checkAll"@change="handleCheckAllChange">全选</el-checkbox><el-checkbox-group v-model="deviceDialogFormData.config" @change="handleCheckedChange"><el-checkbox :label="'0'" disabled>小明</el-checkbox><el-checkbox :label="'1'">小红</el-checkbox><el-checkbox :label="'2'">小张</el-checkbox></el-checkbox-group></el-form-item>

3.1、导致问题的写法

赋值创建对象字面量对象之后再给config赋值。

this.deviceDialogFormData = {// 其它属性值的赋值略
}
this.deviceDialogFormData.config = data.config.split(",");

3.2、正常可以使用的写法

赋值创建对象字面量对象时时就将config写进去。

this.deviceDialogFormData = {// 其它属性值的赋值略config: data.config.split(",")
}

4、事件冒泡的问题

elementui的复选框如果需要阻止事件冒泡，最好在外卖加一层div，把事件绑定到该div上。

<div class="tim" id="tim" v-for="(fileName, index) in nowPhotoArr" :key="fileName" @click.stop="openPhotoDetails(fileName, index)"><div class="checkbox"  v-on:click.stop=""><el-checkbox :label="fileName"></el-checkbox></div><img class="img" :src="playPath + fileName"><p class="name">{{fileName}}</p></div>

详细情况参考这篇文章
https://blog.csdn.net/weixin_44849078/article/details/89406583

elementui复选框组使用与遇到的问题相关推荐

Element ui 前端自定义分页/批量选中/批量删除/单个删除/element-ui(复选框)type=“selection“置灰
直接看代码 <template><div class="page-content"><div class="page-header" ...
jquery复选框组清空选中的值_防火墙基本配置：配置策略组
配置策略组用户可以将一些策略规则组织到一起组成策略组.用户可以直接对策略组进行配置,以简化管理. 配置策略组,包括新建策略组.删除策略组.启用/禁用策略组.添加/删除策略规则成员.编辑策略组和显示禁 ...
jquery复选框组清空选中的值_jQuery获取复选框被选中数量及判断选择值的方法详解...
这篇文章主要介绍了jQuery获取复选框被选中数量及判断选择值的方法,结合实例形式分析了jQuery操作复选框进行判定与统计的相关技巧,非常具有实用价值,需要的朋友可以参考下本文实例讲述了jQuer ...
php 复选框组,php – 选择所有复选框
我有一个网页,以表格/表格的形式返回搜索结果.我想有一个全选复选框,可以选择搜索结果的所有复选框.我的显示结果代码如下: while ($row = mysql_fetch_assoc($result ...
jquery复选框组清空选中的值_jQuery选取所有复选框被选中的值并用Ajax异步提交数据...
昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...
jquery复选框组清空选中的值_jquery操作复选框(checkbox)的12个小技巧总结
1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val() 或者 $("input:[type='checkbox' ...
前端学习（2007）vue之电商管理系统电商系统之优化复选框的样式
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（2006）vue之电商管理系统电商系统之绘制商品参数的复选框
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
easyui前端实现多选框_前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...

elementui复选框组使用与遇到的问题

elementui复选框组使用与遇到的问题

1、复选框组使用

2、默认值的设置

3、遇到的问题

3.1、导致问题的写法

3.2、正常可以使用的写法

4、事件冒泡的问题

elementui复选框组使用与遇到的问题相关推荐

最新文章

热门文章