Commit 87f9c5f5 authored by Mathieu DARTIGUES's avatar Mathieu DARTIGUES Committed by 杨奕

Add examples of min/max props to checkbox group in documentation

parent 3cefe969
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
checkAll: false, checkAll: false,
cities: cityOptions, cities: cityOptions,
checkedCities: ['Shanghai', 'Beijing'], checkedCities: ['Shanghai', 'Beijing'],
checkedCities1: ['Shanghai', 'Beijing'],
isIndeterminate: true isIndeterminate: true
}; };
}, },
...@@ -153,6 +154,40 @@ The `indeterminate` property can help you to achieve a 'check all' effect. ...@@ -153,6 +154,40 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
``` ```
::: :::
### Minimum / Maximum items checked
The `minimum` and `maximum` properties can help you to limit the number of checked items.
:::demo
```html
<template>
<el-checkbox-group
v-model="checkedCities1"
minimum="1"
maximum="2">
<el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
let handlerLimitExceeded = (event) => {
currentEvent = event;
console.log(event);
}
export default {
data() {
return {
checkedCities1: ['Shanghai', 'Beijing'],
cities: cityOptions
};
}
};
</script>
```
:::
### Checkbox Attributes ### Checkbox Attributes
| Attribute | Description | Type | Options | Default| | Attribute | Description | Type | Options | Default|
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
......
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
checkAll: false, checkAll: false,
cities: cityOptions, cities: cityOptions,
checkedCities: ['上海', '北京'], checkedCities: ['上海', '北京'],
checkedCities1: ['上海', '北京'],
isIndeterminate: true isIndeterminate: true
}; };
}, },
...@@ -163,6 +164,38 @@ ...@@ -163,6 +164,38 @@
``` ```
::: :::
### Minimum / Maximum items checked (to be translated)
The `minimum` and `maximum` properties can help you to limit the number of checked items.
:::demo
```html
<template>
<el-checkbox-group
v-model="checkedCities1"
minimum="1"
maximum="2">
<el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
let handlerLimitExceeded = (event) => {
currentEvent = event;
console.log(event);
}
export default {
data() {
return {
checkedCities1: ['上海', '北京'],
cities: cityOptions
};
}
};
</script>
```
:::
### Checkbox Attributes ### Checkbox Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment