ant-design-pro

最新推荐文章于 2025-09-11 07:50:52 发布

原创

最新推荐文章于 2025-09-11 07:50:52 发布 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #anti design pro

前情背景：用ant-design-pro完成业务逻辑，期间遇到了许多bug，查阅了许多博客和官方文档，感觉有些问题还是很少有人提出或解决，所以谨以此篇文章，献给被ant-design-pro头疼的各位，希望能够帮到大家。

1. render process gone

问题背景：原先运行的好好的，加了许多逻辑后，一运行就报错，还一直像卡死那样。仔细排查了很多遍，才发现是自己写了个死循环，即var i=0；程序一直在for循环里面，所以卡死。将这一行删除后，运行正常。

2、ant-design-pro发送请求的流程（我用的是dispatch）

页面通过dispatch发送请求，请求路径为type的内容，即models里调用的services，最终在services中发送resquest请求，request请求第一个参数为服务器路径，即服务器后端controller的路径，method为方法，即post或者get，data是跟着请求传过去的数据。

后端controller
在这里插入图片描述

controller里调用service，最终在services里写逻辑以及返回，红框部分连起来的路径即为request请求的第一个参数。

3、一个页面有两个不同的页面切换，如下图官方文档中的例子

在这里插入图片描述

我用的是tabs组件，跟官方文档不同，因为我的要求是两个页面不同，且我主页面用的PageContainer组件引用这两个页面。

在这里插入图片描述

4.查询表格查询功能

背景：我需要将查询条件（没有时，则为空，即数据库所有数据）传至后端，后端查询符合条件的返回，前端表格展示数据。

官方文档的例子
在这里插入图片描述
官方例子代码：

import React, {
   
    useRef } from 'react';
import {
   
    PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
import {
   
    Button, Tag, Space, Menu, Dropdown } from 'antd';
import type {
   
    ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable, {
   
    TableDropdown } from '@ant-design/pro-table';
import request from 'umi-request';

type GithubIssueItem = {
   
   
  url: string;
  id: number;
  number: number;
  title: string;
  labels: {
   
   
    name: string;
    color: string;
  }[];
  state: string;
  comments: number;
  created_at: string;
  updated_at: string;
  closed_at?: string;
};

const columns: ProColumns<GithubIssueItem>[] = [
  {
   
   
    dataIndex: 'index',
    valueType: 'indexBorder',
    width: 48,
  },
  {
   
   
    title: '标题',
    dataIndex: 'title',
    copyable: true,
    ellipsis: true,
    tip: '标题过长会自动收缩',
    formItemProps: {
   
   
      rules: [
        {
   
   
          required: true,
          message: '此项为必填项',
        },
      ],
    },
  },
  {
   
   
    title: '状态',
    dataIndex: 'state',
    filters: true,
    onFilter: true,
    valueType: 'select',
    valueEnum: {
   
   
      all: {
   
    text: '全部', status: 'Default' },
      open: {
   
   
        text: '未解决',
        status: 'Error',
      },
      closed: {
   
   
        text: '已解决',
        status: 'Success',
        disabled: true,
      },
      processing: {
   
   
        text: '解决中',
        status: 'Processing',
      },
    },
  },
  {
   
   
    title: '标签',
    dataIndex: 'labels',
    search: false,
    renderFormItem: (_, {
   
    defaultRender }) => {
   
   
      return defaultRender(_);
    },
    render: (_, record) => (
      <Space>
        {
   
   record.labels.map(({
   
    name, color }) => (
          <Tag color={
   
   color} key={
   
   name}>
            {
   
   name}
          </Tag>
        ))}
      </Space>
    ),</

最低0.47元/天解锁文章