elementUI 学习入门之 checkbox 复选框

CheckBox 复选框

与单选框基本类似。如：按钮样式、带边框、复选框按钮大小。

eg：

<template>
  <el-checkbox-group v-model="selectCities" min='2' max="3">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>

const cityOptions = ["上海", "北京", "郑州", "武汉"];
var Main = {

    data () {
      return {
        cities: cityOptions,
        selectCities: ["上海", "郑州"],
      };
    },
    methods:{

    },
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

indeterminate 状态

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

 <template>
   <el-checkbox indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
     全选
   </el-checkbox>
   <div style="margin:10px"></div>
   <el-checkbox-group v-model="checkCities" @change="handleCheckedCitiesChange">
     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
   </el-checkbox-group>
 </template>

 const cityOptions = ["上海", "北京", "郑州", "武汉"];
 var Main = {

     data () {
       return {
         cities: cityOptions,
         checkCities:["郑州", "北京"],
       };
     },
     methods:{
         handleCheckAllChange(val){
           this.checkCities=val ? cityOptions : [];
         this.indeterminate = false;
       },
     },
   }
 var Ctor = Vue.extend(Main)
 new Ctor().$mount('#app')

全选