English | 中文 | CHANGELOG

enum-plus for Ant Design

简介

@enum-plus/plugin-antd 是 enum-plus 的一个插件，提供了将枚举绑定到 Ant Design 组件的功能。它允许你轻松地将枚举转换为下拉框、复选框、单选框等 UI 组件的数据源，从而简化了在前端应用中使用枚举的过程。

安装

npm install @enum-plus/plugin-antd

在应用程序的入口文件中，导入 @enum-plus/plugin-antd 插件并安装：

import antdPlugin from '@enum-plus/plugin-antd';
import { Enum } from 'enum-plus';

Enum.install(antdPlugin);

插件选项

安装插件时，可以传入一个配置对象，用于设置插件的全局选项：

Enum.install(antdPlugin, {
  toSelect: {
    valueField: 'id', // 设置 toSelect 方法生成的数据对象中，表示值的字段
    labelField: 'name', // 设置 toSelect 方法生成的数据对象中，表示标签的字段
  },
});

API

💎   toSelect

[F]   toSelect(config?: ToSelectConfig): {value, label}[]

toSelect方法返回一个包含全部枚举项的数组，包含label和value两个字段。同时支持在数组头部插入一个默认元素，一般用于下拉框等组件的默认选项，表示全部、无值或不限等，当然你也能够自定义这个默认选项。

import { Select } from 'antd';

<Select options={WeekEnum.toSelect()} />;

<Select
  options={WeekEnum.toSelect({
    firstOption: { value: '', label: '全部' },
  })}
/>;

你还可以在安装插件时，通过配置项labelField和valueField来设置全局的默认选项，以修改toSelect方法生成的数据对象。

import antdPlugin from '@enum-plus/plugin-antd';
import { Enum } from 'enum-plus';

Enum.install(antdPlugin, {
  toSelect: { valueField: 'id', labelField: 'name' },
});

WeekEnum.toSelect(); // [{ id: 1, name: '星期一' }, { id: 2, name: '星期二' }]

💎   toMenu

[F]   toMenu(): { key, label }[]

生成一个对象数组，可以绑定给 Ant Design 的Menu、Dropdown等组件

import { Menu } from 'antd';

<Menu items={WeekEnum.toMenu()} />;

数据格式为：

[
  { key: 0, label: '星期日' },
  { key: 1, label: '星期一' },
];

💎   toFilter

[F]   toFilter(): { text, value }[]

toFilter方法可以生成一个对象数组，为表格绑定列筛选功能，列头中显示一个下拉筛选框，用来过滤表格数据。对象结构遵循 Ant Design 的数据规范，格式为：{ text: string, value: number|string } []

import { Table } from 'antd';

const columns = [
  {
    title: 'week',
    dataIndex: 'week',
    filters: WeekEnum.toFilter(),
  },
];
// 在表头中显示下拉筛选项
<Table columns={columns} />;

💎   toValueMap

[F]   toValueMap(): Record<V, { text: string }>

toValueMap方法可以为 Ant Design Pro 的ProFormFields、ProTable等组件生成数据源，这是一个类似 Map 的数据结构，格式为：{ [key: number|string]: { text: string } }

import { ProFormCheckbox, ProFormRadio, ProFormSelect, ProFormTreeSelect, ProTable } from '@ant-design/pro-components';

<ProFormSelect valueEnum={WeekEnum.toValueMap()} />; // Select
<ProFormCheckbox valueEnum={WeekEnum.toValueMap()} />; // Checkbox
<ProFormRadio.Group valueEnum={WeekEnum.toValueMap()} />; // Radio
<ProFormTreeSelect valueEnum={WeekEnum.toValueMap()} />; // TreeSelect
<ProTable columns={[{ dataIndex: 'week', valueEnum: WeekEnum.toValueMap() }]} />; // ProTable

数据格式为：

{
  0: { text: '星期日' },
  1: { text: '星期一' },
}