mirror of https://github.com/ElemeFE/element
Add examples of min/max props to checkbox group in documentation
parent
3cefe969be
commit
87f9c5f580
|
@ -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|
|
||||||
|---------- |-------- |---------- |------------- |-------- |
|
|---------- |-------- |---------- |------------- |-------- |
|
||||||
|
|
|
@ -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
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|---------- |-------- |---------- |------------- |-------- |
|
|---------- |-------- |---------- |------------- |-------- |
|
||||||
|
|
Loading…
Reference in New Issue