@ant-design-vue/pro-table

Ant Design Pro Table

ProTable - Advanced Tables

ProTable was created to solve the problem of having to write a lot of sample code for tables in a project, so a lot of common logic was encapsulated in it. These wrappers can be simply categorized as pre-defined behaviors and pre-defined logic.

Thanks to ProForm's capabilities, ProForm can take many forms, switch between query form types, set up deformations to become a simple Form form, perform new creation, etc.

When to Use

When your forms need to interact with the server or need multiple cell styles, ProTable is the right choice.

API

ProTable puts a layer of wrapping on top of antd's Table, supports some presets, and encapsulates some behaviors. Only api's that differ from antd Table are listed here.

request

request is the most important API of ProTable, request takes an object. The object must have data and success in it, and total is also required if manual paging is needed. request takes over the loading settings and re-executes them when the query form is queried and the params parameters are modified. Also the query form values and params parameters are brought in. The following is an example.

<ProTable
  // params is a parameter that needs to be self-contained
  // This parameter has higher priority and will override the parameters of the query form
  params={params}
  request={async (
    // The first parameter params is the combination of the query form and params parameters
    // The first parameter will always have pageSize and current, which are antd specifications
    { current, pageSize, ...params },
    sort,
    filter,
  ) => {
    // Here you need to return a Promise, and you can transform the data before returning it
    // If you need to transform the parameters you can change them here
    const {
      data: { result: data, total },
    } = await axios.get<{
      result: Record<string, unknown>[];
      total: number;
    }>('/api', {
      params: { page: current, pageSize, ...params },
    });
    return {
      data,
      // not passed will use the length of the data, if it is paged you must pass
      total,
      // Please return true for success.
      // otherwise the table will stop parsing the data, even if there is data
      success: true,
    };
  }}
/>

Attributes

Name	Description	Type	Default Value
request	How to get dataSource	(params?: {pageSize,current},sort,filter) => {data,success,total}	-
params	Additional parameters used for request query, once changed will trigger reloading	object	-
cardBordered	Border of Card components around Table and Search	boolean | {search?: boolean, table?: boolean}	false
cardProps	Card's props which wrap the Table, not displayed when set to false	false | CardProps	-
toolbar	Transparent transmission of ListToolBar configuration items, not displayed when set to false	false | ListToolBarProps
options	table toolbar, not displayed when set to false	{{ reload: boolean | function, density?: boolean, setting: boolean, fullScreen: boolean | function }}	{ reload :true, density: true, setting: true }

Slots

Name	Description	Tag
actions	Render toolbar actions area	v-slot:actions
settings	Render toolbar settings area, will overwrite the options	v-slot:settings

Events

Name	Description	Arguments
load	Triggered after the data is loaded, it will be triggered multiple times	(dataSource: T[]) => void
requestError	Triggered when data loading fails	(error: Error) => void

ListToolbar

Toolbar section for customizing forms.

ListToolBarProps

Toolbar configuration properties for lists and tables

Parameters	Description	Type	Default
title	title	not implemented	-
subTitle	subTitle	not implemented	-
description	description	not implemented	-
search	query area	not implemented	-
actions	actions area	false | VNode[]	-
settings	settings area	false | (VNode | Setting)[]	-
filter	The filter area, usually used with LightFilter	not implemented	-
multipleLine	Whether to display multiple lines	not implemented	-
menu	menu configuration	not implemented	-
tabs	Tabs configuration, only valid if multipleLine is true	not implemented	-

Setting

Parameters	Description	Type	Default
icon	icon	ReactNode	-
tooltip	tooltip Description	string	-
key	operation unique identifier	string	-
onClick	set to be triggered	(key: string)=>void	-