55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<docs>
|
||
---
|
||
order: 1
|
||
title:
|
||
zh-CN: 全选
|
||
en-US: Check all
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
在实现全选效果时，你可能会用到 `indeterminate` 属性
|
||
|
||
## en-US
|
||
|
||
The `indeterminate` property can help you to achieve a 'check all' effect.
|
||
|
||
</docs>
|
||
|
||
<template>
|
||
<div>
|
||
<a-checkbox
|
||
v-model:checked="state.checkAll"
|
||
:indeterminate="state.indeterminate"
|
||
@change="onCheckAllChange"
|
||
>
|
||
Check all
|
||
</a-checkbox>
|
||
</div>
|
||
<a-divider />
|
||
<a-checkbox-group v-model:value="state.checkedList" :options="plainOptions" />
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { reactive, watch } from 'vue';
|
||
const plainOptions = ['Apple', 'Pear', 'Orange'];
|
||
const state = reactive({
|
||
indeterminate: true,
|
||
checkAll: false,
|
||
checkedList: ['Apple', 'Orange'],
|
||
});
|
||
|
||
const onCheckAllChange = (e: any) => {
|
||
Object.assign(state, {
|
||
checkedList: e.target.checked ? plainOptions : [],
|
||
indeterminate: false,
|
||
});
|
||
};
|
||
watch(
|
||
() => state.checkedList,
|
||
val => {
|
||
state.indeterminate = !!val.length && val.length < plainOptions.length;
|
||
state.checkAll = val.length === plainOptions.length;
|
||
},
|
||
);
|
||
</script>
|