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')