Table

对 ProTable 的二次封装，主要功能点如下：

• 关闭 columns 默认的 search 功能，需要手动将 search 配置到 column 中才会生效
• request 增加 offset/limit 参数，与知晓云 API 配合使用更加方便
• 支持在 url 内增加分页信息，可跳转到对应分页

开发小 tips

• 开启 rowSelection 后，toolBarRender 可获取可直接拿到 selectedRows，不再需要手动记录，记得开启 preserveSelectedRowKeys 防止切换分页后已选行丢失

export default function PrizeLog() {
  return (
    <Table
      rowSelection={{
        preserveSelectedRowKeys: true,
      }}
      toolBarRender={(_, {selectedRows}) => [
        <AsyncButton
          key="export"
          buttonProps={{type: 'primary', size: 'middle'}}
          onClick={() => exportData(selectedRows)}
        >
          导出
        </AsyncButton>,
      ]}
    />
  )
}

• 开启 enableSearchParams，支持在 url 内插入分页信息

export default function PrizeLog() {
  // 可尝试访问 /xxx?limit=20&offset=20
  return <Table enableSearchParams />
}

• 在 column 中将枚举值翻译为中文

在 ProTable 之前，要实现类似功能需要配置 render，用对应枚举值的字典去匹配

现在可以直接用 ProTable 提供的 ValueEnum 来实现

// 以前
const columns = [
  {
    title: '类型',
    dataIndex: 'type',
    render: value => TYPE_TEXT_MAP[value],
  },
]

// 现在
const columns = [
  {
    title: '类型',
    dataIndex: 'type',
    valueEnum: TYPE_TEXT_MAP,
  },
]

在开启 search 之后，ProTable 还会将该字典转为 Select 的 options

• 待补充

table utils

formatOrderBy

参数

Name	Type
sort	Record<string, SortOrder>

返回值

string

示例

function getBannerList(formData, sort) {
 const orderBy = formatOrderBy(sort)

 const {limit, offset, navigate_path: navigatePath} = formData
 const {query} = io

 Object.entries(pick(formData, ['published', 'navigate_type'])).forEach(([field, value]) => {
   if (!isNil(value)) {
     query.compare(field, '=', value)
   }
 })

 if (navigatePath) {
   query.contains('navigate_path', navigatePath)
 }

 return io.banner.find({limit, offset, query, expand: 'edited_by', orderBy}).then(formatTableData)
}

<Table request={getBannerList} />

源码

pro-table-utils.js

formatTableData

参数

Name	Type
response	AxiosResponse<FindRecordResponse, any>

返回值

Partial<RequestData<Record<string, any>>>

示例

const getTableDataSource = formData => {
 return io.admin
   .find(formData)
   .then(formatTableData)
}

<Table request={getTableDataSource} />

源码

pro-table-utils.js