<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>
<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. 《从Lucene到Elasticsearch全文检索实战》的P184页

    curl -XPOST "http://localhost:9200/_bulk?pretty" --data-binary @books.json 这句话在书中是以crul的命令 ...

  2. POJ1088:滑雪

    滑雪 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 82112   Accepted: 30706 Description ...

  3. 文本编辑器vim/vi——末行模式

    指令格式: #vim 文件路径作用:打开指定的文件. 进入方式:由命令模式进入,按下“:”或者“/(表示查找)”即可进入 退出方式: a. 按下esc b. 连按2次esc键 c. 删除末行全部输入字 ...

  4. Ubuntu14.04 无法关机 SpamAssassin speech-dispatcher

    在ubuntu14.04上安装完一些包后,关闭计算机就会出现关于标题中的两个错误. 1.在软件中心卸载spamAssassin 2.运行命令: sudo update-rc.d -f speech-d ...

  5. 留学Essay写作中常见的两类要求词盘点

    写essay的时候,我们会常常因为各式各样的要求词而头疼:discuss,describing,evaluate,explain,等等,他们之间有何区别?如果你在思考这个问题,那么这篇文章就是为你写的 ...

  6. CodeForces - 706C Hard problem(dp+字符串)

    题意:有n个字符串,只能将其逆转,不能交换位置,且已知逆转某字符串需要消耗的能量,问将这n个字符串按字典序从小到大排序所需消耗的最少能量. 分析:每个字符串要么逆转,要么不逆转,相邻两个字符串进行比较 ...

  7. Android之Intent相关知识

    什么是Intent?Intent的作用? Intent是一个消息传递对象,我们可以通过它来启动其他组件或者在组件之间传递数据. 通过Intent启动其他组件 Intent可以用来启动Activity, ...

  8. windows内核安全编程书籍

    windows internals 的中文译本      windows内核原理与实现 版权声明:本文为博主原创文章,未经博主允许不得转载.

  9. apt-get install oracle-java8-installer时Err:7 http://ppa.launchpad.net/webupd8team/java/ubuntu xenial/main amd64 Packages 404 not found

    所有其他网址都有效,而不是amd64端点. 然后,当运行apt-get install oracle-java8-installer时,出现以下错误: Package oracle-java8-ins ...

  10. date linux系统校正时间

    date命令使用 -d<字符串>  显示字符串所指的日期与时间.字符串前后必须加上双引号.   date -d '13 second ago' ‘+%T’  13秒前   date +%T ...