ant design pro 技巧之实现列表页多标签

于 2024-08-20 17:33:39 发布
阅读量233 收藏 7
点赞数 2
分类专栏： ant design pro 文章标签： javascript react.js 前端框架 前端 个人开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39637597/article/details/141364008
版权

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这种多标签如何处理呢？

肯定是要得到动态数据对吧。

每次点击的时候要发请求，得到不同的数据。

其实 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(
      <FormattedMessage
        id="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 (
          <a
            onClick={() => {
              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) => (
        <Switch
          checkedChildren={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) => [
        <a
          key="update"
          onClick={() => {
            handleUpdateModalOpen(true);
            setCurrentRow(record);
          }}
        >
          <FormattedMessage id="edit" defaultMessage="Edit" />
        </a>,
        access.canSuperAdmin && (
          <a
            key="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>
        ),
        <a
          key="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={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleModalOpen(true);
            }}
          >
            <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
          </Button>,
          selectedRowsState?.length > 0 && access.canSuperAdmin && (
            <Button
              danger
              onClick={() => {
                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' }),
                });
              }}
            >
              <FormattedMessage
                id="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 && (
        <FooterToolbar
          extra={
            <div>
              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
              <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
              <FormattedMessage id="pages_searchTable_item" defaultMessage="items" />
            </div>
          }
        ></FooterToolbar>
      )}
      <Create
        open={createModalOpen}
        onOpenChange={handleModalOpen}
        onFinish={async (value) => {
          const success = await handleAdd(value as API.ItemData);
          if (success) {
            handleModalOpen(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
      />
      <Update
        onSubmit={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 || {}}
      />

      <ConfigureForm
        onSubmit={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 || {}}
      />

      <Show
        open={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 外贸电商独立站建站

我的网站

程序员随风
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Ant Design Pro 下实现文件下载的实现代码
10-15
在Ant Design Pro框架下实现文件下载功能，是前端开发者在开发过程中常遇到的需求。本文将详细介绍如何在Ant Design Pro中实现文件下载功能，涉及到的关键知识点包括如何使用Ajax发送请求，如何处理响应数据，以及...
react-ant-pro：（基于pro 1.0）基于Ant Design Pro的后台项目修改的多标签页标签（多标签tab，拖拽，富文本，多功能表，多选选择，React Hooks）
02-05
ant-design-tabs（支持多标签tabs）体验环境体验环境： ://kuhami.github.io/react-ant-pro账号：admin / user密码：888888/123456由于体验环境发出的请求针对的是不存在的记录，服务器没有进行操作会报请求错误404...
react-ant：（基于pro 2.0）基于Ant Design Pro的（多标签页标签，拖拽，富文本，拾色器，多功能表，多选选择）
02-06
Ant Tabs Pro（多标签tabs） 开箱即用的中台前端/设计解决方案。 特性 :gem_stone:优雅美观：基于Ant Design架构精心设计 :triangular_ruler:常见设计模式：提炼自中后台应用的典型页面和场景 :rocket:最新技术栈...
基于Ant design pro的后台管理模板.zip
12-14
【标签】"基于Antdesignpro"表明这个项目的核心技术栈是Ant Design Pro，它是React生态中的一个强大工具，具有响应式设计、国际化支持、主题定制等功能，适用于构建高效、美观且易用的后台应用。 在压缩包文件名称...
Vue2版前端源码，基于 Vue2+AntDesignVue 实现的 Ant Design Pro提供强大代码生成器的低代码平台
06-02
JeecgBoot—Vue2版前端源码，基于 Vue2+AntDesignVue 实现的 Ant Design Pro，提供强大代码生成器的低代码平台。 前端页面代码和后端功能代码一键生成，不需要写任何代码，保持jeecg一贯的强大
微信小程序骨架屏
djjdjdjdjddjjdjd的博客
08-16 440
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 485
【代码】springboot网上商品订单转手系统bootpf
Nuxt3【内置的工具函数】2024最新版
最新发布
朝阳39的博客
08-20 734
用于在Vue应用程序或API路由中进行HTTP请求，详见。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 1122
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
React学习笔记，从入门到砸门
留白声的博客
08-20 499
react详细自我学习笔记，内容包括JSX、Redux、Router等
CSS的:defined伪类：选择已定义元素的新选择器
2401_85743969的博客
08-17 628
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 169
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
Vue :class 绑定可以结合多个判断维度来动态设置类
u010865136的专栏
08-19 154
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
vue3 @antv/x6 使用画布滚动条以后的几个问题的解决
jwbabc的专栏
08-20 98
通过设置@antv/x6的插件scroller的options，来达到基本上满足项目的原型要求。
基于vue框架的爱看电影网站v4o92（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-15 1024
项目功能：用户,电影分类,电影信息,电影评分基于Vue框架的爱看电影网站项目功能丰富多样，旨在为用户提供一个集电影浏览、信息查询、观影体验、互动交流于一体的综合性平台。
基于vue框架的班级网站的设计与实现vg66m（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-20 702
本研究旨在设计并实现一个基于Vue框架的班级网站，通过现代化的前端技术和用户体验设计，为班级成员提供一个便捷、高效、美观的在线交流空间。随着互联网技术的普及，越来越多的班级开始尝试建立自己的在线平台，以实现信息的快速传递和资源的有效共享。本系统采用前后端分离的开发模式，前端使用Vue.js框架构建用户界面，后端使用Node.js或Spring Boot等框架开发RESTful API，数据库采用MySQL或MongoDB等数据库进行数据存储和查询。每个步骤都需要仔细配置和测试，以确保系统的稳定性和高效性。
一些有趣的XSS注入GAME
qq_67758645的博客
08-17 993
如果我们不经过前面的javascript:将其变成字符串，那么传进去后时候就会带两个引号，那么就算setTimeout可以将字符串当作代码执行，但是，里面还是一层字符串，执行不了。我理解的是javascript：将后面的alert字符串替换成alert js代码，类似于eval的作用，传进setTimeout的时候就不是字符串，而是js代码。将%编码试试，%25，这样到后端以后就会变成%28 %29，如果js能够解码的话，最后传到页面的时候在解码%28，%29为（），这样不就实现了嘛。
and design vue表格列宽度拖拽，vue-draggable-resizable插件使用
m0_46978096的博客
08-20 136
【代码】and design vue表格列宽度拖拽，vue-draggable-resizable插件使用。
Bootstrap 附加导航（Affix）插件
2402_83140078的博客
08-17 607
附加导航（Affix）插件允许指定 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 会锁定在某个位置，不会随着页面其他部分一起滚动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员随风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值