强大的table组件-antd pro table

概述

如果用 react 开发前端, 建议基于 来开发, antd pro 是 antd 的增强版, antd 是组件库, antd pro 则是前端框架, 基于 antd pro, 创建工程时不用再考虑:

1. 路由的设置, 以及和菜单的联动
2. 面包屑和路由的联动
3. 发布打包的方法
4. 工程 lint
5. 后端 api 访问方式
6. 页面状态的管理
7. … …

总之, 对于管理类型的应用, 基于 antd pro, 可以更多的关注自己的业务, 而不用在工程的管理上花费多余的时间. 在 antd pro 的官网上, 有它的使用方式, 这里主要介绍 antd pro 中的一个组件 antd pro table 的使用

antd pro table

antd pro 中的大部分组件来自于 antd , 而 antd pro table 则是基于 antd 的 table 组件再封装了一层, 熟练使用 antd pro table, 能够覆盖大部分增删改查业务的需要, 关键是只需要极少的配置, 就能得到一个完善的表格.

antd pro table 的主要部分

如下图:

1. 绿色框内: 具体表格内容, 包含分页
2. 红色框内: 检索部分, 通过 column 的配置自动生成的
3. 黄色框内: 表格的工具栏, 通过配置 toolbarrender 定义其中的按钮
4. 蓝色框内: 对表格数据进行多选操作时显示的信息

表格显示的配置(绿色框内)

protable 组件有个 request 的 props, 这个 prop 就是用来配置表格数据的来源, 一般会关联后端一个 api

1  <protable
2    headertitle="查询表格"
3    columns={columns}
4    request={(params) => querytabledata(params)}
5  />

其中 querytabledata 一般会访问后端的 api, 然后返回 json 格式数据, 返回的数据和表格对应是根据表格的 columns 配置

 1  const columns = [
 2    {
 3      title: '规则名称',
 4      dataindex: 'name',
 5    },
 6    {
 7      title: '描述',
 8      dataindex: 'desc',
 9    },
10    {
11      title: '服务调用次数',
12      dataindex: 'callno',
13      sorter: true,
14      rendertext: (val) => `${val} 万`,
15    },
16    {
17      title: '状态',
18      dataindex: 'status',
19      valueenum: {
20        0: {
21          text: '关闭',
22          status: 'default',
23        },
24        1: {
25          text: '运行中',
26          status: 'processing',
27        },
28        2: {
29          text: '已上线',
30          status: 'success',
31        },
32        3: {
33          text: '异常',
34          status: 'error',
35        },
36      },
37    },
38    {
39      title: '上次调度时间',
40      dataindex: 'updatedat',
41      sorter: true,
42      valuetype: 'datetime',
43    },
44    {
45      title: '操作',
46      dataindex: 'option',
47      valuetype: 'option',
48      render: (_, record) => (
49        <>
50          <a
51            onclick={() => {
52              handleupdatemodalvisible(true);
53              setstepformvalues(record);
54            }}
55          >
56            配置
57          </a>
58          <divider type="vertical" />
59          <a href="">订阅警报</a>
60        </>
61      ),
62    },
63  ];

column 的 dataindex 对应返回 json 数据中的 key

检索的配置(红色框内)

是否显示检索部分

1  <protable
2    headertitle="查询表格"
3    search={false}
4  />

配置成 false 就不会显示 检索部分, 对于某些数据量不大的表格, 可以直接不显示这部分

检索的内容是如何生效的

protable 组件有个 request 的 props, 这个 prop 就是用来配置表格数据的来源, 一般会关联后端一个 api

1  <protable
2    headertitle="查询表格"
3    columns={columns}
4    request={(params) => querytabledata(params)}
5  />

• request 中的 params 参数中就包含了分页的信息, 以及检索条件, 点击 检索按钮, 会通过 request 中的方法再次加载 table 数据
• column 中的 valuetype 配置会改变检索部分中的 dom, 比如 valuetype 是'datetime', 在检索部分会显示成 日期控件
• column 也可以通过配置 hideinsearch, 使其不显示在 检索部分

工具栏的配置(黄色框内)

 1  <protable
 2    headertitle="查询表格"
 3    toolbarrender={(action, { selectedrows }) => [
 4      <button icon={<plusoutlined />} type="primary" onclick={() => handlemodalvisible(true)}>
 5        新建
 6      </button>,
 7      selectedrows && selectedrows.length > 0 && (
 8        <dropdown
 9          overlay={
10            <menu
11              onclick={async (e) => {
12                if (e.key === 'remove') {
13                  await handleremove(selectedrows);
14                  action.reload();
15                }
16              }}
17              selectedkeys={[]}
18            >
19              <menu.item key="remove">批量删除</menu.item>
20              <menu.item key="approval">批量审批</menu.item>
21            </menu>
22          }
23        >
24          <button>
25            批量操作 <downoutlined />
26          </button>
27        </dropdown>
28      ),
29    ]}
30    request={(params) => {
31      return queryrule(params);
32    }}
33    columns={columns}
34    rowselection={{}}
35  />

• toolbarrender 用来设置工具栏的按钮及其事件
• 工具栏最右边的 4 个图标(密度, 全屏, 刷新, 列设置), 可以设置 table 的显示方式, 可以通过 options 来配置其是否显示
• rowselection 用来控制表格是否可以多选

表格操作信息(蓝色框内)

当表格中的数据可以多选时, 才会有这部分的信息显示