mirror of https://github.com/ElemeFE/element
fix checkbox gourp change event && improve docs (#2412)
* improve docs * fix checkbox group change eventpull/2448/head
parent
889129e921
commit
cddc2b1027
|
@ -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|
|
||||||
|---------- |-------- |---------- |------------- |-------- |
|
|---------- |-------- |---------- |------------- |-------- |
|
||||||
|
|
|
@ -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
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|---------- |-------- |---------- |------------- |-------- |
|
|---------- |-------- |---------- |------------- |-------- |
|
||||||
|
|
|
@ -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]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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]);
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue