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;
    }

  效果圖：