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