Vue+Element-UI总结_el-checkbox实现全选功能
一、前言 最近在做Vue+SpringBoot的项目，Vue使用了Element-UI，写几篇文章记录一下在开发过程中的小功能。
本篇讲的是使用多选框，实现全选功能。这个其实在官网上就有现成的例子，我拿来再做一个解释，避免下次使用的时候忘记。
二、代码 template中的代码如下，在form表单中使用的全选功能。
全选
{{fruit}}
一个checkbox作为全选选择框，每次改变，为全选或者全不选。
【Vue+Element-UI总结_el-checkbox实现全选功能】一个checkbox-group，作为选项，如果全部选择，全选选择框也为选择状态，如果全部没选择，全选选择框为不选择状态，如果选择一部分，全选选择框为不定项选择状态。
indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果。
script的代码如下
style如下：
.fla {
float: left;
margin-right: 15px !important;
margin-left: 5px;
}效果图：
文章图片
文章图片
文章图片
推荐阅读
- 7.9号工作总结～司硕
- 最有效的时间管理工具（赢效率手册和总结笔记）
- 数据库总结语句
- 周总结|周总结 感悟
- 周总结43
- 参加【21天写作挑战赛】，第七期第14天，挑战感受小总结
- 第二阶段day1总结
- 新梦想91期特训班两天一晚学习感想及总结（学生（魏森林））
- 周总结（10.5-10.11)
- 2019.11.14号总结