Vue+Element-UI总结_el-checkbox实现全选功能

一、前言

    最近在做Vue+SpringBoot的项目，Vue使用了Element-UI，写几篇文章记录一下在开发过程中的小功能。

    本篇讲的是使用多选框，实现全选功能。这个其实在官网上就有现成的例子，我拿来再做一个解释，避免下次使用的时候忘记。

二、代码

    template中的代码如下，在form表单中使用的全选功能。

    全选
    
        {{fruit}}
    

   一个checkbox作为全选选择框，每次改变，为全选或者全不选。

  一个checkbox-group，作为选项，如果全部选择，全选选择框也为选择状态，如果全部没选择，全选选择框为不选择状态，如果选择一部分，全选选择框为不定项选择状态。

  indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果。

    script的代码如下

   style如下：

.fla {
        float: left;
        margin-right: 15px !important;
        margin-left: 5px;
    }

  效果图：