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

pull/3926/head
Mathieu DARTIGUES 2017-03-22 22:22:00 +01:00 committed by 杨奕
parent 3cefe969be
commit 87f9c5f580
2 changed files with 68 additions and 0 deletions

View File

@ -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.
``` ```
::: :::
### 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|
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |

View File

@ -12,6 +12,7 @@
checkAll: false, checkAll: false,
cities: cityOptions, cities: cityOptions,
checkedCities: ['上海', '北京'], checkedCities: ['上海', '北京'],
checkedCities1: ['上海', '北京'],
isIndeterminate: true isIndeterminate: true
}; };
}, },
@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |