Mock17-Antd高级模板组件ProComponents

MegaQi

发布于 2024-02-27 12:56:25

2670

发布于 2024-02-27 12:56:25

升级好最新前端框架后，让我们回到Mock服务前后端的配置服务开发中，最开始我们已经学会了Antd pro的中后台框架的创建，以及使用Ant Design组件进行布局式开发前端页面。接下来让我们更进一步，了解和学习能让让中后台开发更简单的模板组件ProComponents。

ProComponents

ProComponents 是基于 Ant Design 而开发的模板组件，提供了更高级别的抽象支持，开箱即用。可以显著地提升制作 CRUD 页面的效率，更加专注于页面

拿项目解释下，我们之前在实现项目管理的时候，是一个个组件组装起来，并且需要对样式进行布局调整。而且大部分页面的无非就是表单，搜索和分页表。那么ProComponents是对其这些每个页面重复的工作又进行一个高级封装，使得我们通过简单的参数设置就能实现整套页面。

官网 https://procomponents.ant.design/

模版组件主要提供如下组件

ProLayout 解决布局的问题，提供开箱即用的菜单和面包屑功能
ProTable 表格模板组件，抽象网络请求和表格格式化
ProForm 表单模板组件，预设常见布局和行为
ProCard 提供卡片切分以及栅格布局能力
ProDescriptions 定义列表模板组件，ProTable 的配套组件
ProSkeleton 页面级别的骨架屏

组件包使用需要安装依赖

$ npm i @ant-design/pro-components --save
# 注意 使用条件 antd 的版本 >= 4.11.1

项目中使用直接通过引用到 js/tsx中即可

// 每一个包都是一个独立的组件包，比如ProForm使用示例如下 
import React from 'react';
import { ProForm, ProFormText } from '@ant-design/pro-components';

export default () => {
  return (
    <ProForm
      onFinish={async (values) => {
        console.log(values);
      }}
    >
      <ProFormText name="name" label="姓名" />
    </ProForm>
  );
};

页面渲染就会直接呈现一个带有功能按钮的表单组合模块

高级表格 ProTable

ProTable 组件是为了解决项目中需要写很多 table 的样板代码的问题，所以在其中做了很多常用的逻辑封装。当你的表格需要与服务端进行交互或者需要多种单元格样式时，ProTable 是不二选择。

引入方法：import { ProTable } from '@ant-design/pro-components';

区域布局参考如下图，其中所有部分都可以通过属性配置按需显隐

Img

重要API：request

request 会接收一个对象。对象中必须要有 data 和 success，如果需要手动分页 total 也是必需的。request 会接管 loading 的设置，同时在查询表单查询时和 params 参数发生修改时重新执行。同时查询表单的值和 params 参数也会带入。

常用属性

params 用于 request 查询的额外参数，一旦变化会触发重新加载
columns 表格列配置和内部值的绑定与属性设置
actionRef Table action 的引用，便于自定义触发
formRef 是否显示搜索表单，传入对象时为搜索表单的配置
search 是否显示搜索表单，传入对象时为搜索表单的配置
onSubmit 提交表单时触发

其他属性和参数配置，参考之前讲解的antd组件使用方式，这里不做过多重复说明，详细参考官文档 https://procomponents.ant.design/components/table

接口管理初实现

首先我们要创建一个路由和新的页面来对项目的接口进行管理。在路由配置有两点需要说明：

interface路径path在project下
此页面要使用属性hideInMenu进行菜单隐藏

//  config/routes.ts
  {
    path: '/project/interface',
    name: '接口管理',
    hideInMenu: true,
    component: './Interface/index.tsx',
  },

然后要在项目管理的功能操作列加一个点击跳转，此处用到的 umi 包下的<Link>，这里我们简单只做一个空白页跳转，更多API说明可查看官网https://umijs.org/docs/api/api#link 当然也会在下节讲到一些传参内容。这里只需要注意to的值等于routes配置path值即可。

// src/pages/Project/index.jsx
import { Link } from 'umi'
...
render: (text, record) => (
        <Space>
          <!--下一行为新增跳转-->
          <Link to={'/project/interface'}>接口管理</Link> 
          <a onClick={() => editAction(record)}>编辑</a>
          <a onClick={() => deleteConfirmWithPromise(record)}>删除</a>
        </Space>
      ),

然后根据路由component配置，需要在pages文件件中分别创建一个子目录Project，以及index.jsx空白页面。最终实现过通过点击接口管理跳转过去。

Img

最后根据第二小节的protable使用说明，来实现基础页面。非常简洁和基础的代码的代码见下放<代码清单>，其中几个小要点为：

需要从pro-components同时导入ProTable和ProColumns，后者为子项列组件。
表头和列的配置和绑定核心全在columns配置，它是一个JSONArray类型，里边各项属性按需参考列说明，这里特别说明一个属是 HideInXX, 它可控制某列绑定在不需要的区域展示，比如对于说明，我们并不像它出现在搜索区域里。 https://procomponents.ant.design/components/table#columns-%E5%88%97%E5%AE%9A%E4%B9%89 Img

代码清单：src/pages/Interface/index.tsx

// @ts-ignore
import React from "react";
import { ProTable, ProColumns} from '@ant-design/pro-components';

type apiItem ={
  name: string,
  method: string,
  path: string,
  desc: string
};

const apicolumns: ProColumns<apiItem>[] = [
  {
    title: '标题名称',
    dataIndex: 'name',
    ellipsis: true,
  },
  {
    title: '接口方法',
    dataIndex: 'method',
    ellipsis: true,
  },
  {
    title: '请求路径',
    dataIndex: 'path',
    ellipsis: true,
  },
  {
    title: '接口用途说明',
    dataIndex: 'desc',
    hideInSearch: true,
    ellipsis: true,
  },
  {
    title: '管理操作',
    valueType: 'option',
    key: 'option',
  },
]
export default () => {
    return (
      <ProTable<apiItem>
        columns={apicolumns}
      >

      </ProTable>
    )
};

最终利用pro table 快速实现了带有查询和数据展示的综合页面，看一下是不是超级简单就实现了一个全要素的搜索与展示页面，当然它能支持很多多样化的配置，在后边的实际项目实战中会讲解用到的一些，更多还是需要大家按需参考官方API说明。