useTable

useTable 是 Refine useTable 的封装，主要用于扩展 TDesign 表格组件的功能。

引入组件

import { useTable } from '@duxweb/dux-refine'

基础示例

使用这个 hook 将会自动请求当前路由对应资源的列表数据，并将其作为表格可用返回参数。

import { useTable } from '@duxweb/dux-refine'

const columns = []

const {
  data,
  pagination,
  selecteds,
  setSelecteds,
  selectOptions,
  sorters,
  setSorters,
  filters,
  setFilters,
  tableFilters,
  setTableFilters,
  refetch,
  loading,
} = useTable({
  pagination: {
    current: 0,
    pageSize: 10,
  },
  columns: columns,
  queryMeta: {
    // 获取查询参数
    params: {},
  },
})

hook 参数

useTable 的参数继承了 Refine useTable 的参数，请参阅具体文档。以下是新增的方法：

columnsPrimaryTableCol[]
undefined
配置表格 TDesign Table 的列参数。

返回数据

返回的数据适用于 TDesign Table 组件，你可以根据需要将它们传递给组件。

dataArray<TData>
undefined
表格数据，从资源的 API 请求后获得的列表数据。
filtersRecord<string, any>
undefined
筛选数据，在进行筛选操作后可以使用这个参数来获取筛选条件数据。
setFilters(values: Record<string, unknown>) => void
undefined
设置筛选条件，在使用该方法时可以设置额外的筛选条件。
tableFiltersFilterValue
undefined
表格筛选数据，需要传递给 TDesign Table 组件的 filterValue 参数。
setTableFilters(values: FilterValue) => void
undefined
设置表格筛选数据，传递给 TDesign Table 组件的 onFilterChange 参数。
sortersTableSort
undefined
表格排序条件，传递给 TDesign Table 组件的 sort 参数。
setSorters(sort: TableSort, options: SortOptions<TData>) => void
undefined
设置表格排序条件，传递给 TDesign Table 组件的 onSortChange 参数。
selectedsArray<string | number>
undefined
表格选中数据，传递给 TDesign Table 组件的 selectedRowKeys 参数。
selectOptionsSelectOptions<TData>
undefined
表格选中数据，获取到选中的条目数据。
setSelecteds(selectedRowKeys: Array<string | number>, options: SelectOptions<TData>) => void
undefined
设置表格选中数据，传递给 TDesign Table 组件的 setSelecteds 参数。
paginationPaginationProps
undefined
设置分页参数，传递给 TDesign Table 组件的 pagination 参数。
loadingboolean
undefined
表格数据加载状态，传递给 TDesign Table 组件的 loading 参数。
refetch() => void
undefined
手动刷新表格数据的方法。默认情况下无需手动操作，Refine 提供了自动更新相关数据的机制。例如，在同一个资源下增加、删除或修改数据后，表格会自动获取新的列表数据。
页面表单
useForm