表格基础
基础用法
传入 columns 和 data 即可快速构建一个表格。
vue
<script setup lang="ts">
import type { TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
const data = [
{ username: "张三", gender: 1, status: 1, progress: 20, birthday: "2023-01-01" },
{ username: "李四", gender: 2, status: 0, progress: 40, birthday: "2023-02-01" },
{ username: "王五", gender: 1, status: 1, progress: 60, birthday: "2023-03-01" },
];
const columns: TableColumn[] = [
{ prop: "username", label: "用户姓名", el: "copy" },
{
prop: "gender",
label: "性别",
el: "el-tag",
elProps: (value: number) => {
if (value === 1) return { type: "success" };
return { type: "danger" };
},
options: async () => {
return [
{ label: "男", value: 1 },
{ label: "女", value: 2 },
];
},
},
{
prop: "status",
label: "状态",
el: "point-tag",
options: [
{ label: "正常", value: 1, tagType: "success" },
{ label: "禁用", value: 0, tagType: "danger" },
],
},
{
prop: "progress",
label: "进度",
el: "el-progress",
tooltip: "学习进度",
elSlots: {
default: ({ value }) => value + "%",
},
},
{ prop: "birthday", label: "生日" },
];
</script>
<template>
<ProTable :columns="columns" :data="data" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
隐藏源代码
多级显示
columns 的 prop 支持 x.y.z 形式的 多（无限）级数据形式。
警告
数据级不宜过多，可能会影响性能。
vue
<script setup lang="ts">
import type { TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
const data = [
{
user: {
name: { value: "张三" },
gender: 1,
},
},
{
user: {
name: { value: "李四" },
gender: 2,
},
},
{
user: {
name: { value: "王五" },
gender: 1,
},
},
];
const columns: TableColumn[] = [
{ prop: "user.name.value", label: "姓名" },
{
prop: "user.gender",
label: "性别",
el: "el-tag",
elProps: (value: number) => {
if (value === 1) return { type: "success" };
return { type: "danger" };
},
options: async () => {
return [
{ label: "男", value: 1 },
{ label: "女", value: 2 },
];
},
},
];
</script>
<template>
<ProTable :columns="columns" :data="data" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
隐藏源代码
options 字典
在 columns 中配置 options 时，Teek 会将当前 data 与 options 的 value 进行比对，如果相等则取出 options 的 label 作为单元格的显示内容。
匹配失败逻辑：如果 options 的 value 都无法匹配到 data，则显示 --，如果您希望匹配不上时，显示 data，则使用 ignoreOptionIfAbsent: true 配置项。
自定义匹配逻辑：可以通过 transformOption 配置项自定义 options 的遍历和匹配逻辑（返回一个 option），当 transformOption 返回 undefined 时，则走匹配失败逻辑。
忽略 options 功能：当传入了 options，但是又希望单元格数据不走 options 匹配逻辑，而是直接渲染传入的 data 时，使用 isFilterOptions: false 配置项。
使用已有 options：通过 optionsProp 配置项指定使用某个 prop 已有的 options。
vue
<script setup lang="ts">
import type { TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
const data = [
{ ticket: "张三", status1: 0, status2: 0, status3: 0, status4: 0, status5: 0, status6: 0 },
{ ticket: "李四", status1: 1, status2: 1, status3: 1, status4: 1, status5: 1, status6: 1 },
{ ticket: "王五", status1: 2, status2: 2, status3: 2, status4: 2, status5: 2, status6: 2 },
{ ticket: "赵六", status1: 3, status2: 3, status3: 3, status4: 3, status5: 3, status6: 3 },
{ ticket: "孙七", status1: 4, status2: 4, status3: 4, status4: 4, status5: 4, status6: 4 },
];
const options = [
{ label: "未解决", value: 0 },
{ label: "已解决", value: 1 },
{ label: "解决中", value: 2 },
{ label: "失败", value: 3 },
{ label: "审核中", value: 4 },
];
const columns: TableColumn[] = [
{ prop: "ticket", label: "事件" },
{
label: "状态",
prop: "status1",
el: "el-tag",
options: options,
},
{
label: "匹配失败不取默认数据",
prop: "status2",
el: "el-tag",
options: () => options.slice(3),
},
{
label: "匹配失败取默认数据",
prop: "status3",
el: "el-tag",
options: async () => options.slice(3),
ignoreOptionIfAbsent: true,
},
{
label: "自定义 option",
prop: "status4",
el: "el-tag",
options: options,
transformOption: (value, options, row) => {
const data = options?.find(item => item.value === value && ["张三", "李四"].includes(row.ticket));
return data;
},
},
{
label: "忽略 options",
prop: "status5",
el: "el-tag",
options: options,
isFilterOptions: false,
},
{
label: "使用已有 options",
prop: "status6",
el: "el-tag",
optionsProp: "status1",
},
];
</script>
<template>
<ProTable :columns="columns" :data="data" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
隐藏源代码
options 字典配置
如果 options 的 key 不是 label 和 value，则通过 optionField 指定 label 和 value 的字段。
如果 el 为 el-tag 或者 point-tag，则可以通过 options 指定 props 配置项，以 tagXxx 的形式传入。
vue
<script setup lang="ts">
import type { TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
const data = [
{ ticket: "张三", status1: 0, status2: 0 },
{ ticket: "李四", status1: 1, status2: 1 },
{ ticket: "王五", status1: 2, status2: 2 },
{ ticket: "赵六", status1: 3, status2: 3 },
{ ticket: "孙七", status1: 4, status2: 4 },
];
const options = [
{ optionLabel: "未解决", optionValue: 0, tagType: "info", tagEffect: "light" },
{ optionLabel: "已解决", optionValue: 1, tagType: "primary", tagEffect: "dark" },
{ optionLabel: "解决中", optionValue: 2, tagType: "success", tagEffect: "light" },
{ optionLabel: "失败", optionValue: 3, tagType: "warning", tagEffect: "plain" },
{ optionLabel: "审核中", optionValue: 4, tagType: "danger", tagEffect: "plain" },
];
const columns: TableColumn[] = [
{ prop: "ticket", label: "事件" },
{
label: "options 配置",
prop: "status1",
el: "el-tag",
options: options,
optionField: { label: "optionLabel", value: "optionValue" },
},
{
label: "options 配置",
prop: "status2",
el: "point-tag",
options: options,
optionField: { label: "optionLabel", value: "optionValue" },
},
];
</script>
<template>
<ProTable :columns="columns" :data="data" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
隐藏源代码
多选列
在 columns 中配置 type: 'selection' 添加多选列，并且通过 selection-change 监听多选事件。
vue
<script setup lang="ts">
import type { SelectState, TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
const data = [
{ username: "张三", gender: 1, progress: 20, birthday: "2023-01-01" },
{ username: "李四", gender: 2, progress: 40, birthday: "2023-02-01" },
{ username: "王五", gender: 1, progress: 60, birthday: "2023-03-01" },
];
const columns: TableColumn[] = [
{ type: "selection", fixed: "left", width: 60 },
{ prop: "username", label: "用户姓名", el: "copy" },
{
prop: "gender",
label: "性别",
el: "el-tag",
options: [
{ label: "男", value: 1, tagType: "primary" },
{ label: "女", value: 2, tagType: "warning" },
],
},
{ prop: "progress", label: "进度", el: "el-progress" },
{ prop: "birthday", label: "生日" },
];
const handleSelectionChange = (val: SelectState) => {
console.log(val);
};
</script>
<template>
<ProTable :columns="columns" :data="data" row-key="username" @selection-change="handleSelectionChange" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
隐藏源代码
单选列
在 columns 中配置 type: 'radio' 添加索引单选列，并且通过 selection-change 监听索引事件。
通过使用 selectedRadio 配置项传入 ProTable 来指定默认单选行，值为 rowKey 对应的值
vue
<script setup lang="ts">
import type { SelectState, TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
const data = [
{ username: "张三", gender: 1, progress: 20, birthday: "2023-01-01" },
{ username: "李四", gender: 2, progress: 40, birthday: "2023-02-01" },
{ username: "王五", gender: 1, progress: 60, birthday: "2023-03-01" },
];
const columns: TableColumn[] = [
{ type: "radio", fixed: "left", width: 60 },
{ prop: "username", label: "用户姓名", el: "copy" },
{
prop: "gender",
label: "性别",
el: "el-tag",
options: [
{ label: "男", value: 1, tagType: "primary" },
{ label: "女", value: 2, tagType: "warning" },
],
},
{ prop: "progress", label: "进度", el: "el-progress" },
{ prop: "birthday", label: "生日" },
];
const handleSelectionChange = (val: SelectState) => {
console.log(val);
};
</script>
<template>
<ProTable
:columns="columns"
:data="data"
row-key="username"
selectedRadio="李四"
@selection-change="handleSelectionChange"
/>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
隐藏源代码
序号列
在 columns 中配置 type: 'index' 添加序号列。
vue
<script setup lang="ts">
import type { TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
const data = [
{ username: "张三", gender: 1, progress: 20, birthday: "2023-01-01" },
{ username: "李四", gender: 2, progress: 40, birthday: "2023-02-01" },
{ username: "王五", gender: 1, progress: 60, birthday: "2023-03-01" },
];
const columns: TableColumn[] = [
{ type: "index", label: "#", width: 60 },
{ prop: "username", label: "用户姓名", el: "copy" },
{
prop: "gender",
label: "性别",
el: "el-tag",
options: [
{ label: "男", value: 1, tagType: "primary" },
{ label: "女", value: 2, tagType: "warning" },
],
},
{ prop: "progress", label: "进度", el: "el-progress" },
{ prop: "birthday", label: "生日" },
];
</script>
<template>
<ProTable :columns="columns" :data="data" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
隐藏源代码
拖拽列
在 columns 中配置 type: 'sort' 添加拖拽列。
vue
<script setup lang="ts">
import type { TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
const data = [
{ username: "张三", gender: 1, progress: 20, birthday: "2023-01-01" },
{ username: "李四", gender: 2, progress: 40, birthday: "2023-02-01" },
{ username: "王五", gender: 1, progress: 60, birthday: "2023-03-01" },
];
const columns: TableColumn[] = [
{ type: "sort", label: "拖拽", width: 60 },
{ prop: "username", label: "用户姓名", el: "copy" },
{
prop: "gender",
label: "性别",
el: "el-tag",
options: [
{ label: "男", value: 1, tagType: "primary" },
{ label: "女", value: 2, tagType: "warning" },
],
},
{ prop: "progress", label: "年龄", el: "el-progress" },
{ prop: "birthday", label: "生日" },
];
</script>
<template>
<ProTable :columns="columns" :data="data" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
隐藏源代码
展开行
在 columns 中配置 type: 'expand' 添加展开行，并搭配插槽 expand 使用。
{}
vue
<script setup lang="ts">
import type { TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
const data = [
{ username: "张三", gender: 1, progress: 20, birthday: "2023-01-01" },
{ username: "李四", gender: 2, progress: 40, birthday: "2023-02-01" },
{ username: "王五", gender: 1, progress: 60, birthday: "2023-03-01" },
];
const columns: TableColumn[] = [
{ type: "expand", label: "Expand", width: 80 },
{ prop: "username", label: "用户姓名", el: "copy" },
{
prop: "gender",
label: "性别",
el: "el-tag",
options: [
{ label: "男", value: 1, tagType: "primary" },
{ label: "女", value: 2, tagType: "warning" },
],
},
{ prop: "progress", label: "进度", el: "el-progress" },
{ prop: "birthday", label: "生日" },
];
</script>
<template>
<ProTable :columns="columns" :data="data" row-key="username">
<template #expand="scope">
{{ scope.row }}
</template>
</ProTable>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
隐藏源代码
树形结构
配置 tree-props 树形为 children: 'children'，数据结构中有 children 即可。 树形懒加载表格还需设置 lazy 和 load。
警告
数据中 children 中的 id 和表格 id 不能重复。row-key 默认为 id。
树形表格
暂无数据
树形懒加载表格
暂无数据
vue
<script lang="ts" setup>
import type { TableColumn } from "@/components/pro/table";
import { ref } from "vue";
import { ProTable } from "@/components/pro/table";
import { dayjs } from "element-plus";
const DataServe = {
getList: async () => {
const dataLazy = Array.from({ length: 3 }).map((item, index) => {
return {
id: index,
name: index + "name",
status: String(index % 3),
tag: index === 1 ? "success" : index === 2 ? "warning" : index === 3 ? "info" : "danger",
time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
hasChildren: true,
children: [],
};
});
const data = Array.from({ length: 3 }).map((item, index) => {
return {
id: index,
name: index + "name",
status: String(index % 3),
tag: index === 1 ? "success" : index === 2 ? "warning" : index === 3 ? "info" : "danger",
time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
children: Array.from({ length: 10 }).map((item, i) => ({
id: index + "" + i,
name: "小明" + i + "-" + i,
status: String(i % 3),
tag: i === 1 ? "success" : i === 2 ? "warning" : i === 3 ? "info" : "danger",
time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
})),
};
});
return {
data: data,
dataLazy: dataLazy,
};
},
};
const load = (row: Record<string, any>, treeNode: unknown, resolve: (date: Record<string, any>[]) => void) => {
setTimeout(() => {
resolve(
Array.from({ length: 10 }).map((item, i) => ({
id: 10 + i,
name: "小明" + i + "-" + i,
status: String(i % 3),
tag: i === 1 ? "success" : i === 2 ? "warning" : i === 3 ? "info" : "danger",
time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
}))
);
}, 1000);
};
const columns: TableColumn[] = [
{ label: "ID", prop: "id", width: 80 },
{ label: "名称", prop: "name" },
{
label: "状态",
prop: "status",
el: "el-tag",
options: [
{ label: "未解决", value: "0" },
{ label: "已解决", value: "1" },
{ label: "解决中", value: "2" },
{ label: "失败", value: "3" },
],
},
{
label: "标签",
prop: "tag",
el: "el-tag",
elProps: (value: string) => {
return { type: value };
},
},
{
label: "时间",
prop: "time",
valueType: "date-picker",
},
];
const tableData = ref<Record<string, any>[]>();
const tableDataLazy = ref<Record<string, any>[]>();
const getList = async () => {
const { data, dataLazy } = await DataServe.getList();
tableData.value = data;
tableDataLazy.value = dataLazy;
};
getList();
</script>
<template>
<div>
<ProTable
:columns="columns"
:data="tableData"
title="树形表格"
row-key="name"
:tree-props="{ children: 'children' }"
/>
<ProTable
:columns="columns"
:data="tableDataLazy"
title="树形懒加载表格"
lazy
:load="load"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
/>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
隐藏源代码
多级表头
通过在 columns 新增 children 配置，实现多级表头。
vue
<script setup lang="ts">
import type { TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
const data = [
{
id: "805839158256013232",
username: "江明",
gender: 2,
status: 0,
user: { detail: { age: 11 } },
idCard: "805839158256013232",
email: "i.nfhct@efxnicw.mx",
address: "黑龙江省 鸡西市",
createTime: "1982-11-04 17:35:47",
},
{
id: "824440124728046271",
username: "黄芳",
gender: 1,
user: { detail: { age: 30 } },
status: 1,
idCard: "824440124728046271",
email: "r.baxyzmgz@wfvnkqcni.tc",
createTime: "1983-07-19 21:44:22",
},
{
id: "026454951166840353",
username: "黄军",
gender: 2,
status: 1,
user: { detail: { age: 10 } },
idCard: "026454951166840353",
email: "t.xxoblmbhvd@ttbmbazuj.ee",
createTime: "1995-03-29 01:41:47",
},
];
const columns: TableColumn[] = [
{
prop: "base",
label: "基本信息",
children: [
{ prop: "username", label: "用户姓名", width: 110 },
{ prop: "user.detail.age", label: "年龄", width: 100 },
{
prop: "gender",
label: "性别",
width: 100,
options: [
{ label: "男", value: 1 },
{ label: "女", value: 2 },
],
},
{
prop: "details",
label: "详细资料",
children: [
{ prop: "idCard", label: "身份证号" },
{ prop: "email", label: "邮箱" },
],
},
],
},
{
prop: "status",
label: "用户状态",
options: [
{ label: "启用", value: 1 },
{ label: "禁用", value: 0 },
],
},
{ prop: "createTime", label: "创建时间", width: 200 },
];
</script>
<template>
<ProTable :columns="columns" :data="data" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
隐藏源代码
分页栏
通过 pageScope 开启分页栏，通过 pageInfo 配置分页信息，通过 paginationProps 配置 ElPagination 组件的 Props 属性。
pageScope 默认为前端分页，可以将 pageScope 设置为 server，并搭配 paginationChange 事件开启后端分页。
前端分页
共 6 条
- 1
- 2
页
后端分页
暂无数据
共 0 条
- 1
页
vue
<script setup lang="ts">
import type { PageInfo } from "@/components/pro/table";
import type { TableColumn } from "@/components/pro/table";
import { ref, onMounted } from "vue";
import { ProTable } from "@/components/pro/table";
const originData = ref([
{ username: "张三", gender: 1, age: 18, birthday: "2023-01-01" },
{ username: "李四", gender: 2, age: 20, birthday: "2023-02-01" },
{ username: "王五", gender: 1, age: 22, birthday: "2023-03-01" },
{ username: "赵六", gender: 1, age: 23, birthday: "2023-04-01" },
{ username: "孙七", gender: 2, age: 23, birthday: "2023-05-01" },
{ username: "周八", gender: 2, age: 24, birthday: "2023-06-01" },
]);
const columns: TableColumn[] = [
{ type: "index", label: "#", width: 60 },
{ prop: "username", label: "用户姓名", el: "copy" },
{
prop: "gender",
label: "性别",
el: "el-tag",
options: [
{ label: "男", value: 1, tagType: "primary" },
{ label: "女", value: 2, tagType: "warning" },
],
},
{ prop: "age", label: "年龄", el: "el-progress" },
{ prop: "birthday", label: "生日" },
];
// ======= 后端分页 =======
const pageData = ref<Record<string, any>[]>([]);
const pageInfo = ref<PageInfo>({ pageNum: 1, pageSize: 5 });
// 获取数据
const requestData = async (pageNum = 1, pageSize = 5) => {
const res = await mockBackend(pageNum, pageSize);
pageInfo.value = {
pageNum: res.data.pageNum,
pageSize: res.data.pageSize,
total: res.data.total,
};
pageData.value = res.data.list;
};
// 分页改变事件
const handlePaginationChange = ({ pageNum, pageSize }: PageInfo) => {
requestData(pageNum, pageSize);
};
// 模拟后端获取分页数据
const mockBackend = (pageNum: number, pageSize: number) => {
return Promise.resolve({
code: 200,
message: "success",
data: {
pageNum: pageNum,
pageSize: pageSize,
total: originData.value.length,
list: originData.value.slice((pageNum - 1) * pageSize, pageNum * pageSize),
},
});
};
onMounted(() => {
requestData();
});
</script>
<template>
<ProTable title="前端分页" :columns="columns" :data="originData" page-scope :page-info="{ pageSize: 5 }" />
<ProTable
title="后端分页"
:columns="columns"
:data="pageData"
page-scope="server"
:page-info="pageInfo"
@paginationChange="handlePaginationChange"
/>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
隐藏源代码
插槽自定义 icon
Teek 提供了一些 icon 插槽来自定义图标：
operation-more-icon： 操作栏更多旁边的icondrag-sort-icon： 表格拖拽行icontooltip-icon：表格表头 tooltipiconrefresh-icon：表格顶部刷新按钮iconsize-icon：表格顶部密度按钮iconexport-icon：表格顶部导出按钮iconcolumn-setting-icon：表格顶部列配置iconbase-setting-icon：表格顶部基础设置icon
vue
<script setup lang="ts">
import type { TableColumn } from "@/components/pro/table";
import { ArrowRightBold, Warning, RefreshLeft, Orange, Bottom, Tools, Grid } from "@element-plus/icons-vue";
import { ProTable } from "@/components/pro/table";
const data = [
{ username: "张三", gender: 1, progress: 20, birthday: "2023-01-01" },
{ username: "李四", gender: 2, progress: 40, birthday: "2023-02-01" },
{ username: "王五", gender: 1, progress: 60, birthday: "2023-03-01" },
];
const columns: TableColumn[] = [
{ type: "sort", label: "拖拽", width: 60 },
{ prop: "username", label: "用户姓名", el: "copy" },
{
prop: "gender",
label: "性别",
el: "el-tag",
elProps: (value: number) => {
if (value === 1) return { type: "success" };
return { type: "danger" };
},
options: () => {
return [
{ label: "男", value: 1 },
{ label: "女", value: 2 },
];
},
},
{
prop: "progress",
label: "进度",
el: "el-progress",
tooltip: "学习进度",
elSlots: {
default: ({ value }) => value + "%",
},
},
{ prop: "birthday", label: "生日" },
];
</script>
<template>
<ProTable :columns="columns" :data="data">
<template #operation-more-icon>
<el-icon><ArrowRightBold /></el-icon>
</template>
<template #drag-sort-icon>☷</template>
<template #tooltip-icon>
<el-icon><Warning /></el-icon>
</template>
<template #refresh-icon>
<el-icon><RefreshLeft /></el-icon>
</template>
<template #size-icon>
<el-icon><Orange /></el-icon>
</template>
<template #export-icon>
<el-icon><Bottom /></el-icon>
</template>
<template #column-setting-icon>
<el-icon><Tools /></el-icon>
</template>
<template #base-setting-icon>
<el-icon><Grid /></el-icon>
</template>
</ProTable>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
隐藏源代码