typescript antd checkbox全选

在 TypeScript 中使用 Ant Design（AntD）库创建一个支持全选功能的 Checkbox（复选框），首先需要确保已经在项目中安装了 AntD 的 TypeScript 版本。以下是一个简单的例子：

1. 引入相关的模块：

import { CheckboxGroup } from 'antd';
import { ICheckboxProps } from 'antd/lib/checkbox';

2. 创建一个状态来管理全选状态：

interface AppState {
  selectedOptions: string[];
  allSelected: boolean;
}

const initialState: AppState = {
  selectedOptions: [],
  allSelected: false,
};

3. 在组件内使用 CheckboxGroup 实现全选功能：

<CheckboxGroup
  checkedCities={['北京', '上海']}
  onChange={(selectedOptions: string[]) => {
    this.setState((prevState) => ({
      selectedOptions,
      allSelected: selectedOptions.length === prevState.selectedOptions.length, // 判断是否全选
    }));
  }}
  value={this.state.selectedOptions}
/>

4. 添加一个全选按钮，监听其状态变化并同步到 CheckboxGroup：

<template>
  <button @click={() => this.toggleAllSelection()}>
    全选{{ this.state.allSelected ? '取消' : '全选' }}
  </button>
</template>

methods: {
  toggleAllSelection() {
    const newSelection = this.state.selectedOptions.length > 0 ? [] : ['*']; // '*' 表示全选所有
    this.setState({ selectedOptions: newSelection, allSelected: !this.state.allSelected });
  }
}