在官网中有实例

<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>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
data() {
return {
checkAll: false,
checkedCities: ['上海', '北京'],
cities: cityOptions,
isIndeterminate: true
};
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
};
</script>

一般都是把el-checkbox放在el-checkbox-group里面进行循环的。

1:只能写@change事件而不能写@click。而且可以将这个事件加在el-checkbox-group上面。这样每次点击checkbox框变化它都能捕捉到。也可以放在el-checkbox上面这样点击时获取的是你当时点击的checkbox。

2:v-model上面的值是你checkbox的选中的值。v-model写在了checkbox-group上面,这样获取的就是循环的里面所有选中的,不是一条数组选中的。有了v-model就可以不用写:checked属性来决定他是否选中了。

遇到的问题:我在el-checkbox-group和el-checkbox都添加了@change事件,导致当我选中某一项值,el-checkbox的v-model的值没有变化。可能是无法判断浏览器到底执行了哪个事件。

解决:去掉el-checkbox-group

 <div class="lesson-publish-checkbox">
<!--<el-checkbox-group v-model="checkedNumber[index]" @change="handleCheckedNumberChange($event,index)">-->
<el-checkbox v-for="student in cls.students" :key="student.studentId" :label="student.studentId"
-model="student.isPublished" :disabled="student.hasPublished" @change="studentCheckChange(cls)">{{student.studentName}}
</el-checkbox>
<!--</el-checkbox-group>-->
</div>

el-checkbox遇到的问题的更多相关文章

  1. TreeView htc 改写

    call the function loadTree(treeviewId) when body is loaded <body onload="loadTree('tvSelect' ...

  2. EL和JSTL专题

    EL简介 EL全名为Expression Language,它原本是JSTL 1.0为方便存取数据所自定义的语言.当时只能在JSTL标签中使用,如下: <c:out value="${ ...

  3. jQuery中的checkbox问题

    一开始的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. EL表达式Expression Language

    表达式语言Expression Language目的:简化jsp代码 EL内置对象 1.pageContext2.pageScope3.requestScope4.sessionScope5.appl ...

  5. easyui combobox 带 checkbox

    $('#cc').combobox({ url:'combobox_data1.json', method:'get', valueField:'id', textField:'text', pane ...

  6. Javascript实现CheckBox的全选与取消全选的代码(转)

    js函数 复制代码 代码如下: <script type="text/javascript"> function checkAll(name) { var el = d ...

  7. easyui combobox 中实现 checkbox

    $('#cc').combobox({ url:'combobox_data1.json', method:'get', valueField:'id', textField:'text', pane ...

  8. 实战1--应用EL表达式访问JavaBean的属性

    (1)编写index.jsp页面,用来收集用户的注册信息 <%@ page language="java" pageEncoding="GBK"%> ...

  9. javaweb学习总结(三十)——EL函数库

    一.EL函数库介绍 由于在JSP页面中显示数据时,经常需要对显示的字符串进行处理,SUN公司针对于一些常见处理定义了一套EL函数库供开发者使用. 这些EL函数在JSTL开发包中进行描述,因此在JSP页 ...

  10. ognl el表达式 property

    <s:iterator value="list" status="statu" var="alarminfo"> <tr& ...

随机推荐

  1. 我也来----xia bi bi 一下----微信小程序

    工作刚到一阶段 就看了看微信小程序  自己做了个小dome 主要是为了让我女朋友能够学习做菜! 然而悲催的发现我根本没有App ID   不说快了  直接上图 个人感觉开发起来还是很简单的. 对着AP ...

  2. ERP项目实施记录10

    好久没有更新,因为进度一直拖着.已经实施了20个月了,很多东西没有开发出来.原因多方面的,虽然在此打算吐槽一下开发公司,但其实很大部分责任还是在我们自己. 不多说了,看图:

  3. Improved GAN

    https://www.bilibili.com/video/av9770302/?p=16 从之前讲的basic gan延伸到unified framework,到WGAN 再到通过WGAN进行Ge ...

  4. Ubuntu 使用命令行连接无线网

    一.查看可以使用的无线网: nmcli dev wifi 二.连接无线网: nmcli dev wifi connect ‘essid’(网络名称) password ‘password’(密码) 可 ...

  5. python摸爬滚打之day17----类与类之间的关系

    1.类与类之间的联系 1.1  依赖关系 类A中使用了类B, 类B作为参数传进类A的方法中被使用. 这种关系中类与类之间的联系是最轻的. class Elephant: def open(self,e ...

  6. springboot中通过cors协议解决跨域问题

    1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现. 针对跨域问题,我们可能第一个想到的解决方案就是jsonp,并且以前处理跨域问题我基本也是这么处 ...

  7. Spring 学习教程(二): IOC/DI+AOP

    1. IOC / DI Spring是一个基于IOC和AOP的结构J2EE系统的框架 IOC 反转控制 是Spring的基础,Inversion Of Control 简单说就是创建对象由以前的程序员 ...

  8. 使用scrapy入门教程

    创建项目 scrapy startprogect demo 创建爬虫 scrapy genspider myDomain madomian.com 直接创建文件也可以 运行爬虫 scrapy craw ...

  9. 020-并发编程-java.util.concurrent之-jdk6/7/8中ConcurrentHashMap、HashMap分析

    一.概述 哈希表(hash table)也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技术(比如memcached)的核心其实就是在内存中维护一张大的哈希表. 是根据关键码值(Key ...

  10. Asp.net Core认证和授权:JWT认证和授权

    JWT验证一般用户移动端,因为它不像cookie验证那样,没有授权跳转到登陆页面 JWT是json web token的简称,在  jwt.io 网址可以看到 新建一个API项目,通过postman ...