ant-design-vue/components/checkbox/demo/check-all.md
2018-03-09 17:50:33 +08:00

56 lines
1.2 KiB
Markdown

<cn>
#### 全选
在实现全选效果时,你可能会用到`indeterminate`属性
</cn>
<us>
#### Check all
The `indeterminate` property can help you to achieve a 'check all' effect.
</us>
```html
<template>
<div>
<div :style="{ borderBottom: '1px solid #E9E9E9' }">
<a-checkbox
:indeterminate="indeterminate"
@change="onCheckAllChange"
:checked="checkAll"
>
Check all
</a-checkbox>
</div>
<br />
<a-checkbox-group :options="plainOptions" v-model="checkedList" @change="onChange" />
</div>
</template>
<script>
const plainOptions = ['Apple', 'Pear', 'Orange']
const defaultCheckedList = ['Apple', 'Orange']
export default {
data () {
return {
checkedList: defaultCheckedList,
indeterminate: true,
checkAll: false,
plainOptions,
}
},
methods: {
onChange (checkedList) {
this.indeterminate = !!checkedList.length && (checkedList.length < plainOptions.length)
this.checkAll = checkedList.length === plainOptions.length
},
onCheckAllChange (e) {
Object.assign(this, {
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
checkAll: e.target.checked,
})
},
},
}
</script>
```