elementUI 学习入门之 checkbox 复选框

Posted 2021-02-10 xsmile

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 的不确定状态，一般用于实现全选。

 1 <template>
 2   <el-checkbox indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
 3     全选
 4   </el-checkbox>
 5   <div style="margin:10px"></div>
 6   <el-checkbox-group v-model="checkCities" @change="handleCheckedCitiesChange">
 7     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
 8   </el-checkbox-group>
 9 </template>
10 
11 const cityOptions = ["上海", "北京", "郑州", "武汉"];
12 var Main = {
13 
14     data () {
15       return {
16         cities: cityOptions,
17         checkCities:["郑州", "北京"],
18       };
19     },
20     methods:{
21         handleCheckAllChange(val){
22           this.checkCities=val ? cityOptions : [];
23         this.indeterminate = false;
24       },
25     },
26   }
27 var Ctor = Vue.extend(Main)
28 new Ctor().$mount(‘#app‘)

全选