「2023 年最新」使用 React、Ant Design Pro、ProComponents 实现各种搜索筛选表格 实战总结（一）

情况一：后端中 ID 字段不唯一时正常渲染表格

• rowkey 结合其他字段指定，进而唯一，注意写法

<ProTable
    scroll={{ x: 1100 }}
    headerTitle="xxx"
    rowKey={(record) => `${record.xxx_level}#${record.xxx_id}`} // 注意写法
    columns={columns as any}
    actionRef={actionRef}
    request={requestTable}
    search={{ defaultCollapsed: false }}
    toolBarRender={() => [<Create />]}
    form={{
      syncToUrl: (values) => values,
      syncToInitialValues: true,
      ignoreRules: false,
    }}
  />

情景二：Protable Columns 搜索框检索和表格列渲染内容字段不一致

大致意思就是，你使用各种搜索框进行下方表格的检索，这时候根据后端给的接口规范，使用 GET 请求并携带的 query 参数中的字段发起检索，进而实现对表格的筛选。

但是你检索的字段和表格渲染字段名不一样，比如姓名这一列即为表格项，又是搜索框检索项，但是两种字段不一样，搜索是 query 中你要携带的字段名为 user_name, 表格中渲染的字段名为chinese_name

这时候解决方法就是一式两份，一份 hide in table，一份 hide in search。

具体代码如下：

「推荐项目中较规范的一种写法」

setting.tsx

...
const CHINESE_NAME_TEXT: ProColumns = {
  title: '姓名',
  dataIndex: 'chinese_name',
  hideInSearch: true,
  width: 100,
  fixed: 'left',
};

const USER_NAME_SEARCH: ProColumns = {
  title: '姓名',
  dataIndex: 'user_name',
  renderFormItem: () => <ChineseNameSelect />,
  hideInTable: true,
};
...


const USER_LIST_SETTINGS = [
  CHINESE_NAME_TEXT,
  USER_NAME_SEARCH,
  ];

export default USER_LIST_SETTINGS;

index.tsx

const columns: ProColumns[] = [
    ...USER_LIST_SETTINGS,
    {
      title: '操作',
      hideInSearch: true,
      width: 100,
      fixed: 'right',
      render: (_: any, record: RESPONSE.XXXOptionsType) => (
        <Actions data={record} actionRef={actionRef?.current} />
      ),
    },
  ];

情景三：自定义搜索框，表格列样式

封装好自己想要带样式的组件，然后选择对应的 render 进行设置

• 代码示例

  {
    disable: true,
    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>
    ),
  }

• 总结：render 管表格样式 | renderFormItem 管搜索框样式 | renderText 一般用于文本变化（比如时间、格式化文本展示）

情景四：ProTable 的 ValueType

valueType 是 ProComponents 的灵魂，ProComponents 会根据 valueType 来映射成不同的表单项。
建议看文档：
ProTable 的 valueType

情景五：protable 请求数据安装后端接口规范格式化

比如在级联复选框中，会涉及到多个选项的选中，而且每个选项和它上一级的选项还有关系，比如你选中了：
X/XX/XXX
Y/YY
Z/ZZ/ZZZ/ZZZZ
有如下要求：
返回参数 =10001#20001,10001#20002#30001,10001#20002#30002
每一套筛选项之间：用井号分隔
筛选项内不同级别之间：用英文下划线分隔
代码实现：
index.tsx

 const makeRequest = (request: any) => {
    return async ({ ...query }: XXXRequestParams) => {
      const res = await request({
        ...query,
      });
      const { data, paging } = res || {};
      return {
        data: data.depts ?? [],
        total: paging?.total_size,
      };
    };
  };

  const requestTable = (rawData: XXXSearchRequestParams) => {
    const {address, dept, ...props} = rawData
    const params = {
      address: address?.join(','),
      dept: dept?.map((arr: any)=>arr.join('#')).join(','),
      ...props
    }
    console.log(params)
    return makeDepartmentTableRequest(fetchXXXGroup)(params);
  };

import { request } from 'umi';
import { API_PREFIX } from '@/services/settings';
/**
 * 查询XX列表
 * @param params
 * @returns
 */
export const fetchXXXGroup = async (params: any) =>
  request(`${API_PREFIX}/xxx`, { params });

情景六 表格每列固定、宽度定制、表头固定

todo

 <ProTable
 scroll={{ x: 'max-content' }}
>

注意： Protable 为什么 columns 中添加了一列在筛选项中能出现，但是表格中不出现
这种情况应该是你没有添加 width 的缘故，默认就为零了

import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    fixed: 'left',
    width: 150,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 150,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    width: 200,
  },
  // more columns
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  // more data
];

<Table
  columns={columns}
  dataSource={data}
  pagination={false}
  scroll={{ y: 240 }}
/>;

在这个示例中，我们创建了一个 Table 组件，其中 columns 是表格的列信息，dataSource 是表格的数据源。我们使用 fixed 属性将第一列的表头固定在左侧，然后设置了每列的宽度。接着，我们使用 scroll 属性来设置表格的滚动条高度。当表格数据超过了这个高度时，表格会出现滚动条。

这个示例中的表格的表头会在向上滑动时吸顶，因为第一列的表头已经被固定在了左侧，其他列的表头会随着表格的滚动而滚动。你可以根据自己的需求调整表格的列宽和滚动条高度。