Checkbox 多选框的使用

基础用法

在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true

禁用状态

设置disabled属性即可。

多选框组

checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。

ndeterminate 状态

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

可选项目数量的限制

使用 min 和 max 属性能够限制可以被勾选的项目的数量。

按钮样式

只需要把el-checkbox元素替换为el-checkbox-button元素即可。此外，Element 还提供了size属性。

带有边框

设置border属性可以渲染为带有边框的多选框。

代码：

<template>
    <div class="checkbox">
        
          <!-- `checked` 为 true 或 false -->
          <el-checkbox v-model="checked">可选备选项</el-checkbox>

          <el-checkbox v-model="checked1" disabled>不可选备选项1</el-checkbox>
          <el-checkbox v-model="checked2" disabled>不可选备选项2</el-checkbox>
        
       
          <el-checkbox-group v-model="checkList" >
            <el-checkbox label="多选框A"></el-checkbox>
            <el-checkbox label="多选框B"></el-checkbox>
            <el-checkbox label="多选框C"></el-checkbox>
            <el-checkbox label="禁选" disabled></el-checkbox>
            <el-checkbox label="禁选并选中" disabled></el-checkbox>
          </el-checkbox-group>
        
        <p>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
          </el-checkbox-group>
        </p>
        <p>
          <el-checkbox-group 
            v-model="checkedCities1"
            :min="1"
            :max="2">
          <el-checkbox v-for="city1 in cities1" :label="city1" :key="city1">{{ city1 }}</el-checkbox>
          </el-checkbox-group>
        </p>
        <p>
          <el-checkbox-group v-model="checkboxGroup1" size="medium" fill="pink" text-color="red">
            <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox-button>
          </el-checkbox-group>
        </p>
        <p>
          <el-checkbox-group v-model="checkboxGroup2" size="small">
            <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '上海'" :key="city">{{ city }}</el-checkbox-button>
          </el-checkbox-group>
        </p>
        <p>
          <el-checkbox-group v-model="checkboxGroup3" size="mini" disabled>
            <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox-button>
          </el-checkbox-group>
        </p>
        <p>
            <el-checkbox v-model="checked3" label="备选框A" border size="medium"></el-checkbox>
            <el-checkbox v-model="checked4" label="备选框B" border></el-checkbox><!-- 边框 -->
        </p>
        <p>
            <el-checkbox-group v-model="checkboxGroup4" size="small">
                <el-checkbox label="备选框C" border ></el-checkbox>
                <el-checkbox label="不可选备选框C" border  disabled></el-checkbox>
            </el-checkbox-group>
        </p>
        <p>
            <el-checkbox-group v-model="checkboxGroup5" size="mini" disabled>
                <el-checkbox label="备选项D" border></el-checkbox>
                <el-checkbox label="备选项E" border></el-checkbox>
            </el-checkbox-group>
        </p>
    </div>
</template>

<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
    export default {
      data () {
        return {
          checked:true,
          checked1: false,
          checked2: true,
          checkList:['多选框A','禁选并选中'],
          //多选选中上海北京
          checkAll: false,
          checkedCities: ['上海', '北京'],
          cities: cityOptions,
          isIndeterminate: true,

          checkedCities1:['广州','深圳'],
          cities1:cityOptions,

          checkboxGroup1:['上海'],
          checkboxGroup2:['北京'],
          checkboxGroup3:['广州'],

          checked3: true,
          checked4: false,
          checkboxGroup4: [],
          checkboxGroup5: ['备选项D']
        };
      },

      methods:{
        handleCheckAllChange(val){
          this.checkedCities = val ? cityOptions : [];
          this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value){
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.cities.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        }
      }
    };
  </script>