fix checkbox gourp change event && improve docs (#2412)

* improve docs

* fix checkbox group change event
pull/2448/head
baiyaaaaa 2017-01-16 10:39:24 +08:00 committed by cinwell.li
parent 889129e921
commit cddc2b1027
4 changed files with 127 additions and 5 deletions

View File

@ -1,4 +1,5 @@
<script> <script>
const cityOptions = ['ShangHai', 'BeiJing', 'GuangZhou', 'ShenZhen'];
module.exports = { module.exports = {
data() { data() {
return { return {
@ -7,8 +8,26 @@
checked: true, checked: true,
checked1: false, checked1: false,
checked2: true, checked2: true,
isValid: 'valid' isValid: 'valid',
checkAll: false,
cities: cityOptions,
checkedCities: ['上海', '北京'],
isIndeterminate: false
}; };
},
methods: {
handleChange(ev) {
console.log(ev);
},
handleCheckAllChange(event) {
this.checkedCities = event.target.checked ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
} }
}; };
</script> </script>
@ -93,6 +112,47 @@ It is used for multiple checkboxes which are bound in one group, and indicates w
``` ```
::: :::
### Indeterminate
The `indeterminate` property can help you to achieve a 'check all' effect.
:::demo
```html
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check 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">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
const cityOptions = ['ShangHai', 'BeiJing', 'GuangZhou', 'ShenZhen'];
export default {
data() {
return {
checkAll: true,
checkedCities: [],
cities: cityOptions,
isIndeterminate: false
};
},
methods: {
handleCheckAllChange(event) {
this.checkedCities = event.target.checked ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
};
</script>
```
:::
### Checkbox Attributes ### Checkbox Attributes
| Attribute | Description | Type | Options | Default| | Attribute | Description | Type | Options | Default|
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |

View File

@ -1,4 +1,5 @@
<script> <script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
module.exports = { module.exports = {
data() { data() {
return { return {
@ -7,12 +8,25 @@
checked: false, checked: false,
checked1: false, checked1: false,
checked2: true, checked2: true,
isValid: '可用' isValid: '可用',
checkAll: false,
cities: cityOptions,
checkedCities: ['上海', '北京'],
isIndeterminate: false
}; };
}, },
methods: { methods: {
handleChange(ev) { handleChange(ev) {
console.log(ev); console.log(ev);
},
handleCheckAllChange(event) {
this.checkedCities = event.target.checked ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
} }
} }
}; };
@ -108,6 +122,47 @@
``` ```
::: :::
### indeterminate 状态
`indeterminate` 属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果
:::demo
```html
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</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">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
data() {
return {
checkAll: true,
checkedCities: [],
cities: cityOptions,
isIndeterminate: false
};
},
methods: {
handleCheckAllChange(event) {
this.checkedCities = event.target.checked ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
};
</script>
```
:::
### Checkbox Attributes ### Checkbox Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |

View File

@ -14,7 +14,6 @@
watch: { watch: {
value(value) { value(value) {
this.$emit('change', value);
this.dispatch('ElFormItem', 'el.form.change', [value]); this.dispatch('ElFormItem', 'el.form.change', [value]);
} }
} }

View File

@ -18,7 +18,7 @@
:true-value="trueLabel" :true-value="trueLabel"
:false-value="falseLabel" :false-value="falseLabel"
v-model="model" v-model="model"
@change="$emit('change', $event)" @change="handleChange"
@focus="focus = true" @focus="focus = true"
@blur="focus = false"> @blur="focus = false">
<input <input
@ -29,7 +29,7 @@
:value="label" :value="label"
:name="name" :name="name"
v-model="model" v-model="model"
@change="$emit('change', $event)" @change="handleChange"
@focus="focus = true" @focus="focus = true"
@blur="focus = false"> @blur="focus = false">
</span> </span>
@ -124,6 +124,14 @@
} else { } else {
this.model = this.trueLabel || true; this.model = this.trueLabel || true;
} }
},
handleChange(ev) {
this.$emit('change', ev);
if (this.isGroup) {
this.$nextTick(_ => {
this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
});
}
} }
}, },