锐客网

  1. 首页 > it技术 > >

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


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

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

今天有个弹出窗编辑的时候elementui的复选框出了问题，控制台也没有报错，但就是死活选不中，解决后决定写一遍文章描述一下复选框的用法，以及这个问题是怎么导致的。
1、复选框组使用
// deviceDialogFormData.config默认为['0'] 小明 小红 小张

复选框值改变事件的方法
// value复选框组的选中值组成的数组 handleCheckedChange(value) { let checkedCount = value.length; }

2、默认值的设置 复选框组的选中值以数组形式返回，所以默认值也必须设置为数组。
deviceDialogFormData.config = ['0']

3、遇到的问题 【前端|elementui复选框组使用与遇到的问题】新增与编辑用的是同一个组件，但是新增的复选框组没有问题，编辑时复选框组却点了没反应。
随后在handleCheckedChange方法中打印，点击“小红”，发现数组选中值也没有改变，但是仍然出发了事件，这就很奇怪了。
前端|elementui复选框组使用与遇到的问题
文章图片

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

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

3.1、导致问题的写法 赋值创建对象字面量对象之后再给config赋值。
this.deviceDialogFormData = https://www.it610.com/article/{ // 其它属性值的赋值略 } this.deviceDialogFormData.config = data.config.split(",");

3.2、正常可以使用的写法 赋值创建对象字面量对象时时就将config写进去。
this.deviceDialogFormData = https://www.it610.com/article/{ // 其它属性值的赋值略 config: data.config.split(",") }

4、事件冒泡的问题 elementui的复选框如果需要阻止事件冒泡，最好在外卖加一层div，把事件绑定到该div上。
前端|elementui复选框组使用与遇到的问题
文章图片
{{fileName}}

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

    推荐阅读


    上一篇：弹性公网IP绑定弹性云服务器后如何由外部进行访问（）

    下一篇：日新录097:想象合成真实