Skip to content

@ant-design-vue/pro-table：重构Table，新增组件。 #257

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 6, 2022
Merged

@ant-design-vue/pro-table：重构Table，新增组件。 #257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3346f15
refactor(@ant-design-vue/pro-table): 重构ProTable；新增ToolBar, Alert组件。
lolarun Dec 5, 2022
36068b4
style(@ant-design-vue/pro-table): 移除废弃引用及代码
lolarun Dec 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
245 changes: 118 additions & 127 deletions packages/pro-table/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,127 +1,118 @@
<h1 align="center">
Ant Design Pro Table
</h1>

<div align="center">

[![NPM version](https://img.shields.io/npm/v/@ant-design-vue/pro-table/latest?style=flat)](https://npmjs.org/package/@ant-design-vue/pro-table) [![Vue Support](https://img.shields.io/badge/support-Vue3-green?style=flat)](./package.json) [![Vue Grammar Level](https://img.shields.io/badge/full-Composition%20API-blue?style=flat)](https://v3.vuejs.org/guide/composition-api-introduction.html) [![NPM downloads](http://img.shields.io/npm/dm/@ant-design-vue/pro-table.svg?style=flat)](https://npmjs.org/package/@ant-design-vue/pro-table) [![License](https://img.shields.io/github/license/vueComponent/pro-layout)](./LICENSE)

</div>

## Basic Usage

Recommend look [Examples](./examples/) or [Use Template](https://github.com/sendya/preview-pro)

## Branch

- next : Vue3 + ant-design-vue@3.x (latest)
- v3.1 : Vue3 + ant-design-vue@2.2.x (release LTS)
- v2 : Vue2 + ant-design-vue@1.7.x

## Install

```bash
# yarn
yarn add @ant-design-vue/pro-table
# npm
npm i @ant-design-vue/pro-table -S
```

### Simple Usage

First, you should add the `@ant-design-vue/pro-table` that you need into the library.

```js
// main.[js|ts]
import '@ant-design-vue/pro-table/dist/style.css'; // pro-layout css or style.less

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import ProTable from '@ant-design-vue/pro-table';

const app = createApp(App);

app.use(Antd).use(ProLayout).use(PageContainer).mount('#app');
```

After that, you can use pro-layout in your Vue components as simply as this:

```vue
<template>
<pro-table
:request="request"
:columns="columns"
:bordered="true"
:pagination="pagination"
></pro-table>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

import type { ColumnsType } from '@ant-design-vue/pro-table';
const pagination = reactive({
pageSize: 10
});
const columns = reactive<ColumnsType>([
{
dataIndex: 'name',
title: '姓名',
key: 'name',
search: true
},
{
dataIndex: 'age',
title: '年龄',
key: 'age',
search: true
},
{
dataIndex: 'action',
title: '操作',
key: 'action'
}
]);
const request = async (params: any = {}) => {
let data: any[] = [];

console.log('params', params);
for (let i = 0; i < params.pageSize; i++) {
data.push({
name: '第' + params.current + '页的' + +(i + 1) + (params?.name || ''),
age: 18
});
}
return {
data,
success: true,
total: 100
};
};
</script>
```

## API

### ProTable

| Property | Description | Type | Default Valuere |
| ---------- | ---------------------------------------------- | ----------------------------------------------------- | --------------- |
| request | 获取`dataSource` 的方法 | (params?: {pageSize,current}) => {data,success,total} | - |
| dataSource | Table 的数据，protable 推荐使用 request 来加载 | T[] | - |
| | Vue-router`routes` prop | Object | `[{}]` |

### Columns 列定义

与 ant-design-vue 中 table 相比 ，多出以下属性

| Property | Description | Type | Default Valuere |
| -------- | ------------ | ------- | --------------- |
| search | 是否支持搜索 | boolean | - |

## Build project

```bash
pnpm build # Build library and .d.ts
```
<h1 align="center">
Ant Design Pro Table
</h1>

<div align="center">

[![NPM version](https://img.shields.io/npm/v/@ant-design-vue/pro-table/latest?style=flat)](https://npmjs.org/package/@ant-design-vue/pro-table) [![Vue Support](https://img.shields.io/badge/support-Vue3-green?style=flat)](./package.json) [![Vue Grammar Level](https://img.shields.io/badge/full-Composition%20API-blue?style=flat)](https://v3.vuejs.org/guide/composition-api-introduction.html) [![NPM downloads](http://img.shields.io/npm/dm/@ant-design-vue/pro-table.svg?style=flat)](https://npmjs.org/package/@ant-design-vue/pro-table) [![License](https://img.shields.io/github/license/vueComponent/pro-components)](./LICENSE)

</div>

# 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.

![layout
](https://gw.alipayobjects.com/zos/antfincdn/Hw%26ryTueTW/bianzu%2525204.png)

## 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.

```tsx | pure
<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
params: T & {
pageSize: number;
current: number;
},
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 payload = await axios.get('//api', {
page: params.current,
pageSize: params.pageSize,
});
return {
data: payload.result,
// Please return true for success.
// otherwise the table will stop parsing the data, even if there is data
success: boolean,
// not passed will use the length of the data, if it is paged you must pass
total: number,
};
}}
/>
```

### 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](https://antdv.com/components/card#API) | - |
| toolbar | Transparent transmission of `ListToolBar` configuration items, not displayed when set to false | `false` \| [ListToolBarProps](#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` | - |
116 changes: 116 additions & 0 deletions packages/pro-table/README.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<h1 align="center">
Ant Design Pro Table
</h1>

<div align="center">

[![NPM version](https://img.shields.io/npm/v/@ant-design-vue/pro-table/latest?style=flat)](https://npmjs.org/package/@ant-design-vue/pro-table) [![Vue Support](https://img.shields.io/badge/support-Vue3-green?style=flat)](./package.json) [![Vue Grammar Level](https://img.shields.io/badge/full-Composition%20API-blue?style=flat)](https://v3.vuejs.org/guide/composition-api-introduction.html) [![NPM downloads](http://img.shields.io/npm/dm/@ant-design-vue/pro-table.svg?style=flat)](https://npmjs.org/package/@ant-design-vue/pro-table) [![License](https://img.shields.io/github/license/vueComponent/pro-components)](./LICENSE)

</div>

# ProTable - 高级表格

ProTable 的诞生是为了解决项目中需要写很多 table 的样板代码的问题，所以在其中做了封装了很多常用的逻辑。这些封装可以简单的分类为预设行为与预设逻辑。

依托于 ProForm 的能力，ProForm 拥有多种形态，可以切换查询表单类型，设置变形成为一个简单的 Form 表单，执行新建等功能。

![layout
](https://gw.alipayobjects.com/zos/antfincdn/Hw%26ryTueTW/bianzu%2525204.png)

## 何时使用

当你的表格需要与服务端进行交互或者需要多种单元格样式时，ProTable 是不二选择。

## API

ProTable 在 antd 的 Table 上进行了一层封装，支持了一些预设，并且封装了一些行为。这里只列出与 ant-design-vue Table 不同的 api。

### request

`request` 是 ProTable 最重要的 API，`request` 会接收一个对象。对象中必须要有 `data` 和 `success`，如果需要手动分页 `total` 也是必需的。`request` 会接管 `loading` 的设置，同时在查询表单查询和 `params` 参数发生修改时重新执行。同时 查询表单的值和 `params` 参数也会带入。以下是一个例子：

```tsx | pure
<ProTable
// params 是需要自带的参数
// 这个参数优先级更高，会覆盖查询表单的参数
params={params}
request={async (
// 第一个参数 params 查询表单和 params 参数的结合
// 第一个参数中一定会有 pageSize 和 current ，这两个参数是 antd 的规范
params: T & {
pageSize: number;
current: number;
},
sort,
filter,
) => {
// 这里需要返回一个 Promise,在返回之前你可以进行数据转化
// 如果需要转化参数可以在这里进行修改
const payload = await axios.get('//api', {
page: params.current,
pageSize: params.pageSize,
});
return {
data: payload.result,
// success 请返回 true，
// 不然 table 会停止解析数据，即使有数据
success: boolean,
// 不传会使用 data 的长度，如果是分页一定要传
total: number,
};
}}
/>
```

### 属性

| 名称 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- |
| request | 获取 `dataSource` 的方法 | `(params?: {pageSize,current},sort,filter) => {data,success,total}` | - |
| params | 用于 `request` 查询的额外参数，一旦变化会触发重新加载 | `object` | - |
| cardBordered | Table 和 Search 外围 Card 组件的边框 | `boolean \| {search?: boolean, table?: boolean}` | false |
| cardProps | Table 外围的 Card 组件的属性，设为 false 时不显示 | false | |
| toolbar | 透传 `ListToolBar` 配置项 | [ListToolBarProps](#listtoolbarprops) | - |
| options | table 工具栏设置区域的配置项，传入 function 会点击时触发 | `{{ density?: boolean, fullScreen: boolean \| function, reload: boolean \| function, setting: boolean `}}` | `{ fullScreen: false, reload: true, setting: true }` |

### 插槽

| 名称 | 说明 | 标签 |
| -------- | -------------------- | --------------- |
| actions | table 工具栏操作区域 | v-slot:actions |
| settings | table 工具栏设置区域 | v-slot:settings |

### 事件

| 名称 | 说明 | 参数 |
| ------------ | ----------------------------- | --------------------------- |
| load | 数据加载完成后触发,会多次触发 | `(dataSource: T[]) => void` |
| requestError | 数据加载失败时触发 | `(error: Error) => void` |

### 列表工具栏

用于自定义表格的工具栏部分。

#### ListToolBarProps

| 参数 | 说明 | 类型 | 默认值 |
| ------------ | ---------------------------------------------- | --------------------------------- | ------- |
| title | 标题 | `尚未实现` | - |
| subTitle | 子标题 | `尚未实现` | - |
| description | 描述 | `尚未实现` | - |
| search | 查询区 | `尚未实现` | - |
| actions | 操作区 | `false \| VueNode[]` | - |
| settings | 设置区 | `false \| (VueNode \| Setting)[]` | - |
| filter | 过滤区，通常配合 `LightFilter` 使用 | `尚未实现` | - |
| multipleLine | 是否多行展示 | `尚未实现` | `false` |
| menu | 菜单配置 | `尚未实现` | - |
| tabs | 标签页配置，仅当 `multipleLine` 为 true 时有效 | `尚未实现` | - |

#### Setting

| 参数 | 说明 | 类型 | 默认值 |
| ------- | ------------ | --------------------- | ------ |
| icon | 图标 | `ReactNode` | - |
| tooltip | tooltip 描述 | `string` | - |
| key | 操作唯一标识 | `string` | - |
| onClick | 设置被触发 | `(key: string)=>void` | - |
Loading