ant design pro 本事之实现列表页多标签

  

• ant design pro 怎样去生存颜色  
  
• ant design pro v6 怎样做好脚色管理  
  
• ant design 的 tree 怎样作为脚色中的权限选择之一  
  
• ant design 的 tree 怎样作为脚色中的权限选择之二  
  
• ant design pro access.ts 是怎样控制多脚色的权限的  
  
• ant design pro 中用户的表单怎样控制多个脚色  
  
• ant design pro 怎样实现动态菜单带上 icon 的  
  
• ant design pro 的表分层级如那边理  
  
• ant design pro 如那边理权限管理  
  
• ant design pro 本事之自制复制到剪贴板组件
  

像上图那样，我们常常给列表页做分类的，

这种多标签如那边理呢？
肯定是要得到动态数据对吧。
每次点击的时间要发哀求，得到差别的数据。
实在 ant design pro 是支持的。
在 index.tsx 中的 protable 里加上这个就好。

1. toolbar={
2.    
3.    {
4.    
5.    
6.           menu: {
7.    
8.    
9.             type: 'tab',
10.             activeKey: activeKey,
11.             items: [
12.               {
13.    
14.    
15.                 label: <FormattedMessage id="platform.all" defaultMessage="All" />,
16.                 key: '',
17.               },
18.               {
19.    
20.    
21.                 label: <FormattedMessage id="platform.online" defaultMessage="Online" />,
22.                 key: 'true',
23.               },
24.               {
25.    
26.    
27.                 label: <FormattedMessage id="platform.offline" defaultMessage="Offline" />,
28.                 key: 'false',
29.               },
30.             ],
31.             onChange: (key: any) => {
32.    
33.    
34.               setActiveKey(key);
35.               if (actionRef.current) {
36.    
37.    
38.                 actionRef.current.reload();
39.               }
40.             },
41.           },
42.         }}

复制代码

完备代码是如许的：

1. import {
2.    
3.     addItem, queryList, removeItem, updateItem } from '@/services/ant-design-pro/api';
4. import {
5.    
6.     PlusOutlined } from '@ant-design/icons';
7. import type {
8.    
9.     ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
10. import {
11.    
12.     FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components';
13. import {
14.    
15.     FormattedMessage, useAccess } from '@umijs/max';
16. import {
17.    
18.     Button, message, Modal, Switch, Tooltip } from 'antd';
19. import React, {
20.    
21.     useRef, useState } from 'react';
22. import type {
23.    
24.     FormValueType } from './components/Update';
25. import Update from './components/Update';
26. import Create from './components/Create';
27. import Show from './components/Show';
28. import {
29.    
30.     useIntl } from '@umijs/max';
31. import {
32.    
33.     carTypeMap } from '@/utils/constants';
34. import CopyToClipboard from '@/components/CopyToClipboard';
35. import ConfigureForm from './components/ConfigureForm';
37. /**
38. * @en-US Add node
39. * @zh-CN 添加节点
40. * @param fields
41. */
42. const handleAdd = async (fields: API.ItemData) => {
43.    
44.    
45.   const hide = message.loading(<FormattedMessage id="adding" defaultMessage="Adding..." />);
46.   try {
47.    
48.    
49.     await addItem('/platforms', {
50.    
51.     ...fields });
52.     hide();
53.     message.success(<FormattedMessage id="add.success" defaultMessage="Added successfully" />);
54.     return true;
55.   } catch (error: any) {
56.    
57.    
58.     hide();
59.     message.error(
60.       error?.response?.data?.message ?? (
61.         <FormattedMessage id="add.failed" defaultMessage="Adding failed, please try again!" />
62.       ),
63.     );
64.     return false;
65.   }
66. };
68. /**
69. * @en-US Update node
70. * @zh-CN 更新节点
71. *
72. * @param fields
73. */
74. const handleUpdate = async (fields: FormValueType) => {
75.    
76.    
77.   const hide = message.loading(<FormattedMessage id="updating" defaultMessage="Updating..." />);
78.   try {
79.    
80.    
81.     await updateItem(`/platforms/${
82.      
83.      fields._id}`, fields);
84.     hide();
86.     message.success(<FormattedMessage id="update.success" defaultMessage="Updated successfully" />);
87.     return true;
88.   } catch (error: any) {
89.    
90.    
91.     hide();
92.     message.error(
93.       error?.response?.data?.message ?? (
94.         <FormattedMessage id="update.failed" defaultMessage="Update failed, please try again!" />
95.       ),
96.     );
97.     return false;
98.   }
99. };
101. /**
102. *  Delete node
103. * @zh-CN 删除节点
104. *
105. * @param selectedRows
106. */
107. const handleRemove = async (ids: string[]) => {
108.    
109.    
110.   const hide = message.loading(<FormattedMessage id="deleting" defaultMessage

复制代码