欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

强大的table组件-antd pro table

程序员文章站 2022-07-10 21:22:24
"概述" "antd pro table" "antd pro table 的主要部分" "表格显示的配置(绿色框内)" "检索的配置(红色框内)" "是否显示检索部分" "检索的内容是如何生效的" "工具栏的配置(黄色框内)" "表格操作信息(蓝色框内)" 概述 如果用 react 开发前端, 建 ......

概述

如果用 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 的主要部分

如下图: 强大的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 用来控制表格是否可以多选

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

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