<template>
<div>
<div :style="{ borderBottom: '1px solid #E9E9E9' }">
<a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
Check all
</a-checkbox>
</div>
<br />
<a-checkbox-group v-model="checkedList" :options="plainOptions" @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>
antv全选
最新推荐文章于 2024-09-06 22:20:29 发布