1. <template>
  2. <div class="content">
  3. <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
  4. <Checkbox
  5. :indeterminate="indeterminate"
  6. :checked="checkAll"
  7. @on-change="handleCheckAll">全选</Checkbox>
  8. </div>
  9. <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
  10. <Checkbox label="香蕉"></Checkbox>
  11. <Checkbox label="苹果"></Checkbox>
  12. <Checkbox label="西瓜"></Checkbox>
  13. </CheckboxGroup>
  14. </div>
  15. </template>
  16. <script>
  17. export default {
  18. data () {
  19. return {
  20. indeterminate: false,
  21. checkAll: false,
  22. checkAllGroup: ['香蕉', '西瓜']
  23. }
  24. },
  25. methods: {
  26. handleCheckAll () {
  27. if (!this.indeterminate) {
  28. this.checkAll = true;
  29. this.indeterminate = true;
  30. }else {
  31. this.checkAll = !this.checkAll;
  32. this.indeterminate = false;
  33. }
  34.  
  35. if (this.checkAll) {
  36. this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
  37. } else {
  38. this.checkAllGroup = [];
  39. }
  40. },
  41. checkAllGroupChange (data) {
  42. if (data.length === ) {
  43. this.indeterminate = true;
  44. this.checkAll = true;
  45. } else if (data.length > ) {
  46. this.indeterminate = false;
  47. this.checkAll = false;
  48. } else {
  49. this.indeterminate = false;
  50. this.checkAll = false;
  51. }
  52. }
  53. }
  54. }
  55. </script>
<template>
<div class="content">
<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
<Checkbox
:indeterminate="indeterminate"
:checked="checkAll"
@on-change="handleCheckAll">全选</Checkbox>
</div>
<CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
<Checkbox label="香蕉"></Checkbox>
<Checkbox label="苹果"></Checkbox>
<Checkbox label="西瓜"></Checkbox>
</CheckboxGroup>
</div>
</template>
<script>
export default {
data () {
return {
indeterminate: false,
checkAll: false,
checkAllGroup: ['香蕉', '西瓜']
}
},
methods: {
handleCheckAll () {
if (!this.indeterminate) {
this.checkAll = true;
this.indeterminate = true;
}else {
this.checkAll = !this.checkAll;
this.indeterminate = false;
}
 
if (this.checkAll) {
this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
} else {
this.checkAllGroup = [];
}
},
checkAllGroupChange (data) {
if (data.length === ) {
this.indeterminate = true;
this.checkAll = true;
} else if (data.length > ) {
this.indeterminate = false;
this.checkAll = false;
} else {
this.indeterminate = false;
this.checkAll = false;
}
}
}
}
</script>

iview checkbox demo(文档改写)的更多相关文章

  1. swagger暴露程序接口文档

    Swagger2是一个帮助用户.团队.企业快速.高效.准确地生产API服务的工具组件,同时还提供了部分测试功能,它的官方网站是https://swagger.io/. 1.引入Maven <de ...

  2. JAVA连接Excel最好用的开源项目EasyExcel,官方使用文档及.jar包下载

    EasyExcel是一个基于Java的简单.省内存的读写Excel的开源项目.在尽可能节约内存的情况下支持读写百M的Excel. github地址:https://github.com/alibaba ...

  3. 前端经常使用插件使用文档 以及demo

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  4. JS文档和Demo自动化生成工具 - SmartDoc发布

    曾几何时,当你码神附体,一路披荆斩棘的完成代码后,带着“一码在手,天下我有”的傲然环顾之时,却发现单元测试.API文档.Demo实例陆续向你砸来,顿时有木有一种冰水挑战后的感觉.而这时你应该:哟哟,快 ...

  5. react文档demo实现输入展示搜索结果列表

    文档页面地址:https://doc.react-china.org/docs/thinking-in-react.html 该文档只给了具体实现思路,下面是我实现的代码. 初学react,如果有写的 ...

  6. 文档/视图(01):第一个Demo

    学习文档视图编程的第一个demo,程序比较简单,主要对文档模板,文档,视图等相互关系的一个了解. 功能:菜单添加一个[操作]项,然后新建四份空白文档,点击[操作]之后,在四份空白文档上面各绘制一个Bu ...

  7. Vitepress搭建组件库文档(下)—— 组件 Demo

    上文 <Vitepress搭建组件库文档(上)-- 基本配置>已经讨论了 vitepress 搭建组件库文档的基本配置,包括站点 Logo.名称.首页 home 布局.顶部导航.左侧导航等 ...

  8. Java+FlexPaper+swfTools 文档在线预览demo

    1.概述 主要原理 1.通过第三方工具openoffice,将word.excel.ppt.txt等文件转换为pdf文件 2.通过swfTools将pdf文件转换成swf格式的文件 3.通过FlexP ...

  9. Spring MVC中使用Swagger生成API文档和完整项目示例Demo,swagger-server-api(二十)

    一:Swagger介绍 Swagger是当前最好用的Restful API文档生成的开源项目,通过swagger-spring项目 实现了与SpingMVC框架的无缝集成功能,方便生成spring r ...

随机推荐

  1. golang 使用编译选项-H=windowsgui后,仍然输出log到console

    大概原理: 略略略... if debug { modkernel32 := syscall.NewLazyDLL("kernel32.dll") procAllocConsole ...

  2. c++链表演示

    #include<iostream> #include<string.h> #include<conio.h> using namespace std; #defi ...

  3. 官网英文版学习——RabbitMQ学习笔记(八)Remote procedure call (RPC)

    在第四篇学习笔记中,我们学习了如何使用工作队列在多个工作者之间分配耗时的任务.   但是,如果我们需要在远程计算机上运行一个函数并等待结果呢?这是另一回事.这种模式通常称为远程过程调用或RPC.   ...

  4. 【pwnable.kr】 unlink

    pwnable.kr 第一阶段的最后一题! 这道题目就是堆溢出的经典利用题目,不过是把堆块的分配与释放操作用C++重新写了一遍,可参考<C和C++安全编码一书>//不是广告 #includ ...

  5. 常见SQL语句杂谈(笔记)

    SQL语句(总结,完整的select语句) select distinct * from 表名 where ...group by ... having ...order by ... limit s ...

  6. JAVA - 创建SpringBoot项目

    JAVA - 创建SpringBoot项目 Spring Boot是由Pivotal团队提供的全新框架,设计目的是用来简化新Spring应用的初始搭建以及开发过程.它主要推崇的是'消灭配置’,实现零配 ...

  7. ZOJ 1409 communication system 双变量型的DP

    这个题目一开始不知道如何下手,感觉很像背包,里面有两个变量,一个带宽B,一个价格P,有n个设备,每个设备有k个可选的器材(只需选一个),每个器材都有自己的B和P, n个设备选n个器材,最终,FB=所有 ...

  8. 《thinkphp》二、创建实例

    1.目录结构 project 应用部署目录 ├─application 应用目录(可设置) │ ├─common 公共模块目录(可更改) │ ├─index 模块目录(可更改) │ │ ├─confi ...

  9. pop3&smtp

    pop3&smtp pop3 Post Office Protocol - Version 3 pop3协议是离线邮件协议,是客户端取邮件用的. 默认监听在TCP:110端口. POP3会话有 ...

  10. Python MySQL 创建表

    章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...