Multiple selection from a set of alternatives
1. How to use?
Used alone, it can represent switching between two states. The content written in the label is the introduction after the checkbox button.
//Define the v-model binding variable in the el-checkbox element. In a single checkbox, the default binding variable value will be Boolean, and the selected value is true.
<template>
<!-- `checked` is true or false -->
<el-checkbox v-model="checked">Alternatives</el-checkbox>
</template>
<script>
export default {
data() {
return {
checked: true
};
}
};
</script>
2. Disabled state
The check box is disabled.
Just set the disabled attribute.
<template>
<el-checkbox v-model="checked1" disabled>Alternative 1</el-checkbox>
<el-checkbox v-model="checked2" disabled>Alternatives</el-checkbox>
</template>
<script>
export default {
data() {
return {
checked1: false,
checked2: true
};
}
};
</script>
3.Multiple selection box group
It is suitable for situations where multiple check boxes are bound to the same array, and the selected items in this set of options are indicated by whether they are checked or not.
The
/*checkbox-group element can manage multiple checkboxes into a group. You only need to use v-model in the Group to bind Array type variables. The label attribute of el-checkbox is the value corresponding to the checkbox. If there is no content in the label, this attribute also serves as the introduction after the checkbox button. The label corresponds to the element value in the array. If the specified value exists, it is selected, otherwise it is not selected. */
<template>
<el-checkbox-group v-model="checkList">
<el-checkbox label="Checkbox A"></el-checkbox>
<el-checkbox label="Checkbox B"></el-checkbox>
<el-checkbox label="Checkbox C"></el-checkbox>
<el-checkbox label="disable" disabled></el-checkbox>
<el-checkbox label="checked and disabled" disabled></el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data () {
return {
checkList: ['Selected and disabled','Check box A']
};
}
};
</script>
4.indeterminate status
The indeterminate attribute is used to indicate the indeterminate state of the checkbox, and is generally used to achieve the effect of selecting all
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Select all</el-checkbox>
<div style="margin: 15px 0;"></div>
<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>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default {
data() {
return {
checkAll: false,
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions,
isIndeterminate: true
};
},
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 & amp; & amp; checkedCount <this.cities.length;
}
}
};
</script>
5. Limitation on the number of optional items
Use the min and max attributes to limit the number of items that can be checked.
<template>
<el-checkbox-group
v-model="checkedCities"
:min="1"
:max="2">
<el-checkbox v-for="city in cities" :label="city" :key="city">{<!-- -->{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default {
data() {
return {
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions
};
}
};
</script>
6. Button style
A multi-select combination of button styles.
<template>
<div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{<!-- -->{city}}</el- checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup2" size="medium">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{<!-- -->{city}}</el- checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup3" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Beijing'" :key="city"> {<!-- -->{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{<!-- -->{city}}</el- checkbox-button>
</el-checkbox-group>
</div>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default {
data () {
return {
checkboxGroup1: ['Shanghai'],
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
cities: cityOptions
};
}
}
</script>
7. With borders
Set the border attribute to render a multi-select box with a border.
<template>
<div>
<el-checkbox v-model="checked1" label="Alternative 1" border></el-checkbox>
<el-checkbox v-model="checked2" label="Alternative 2" border></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox v-model="checked3" label="Alternative 1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked4" label="Alternative 2" border size="medium"></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup1" size="small">
<el-checkbox label="Alternative 1" border></el-checkbox>
<el-checkbox label="Alternative 2" border disabled></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
<el-checkbox label="Alternative 1" border></el-checkbox>
<el-checkbox label="Alternative 2" border></el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data () {
return {
checked1: true,
checked2: false,
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: []
};
}
}
</script>