pro-table-ant-design-vue v0.0.9

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

Slots

Events

ListToolbar

Toolbar section for customizing forms.

ListToolBarProps

Toolbar configuration properties for lists and tables

Setting