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 里加上这个就好。

toolbar={{menu: {type: 'tab',activeKey: activeKey,items: [{label: <FormattedMessage id="platform.all" defaultMessage="All" />,key: '',},{label: <FormattedMessage id="platform.online" defaultMessage="Online" />,key: 'true',},{label: <FormattedMessage id="platform.offline" defaultMessage="Offline" />,key: 'false',},],onChange: (key: any) => {setActiveKey(key);if (actionRef.current) {actionRef.current.reload();}},},}}

完整代码是这样的：

import { addItem, queryList, removeItem, updateItem } from '@/services/ant-design-pro/api';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components';
import { FormattedMessage, useAccess } from '@umijs/max';
import { Button, message, Modal, Switch, Tooltip } from 'antd';
import React, { useRef, useState } from 'react';
import type { FormValueType } from './components/Update';
import Update from './components/Update';
import Create from './components/Create';
import Show from './components/Show';
import { useIntl } from '@umijs/max';
import { carTypeMap } from '@/utils/constants';
import CopyToClipboard from '@/components/CopyToClipboard';
import ConfigureForm from './components/ConfigureForm';/*** @en-US Add node* @zh-CN 添加节点* @param fields*/
const handleAdd = async (fields: API.ItemData) => {const hide = message.loading(<FormattedMessage id="adding" defaultMessage="Adding..." />);try {await addItem('/platforms', { ...fields });hide();message.success(<FormattedMessage id="add.success" defaultMessage="Added successfully" />);return true;} catch (error: any) {hide();message.error(error?.response?.data?.message ?? (<FormattedMessage id="add.failed" defaultMessage="Adding failed, please try again!" />),);return false;}
};/*** @en-US Update node* @zh-CN 更新节点** @param fields*/
const handleUpdate = async (fields: FormValueType) => {const hide = message.loading(<FormattedMessage id="updating" defaultMessage="Updating..." />);try {await updateItem(`/platforms/${fields._id}`, fields);hide();message.success(<FormattedMessage id="update.success" defaultMessage="Updated successfully" />);return true;} catch (error: any) {hide();message.error(error?.response?.data?.message ?? (<FormattedMessage id="update.failed" defaultMessage="Update failed, please try again!" />),);return false;}
};/***  Delete node* @zh-CN 删除节点** @param selectedRows*/
const handleRemove = async (ids: string[]) => {const hide = message.loading(<FormattedMessage id="deleting" defaultMessage="Deleting..." />);if (!ids) return true;try {await removeItem('/platforms', {ids,});hide();message.success(<FormattedMessageid="delete.success"defaultMessage="Deleted successfully and will refresh soon"/>,);return true;} catch (error: any) {hide();message.error(error.response.data.message ?? (<FormattedMessage id="delete.failed" defaultMessage="Delete failed, please try again" />),);return false;}
};const TableList: React.FC = () => {const intl = useIntl();/*** @en-US Pop-up window of new window* @zh-CN 新建窗口的弹窗*  */const [createModalOpen, handleModalOpen] = useState<boolean>(false);/**2024fc.xyz* @en-US The pop-up window of the distribution update window* @zh-CN 分布更新窗口的弹窗* */const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);const [showDetail, setShowDetail] = useState<boolean>(false);const actionRef = useRef<ActionType>();const [currentRow, setCurrentRow] = useState<API.ItemData>();const [selectedRowsState, setSelectedRows] = useState<API.ItemData[]>([]);const access = useAccess();const [activeKey, setActiveKey] = useState<string | undefined>('');const [configureModalVisible, setConfigureModalVisible] = useState<boolean>(false);/*** @en-US International configuration* @zh-CN 国际化配置* */const columns: ProColumns<API.ItemData>[] = [{title: intl.formatMessage({ id: 'platform.name' }),dataIndex: 'name',width: 150,copyable: true,render: (dom, entity) => {return (<aonClick={() => {setCurrentRow(entity);setShowDetail(true);}}>{dom}</a>);},},{title: intl.formatMessage({ id: 'platform.image' }),dataIndex: 'image',width: 100,hideInSearch: true,valueType: 'image',},{title: intl.formatMessage({ id: 'platform.region' }),dataIndex: 'region',width: 200,render: (_, record: any) =>record.region && (<>{record.region.name} <CopyToClipboard text={record.region.name} /></>),},{title: intl.formatMessage({ id: 'platform.price' }),dataIndex: 'price',width: 150,hideInSearch: true,render: (text, record: any) => (<Tooltip title={`€ ${record.priceInEuro}`}><strong>$ {text}</strong>/{carTypeMap[record.carType as keyof typeof carTypeMap]}</Tooltip>),},{title: intl.formatMessage({ id: 'platform.tips' }),ellipsis: true,width: 150,hideInTable: true,hideInSearch: true,dataIndex: 'tips',},{title: intl.formatMessage({ id: 'platform.boardingMethod' }),dataIndex: 'boardingMethod',width: 150,hideInSearch: true,hideInTable: true,valueEnum: {'': { text: intl.formatMessage({ id: 'all' }), status: 'Default' },fullCar: { text: intl.formatMessage({ id: 'platform.fullCar' }) },batchCar: { text: intl.formatMessage({ id: 'platform.batchCar' }) },},},{title: intl.formatMessage({ id: 'platform.deliveryMethod' }),dataIndex: 'deliveryMethod',width: 150,hideInSearch: true,hideInTable: true,valueEnum: {'': { text: intl.formatMessage({ id: 'all' }), status: 'Default' },autoDelivery: { text: intl.formatMessage({ id: 'platform.autoDelivery' }) },inviteLink: { text: intl.formatMessage({ id: 'platform.inviteLink' }) },},},{title: intl.formatMessage({ id: 'platform.status' }),dataIndex: 'isOnline',width: 150,hideInSearch: true,render: (_, record: any) => (<SwitchcheckedChildren={intl.formatMessage({ id: 'platform.online' })}unCheckedChildren={intl.formatMessage({ id: 'platform.offline' })}checked={record.isOnline}onChange={async () => {await handleUpdate({ _id: record._id, isOnline: !record.isOnline });if (actionRef.current) {actionRef.current.reload();}}}/>),},{title: intl.formatMessage({ id: 'platform.remark' }),ellipsis: true,width: 150,hideInSearch: true,dataIndex: 'remark',},{title: intl.formatMessage({ id: 'platform.userCount' }),hideInSearch: true,width: 150,hideInTable: true,dataIndex: 'userCount',},{title: intl.formatMessage({ id: 'platform.user' }),hideInSearch: true,width: 150,dataIndex: 'user',render: (_, record) => record.user && record.user.name,},{title: <FormattedMessage id="creation_time" defaultMessage="Creation Time" />,width: 250,dataIndex: 'createdAt',valueType: 'dateTime',hideInSearch: true,},{title: <FormattedMessage id="platform.description" defaultMessage="platform.description" />,width: 250,dataIndex: 'descriptions',hideInSearch: true,hideInTable: true,render: (text) => (Array.isArray(text) ? text.join(', ') : text),},{title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,dataIndex: 'option',valueType: 'option',fixed: 'right',render: (_, record) => [<akey="update"onClick={() => {handleUpdateModalOpen(true);setCurrentRow(record);}}><FormattedMessage id="edit" defaultMessage="Edit" /></a>,access.canSuperAdmin && (<akey="delete"onClick={() => {return Modal.confirm({title: intl.formatMessage({ id: 'confirm.delete' }),onOk: async () => {await handleRemove([record._id!]);setSelectedRows([]);actionRef.current?.reloadAndRest?.();},content: intl.formatMessage({ id: 'confirm.delete.content' }),okText: intl.formatMessage({ id: 'confirm' }),cancelText: intl.formatMessage({ id: 'cancel' }),});}}><FormattedMessage id="delete" defaultMessage="Delete" /></a>),<akey="configure"onClick={() => {setConfigureModalVisible(true);setCurrentRow(record);}}>{intl.formatMessage({id: 'configure',defaultMessage: 'Configure',})}</a>,],},];return (<PageContainer><ProTable<API.ItemData, API.PageParams>headerTitle={intl.formatMessage({ id: 'list' })}actionRef={actionRef}rowKey="_id"scroll={{ x: 1200 }}search={{labelWidth: 120,collapsed: false,}}toolBarRender={() => [<Buttontype="primary"key="primary"onClick={() => {handleModalOpen(true);}}><PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" /></Button>,selectedRowsState?.length > 0 && access.canSuperAdmin && (<ButtondangeronClick={() => {return Modal.confirm({title: intl.formatMessage({ id: 'confirm.delete' }),onOk: async () => {await handleRemove(selectedRowsState?.map((item) => item._id!));setSelectedRows([]);actionRef.current?.reloadAndRest?.();},content: intl.formatMessage({ id: 'confirm.delete.content' }),okText: intl.formatMessage({ id: 'confirm' }),cancelText: intl.formatMessage({ id: 'cancel' }),});}}><FormattedMessageid="pages.searchTable.batchDeletion"defaultMessage="Batch deletion"/></Button>),]}toolbar={{menu: {type: 'tab',activeKey: activeKey,items: [{label: <FormattedMessage id="platform.all" defaultMessage="All" />,key: '',},{label: <FormattedMessage id="platform.online" defaultMessage="Online" />,key: 'true',},{label: <FormattedMessage id="platform.offline" defaultMessage="Offline" />,key: 'false',},],onChange: (key: any) => {setActiveKey(key);if (actionRef.current) {actionRef.current.reload();}},},}}request={async (params, sort, filter) =>queryList('/platforms', { ...params, isOnline: activeKey }, sort, filter)}columns={columns}rowSelection={{onChange: (_, selectedRows) => {setSelectedRows(selectedRows);},}}/>{selectedRowsState?.length > 0 && (<FooterToolbarextra={<div><FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}<FormattedMessage id="pages_searchTable_item" defaultMessage="items" /></div>}></FooterToolbar>)}<Createopen={createModalOpen}onOpenChange={handleModalOpen}onFinish={async (value) => {const success = await handleAdd(value as API.ItemData);if (success) {handleModalOpen(false);if (actionRef.current) {actionRef.current.reload();}}}}/><UpdateonSubmit={async (value) => {const success = await handleUpdate(value);if (success) {handleUpdateModalOpen(false);setCurrentRow(undefined);if (actionRef.current) {actionRef.current.reload();}}}}onCancel={handleUpdateModalOpen}updateModalOpen={updateModalOpen}values={currentRow || {}}/><ConfigureFormonSubmit={async (value) => {const success = await handleUpdate(value);if (success) {setConfigureModalVisible(false);setCurrentRow(undefined);if (actionRef.current) {actionRef.current.reload();}}}}onCancel={setConfigureModalVisible}updateModalOpen={configureModalVisible}values={currentRow || {}}/><Showopen={showDetail}currentRow={currentRow as API.ItemData}columns={columns as ProDescriptionsItemProps<API.ItemData>[]}onClose={() => {setCurrentRow(undefined);setShowDetail(false);}}/></PageContainer>);
};export default TableList;

主要是上面的 menu 的选项处理，还有

const [activeKey, setActiveKey] = useState<string | undefined>(‘’);

然后是请求列表里比较重要，

要把 activeKey 传给后端

    request={async (params, sort, filter) =>queryList('/platforms', { ...params, isOnline: activeKey }, sort, filter)}

后端的参数是叫 isOnline ，要对上 key 和 value

其它的都没啥的问题。

我们拥有 12 年建站编程经验

  1. 虚拟产品交易平台定制开发
  2. WordPress 外贸电商独立站建站

我的网站

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/405747.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

影响五金精密零件加工价格的因素

影响五金精密零件加工价格的因素

在制造业中&#xff0c;五金精密零件的加工价格受到多种因素的影响。了解这些因素&#xff0c;对于企业合理控制成本、选择合适的加工供应商至关重要。 首先&#xff0c;零件的设计复杂度是一个重要因素。复杂的设计通常需要更先进的加工技术和更多的加工工序。例如&#xff0c…
阅读更多...
Unity编辑器扩展：创建一个欢迎窗口，在启动Editor的时候显示自定义窗口。

Unity编辑器扩展：创建一个欢迎窗口，在启动Editor的时候显示自定义窗口。

Unity编辑器扩展&#xff1a;创建一个欢迎窗口&#xff0c;在启动Editor的时候显示自定义窗口。 在Unity开发过程中&#xff0c;经常会遇到需要向其他人展示重要信息的情况&#xff0c;比如项目文档、脚本说明、插件介绍等。这个窗口不仅能够展示必要的文档信息&#xff0c;还…
阅读更多...
用手机写一本电子书

用手机写一本电子书

第1步、进入Andi.cn网站 第2步、点击登录&#xff0c;注册用户 第3步、点击去创作&#xff0c;进入创作页面 第4步、点击右下角的小笔&#xff0c;写一篇文章 第5步、下翻&#xff0c;点击提交按钮 第6步、再写一篇文章 第7步、点击栏目设计 第8步、进入栏目设计&#xff0c;点…
阅读更多...
FFmpeg的入门实践系列三(基础知识)

FFmpeg的入门实践系列三(基础知识)

欢迎诸位来阅读在下的博文~ 在这里&#xff0c;在下会不定期发表一些浅薄的知识和经验&#xff0c;望诸位能与在下多多交流&#xff0c;共同努力 文章目录 前期博客一、音视频常用术语二、FFmpeg库的结构介绍三、FFmpeg的常用函数初始化封装格式编解码器相关 四、FFmpeg常用的数…
阅读更多...
安装搭建MongoDB及配置副本集

安装搭建MongoDB及配置副本集

目录 一、什么是MongoDB的副本集 简介 &#xff08;1&#xff09;冗余和数据可用性 &#xff08;2&#xff09;MongoDB中的复制 &#xff08;3&#xff09;主从复制和副本集区别 二、副本集的架构 三、副本集的成员 四、部署副本集 1、节点划分 2、安装MongoDB 2.1、…
阅读更多...
Jetpack 各种框架简介

Jetpack 各种框架简介

Jetpack是Google推出的一套为Android开发提供极大便利的组件、工具和指导集&#xff0c;旨在帮助开发者快速构建高质量的应用&#xff0c;并遵循最佳实践。 Jetpack不仅是一个提高开发效率的工具集&#xff0c;还是Android开发的未来方向。它通过整合各种组件和工具&#xff0…
阅读更多...
VAuditDemo审计之二次注入漏洞

VAuditDemo审计之二次注入漏洞

目录 VAuditDemo二次注入漏洞 搜索危险函数&#xff0c;用户可控点 regCheck.php messageSub.php message.php 漏洞调用链 漏洞错误利用过程 注册用户 xxxx, 发表payload留言 漏洞正确利用过程 注册用户 wwww\ 退出用户 wwww\\ 使用 wwww\ 登录 发表留言 替换dat…
阅读更多...
【全网最真实测评】随身WiFi值得入手吗？自费入手华为、中兴、格行、上赞4款随身WiFi，内含国产4款热门随身WiFi推荐！（最实用、最高性价比！）

【全网最真实测评】随身WiFi值得入手吗？自费入手华为、中兴、格行、上赞4款随身WiFi，内含国产4款热门随身WiFi推荐！（最实用、最高性价比！）

随身WiFi的风越吹越大&#xff0c;市场乱象也更变本加厉。作为一名资深随身WiFi使用者&#xff0c;接触过太多的随身WiFi产品&#xff0c;越是了解这个行业黑幕&#xff0c;就越对无良商家夸大宣传、虚标限速&#xff0c;甚至售卖二手产品的行为深恶痛绝&#xff01; 本篇测评涉…
阅读更多...
学习嵌入式第二十九天

学习嵌入式第二十九天

ipc进程间通信方式 PC&#xff0c;即进程间通信&#xff08;Inter-Process Communication&#xff09;&#xff0c;是操作系统中不同进程之间交换数据的一种机制。以下是一些常见的IPC方式&#xff1a; 管道&#xff1a;用于父子进程或兄弟进程之间的通信。消息队列&#xff…
阅读更多...
nestjs nest-cli.json中的assets不生效

nestjs nest-cli.json中的assets不生效

官方文档 Documentation | NestJS - A progressive Node.js framework // nest-cli.json{"collection": "nestjs/schematics","sourceRoot": "src","compilerOptions": {"assets": ["microservices/mail/te…
阅读更多...
【网络编程】select实现服务器与客户端进行通信

【网络编程】select实现服务器与客户端进行通信

1、运行1个服务器和2个客户端 实现效果: 1、服务器和2个客户端互相聊天&#xff0c;服务器和客户端都需要使用select模型去实现 2、服务器要监视2个客户端是否连接&#xff0c;2个客户端是否发来消息&#xff0c;以及服务器自己的标准输入流 3、客户端…
阅读更多...
定格精彩瞬间！详解六自由度技术原理及应用

定格精彩瞬间！详解六自由度技术原理及应用

在体育赛事中&#xff0c;观赏各项目的精彩瞬间&#xff0c;欣赏运动员的卓越表现是观众们最为关注的焦点。以体操跳马为例&#xff0c;运动员们全力助跑&#xff0c;然后奋力起跳、腾空&#xff0c;接着精准的推手和转体动作&#xff0c;最后稳稳落地&#xff0c;整个动作行云…
阅读更多...
检测到目标URL存在http host头攻击漏洞

检测到目标URL存在http host头攻击漏洞

漏洞描述 修复措施 方法一&#xff1a; nginx 的 default_server 指令可以定义默认的 server 去处理一些没有匹配到 server_name 的请求&#xff0c;如果没有显式定义&#xff0c;则会选取第一个定义的 server 作为 default_server。 server { …
阅读更多...
avue-crud 自定义搜索项 插槽

avue-crud 自定义搜索项 插槽

加上 -search 就可以自定义查询项了
阅读更多...
【MongoDB】Java连接MongoDB

【MongoDB】Java连接MongoDB

连接URI 连接 URI提供驱动程序用于连接到 MongoDB 部署的指令集。该指令集指示驱动程序应如何连接到 MongoDB&#xff0c;以及在连接时应如何运行。下图解释了示例连接 URI 的各个部分&#xff1a; 连接的URI 主要分为 以下四个部分 第一部分 连接协议 示例中使用的 连接到具有…
阅读更多...
ant design pro 中用户的表单如何控制多个角色

ant design pro 中用户的表单如何控制多个角色

ant design pro 如何去保存颜色ant design pro v6 如何做好角色管理ant design 的 tree 如何作为角色中的权限选择之一ant design 的 tree 如何作为角色中的权限选择之二ant design pro access.ts 是如何控制多角色的权限的 看上面的图片 当创建或编辑一个用户时&#xff0c;…
阅读更多...
Mac文件需要分卷压缩怎么办 Mac上怎么解压分卷压缩的文件

Mac文件需要分卷压缩怎么办 Mac上怎么解压分卷压缩的文件

在处理大型文件的传输和存储的时候&#xff0c;Mac用户常面临文件大小超过限制的问题。为了有效管理这些大文件&#xff0c;分卷压缩成为一种必不可少的解决方案。Mac文件需要分卷压缩怎么办&#xff1f;Mac上怎么解压分卷压缩的文件&#xff1f;本文将向你介绍如何使用BetterZ…
阅读更多...
第R2周：LSTM-火灾温度预测

第R2周：LSTM-火灾温度预测

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、什么是LSTM 1.LSTM的本质 长短时记忆网络&#xff08;Long Short-Term Memory, LSTM&#xff09;的本质是一种特殊的循环神经网络&#xff08;Recurrent…
阅读更多...
使用Go语言将PDF文件转换为Base64编码

使用Go语言将PDF文件转换为Base64编码

使用 Go 语言将 Base64 编码转换为 PDF 文件-CSDN博客本文介绍了如何使用 Go 语言将 Base64 编码转换为 PDF 文件&#xff0c;并保存到指定路径。https://blog.csdn.net/qq_45519030/article/details/141225772 在现代编程中&#xff0c;数据转换和编码是常见的需求。本文将介绍…
阅读更多...
SX_gitlab可视化操作c语言知识_17

SX_gitlab可视化操作c语言知识_17

gitlab可视化操作技巧: Merge into current branch直接将远程wjc_GNSS分支的数据拉下来同步到本机当前的分支代码&#xff0c;执行的是合并操作&#xff0c;即多的模块会添加到本地分支&#xff0c;有冲突的地方不行得rebase覆盖才行 修改完代码先暂存更改再在暂存区写入备注&a…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发