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

一、前言

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

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

二、代码

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

<el-form-item label="水果(Fruits)">
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"                 
                 @change="handleCheckAllChange" class="fla">全选</el-checkbox>
    <el-checkbox-group v-model="checkedFruits" @change="handleCheckedFruitsChange" class="fla">
        <el-checkbox v-for="fruit in fruitsArr" :label="fruit" :key="fruit">{{fruit}}</el-checkbox>
    </el-checkbox-group>
</el-form-item>

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

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

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

    script的代码如下

<script>
    const fruitsOptions = ['香蕉', '苹果', '西瓜', '火龙果', '荔枝', '桃子'];
    export default {
         data() {
            return {
                fruitsArr: fruitsOptions, //一共有多少个选项
                checkAll: true,
                checkedFruits: fruitsOptions, //默认选中的值,这里是默认全选
                isIndeterminate: false, 
            }
         },
        methods:{
            handleCheckAllChange(val) {
                this.checkedFruits= val ? fruitsOptions: [];
                this.isIndeterminate = false; 
            },
            handleCheckedFruitsChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.fruitsArr.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.fruitsArr.length;
            },
        }
    }
</script>

   style如下：

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

  效果图：