表格操作
操作栏可以对表格的每一行进行增删改查等操作。
操作栏开启（column 配置项）
通过在单个 column 中配置 prop: operation 配置项，并搭配 buttons 开启操作栏。
提示
如果您希望自定义 prop 为其他值，请给 ProTable 传入 operationProp 配置项指定操作栏的 prop 值，默认为 operation。
操作按钮类型
更多
vue
<script setup lang="ts">
import type { ButtonEl, TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
import { DocumentCopy, Delete, View, Edit } from "@element-plus/icons-vue";
import { computed, ref } from "vue";
const buttonType = ref<ButtonEl>("el-button");
const data = [
{ username: "张三", status: 0 },
{ username: "李四", status: 1 },
{ username: "王五", status: 2 },
{ username: "孙六", status: 3 },
];
const columns: TableColumn[] = [
{ prop: "username", label: "用户姓名", el: "copy" },
{
prop: "status",
label: "状态",
el: "el-tag",
options: [
{ label: "未解决", value: "0", tagType: "info" },
{ label: "已解决", value: "1", tagType: "primary" },
{ label: "解决中", value: "2", tagType: "warning" },
{ label: "失败", value: "3", tagType: "danger" },
],
},
{
prop: "operation",
label: "操作",
el: buttonType, // 可选的值：el-button, el-link, el-icon
width: () => (buttonType.value === "el-button" ? 260 : buttonType.value === "el-icon" ? 160 : 200),
buttons: [
{
text: row => (row.status === 1 ? "开启" : "关闭"),
code: "status",
icon: View,
elProps: {
type: "primary",
},
},
{
text: "查看",
code: "view",
elProps: row => ({
type: "info",
disabled: row.status === 1,
}),
show: row => row.status === 1,
icon: View,
},
{
text: "修改",
elProps: row => ({
type: "primary",
disabled: row.status === 1,
}),
show: computed(() => true),
icon: Edit,
},
{
text: "删除",
code: "delete",
elProps: computed(() => ({ type: "danger" })),
confirm: {
props: { options: { draggable: true } },
},
icon: Delete,
},
{
text: "复制",
code: "copy",
elProps: {
type: "success",
},
icon: DocumentCopy,
},
],
},
];
</script>
<template>
<el-row>
<el-text style="margin-right: 10px">操作按钮类型</el-text>
<el-radio-group v-model="buttonType">
<el-radio value="el-link">el-link</el-radio>
<el-radio value="el-icon">el-icon</el-radio>
<el-radio value="el-button">el-button</el-radio>
</el-radio-group>
</el-row>
<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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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
隐藏源代码
操作栏开启（独立配置项）
除了上方在单个 column 传入操作栏的配置项之外，也可以直接往 ProTable 传入 optionsProp 配置项，该配置项内容和 column 中配置项一致。
操作按钮类型
更多
vue
<script setup lang="ts">
import type { ButtonEl, OperationNamespace, TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
import { DocumentCopy, Delete, View, Edit } from "@element-plus/icons-vue";
import { computed, ref } from "vue";
const buttonType = ref<ButtonEl>("el-button");
const data = [
{ username: "张三", status: 0 },
{ username: "李四", status: 1 },
{ username: "王五", status: 2 },
{ username: "孙六", status: 3 },
];
const columns: TableColumn[] = [
{ prop: "username", label: "用户姓名", el: "copy" },
{
prop: "status",
label: "状态",
el: "el-tag",
options: [
{ label: "未解决", value: "0", tagType: "info" },
{ label: "已解决", value: "1", tagType: "primary" },
{ label: "解决中", value: "2", tagType: "warning" },
{ label: "失败", value: "3", tagType: "danger" },
],
},
];
const operationProps: OperationNamespace.Props = {
label: "操作",
el: buttonType, // 可选的值：el-button, el-link, el-icon
width: () => (buttonType.value === "el-button" ? 260 : buttonType.value === "el-icon" ? 160 : 200),
buttons: [
{
text: row => (row.status === 1 ? "开启" : "关闭"),
code: "status",
icon: View,
elProps: {
type: "primary",
},
},
{
text: "查看",
code: "view",
elProps: row => ({
type: "info",
disabled: row.status === 1,
}),
show: row => row.status === 1,
icon: View,
},
{
text: "修改",
elProps: row => ({
type: "primary",
disabled: row.status === 1,
}),
show: computed(() => true),
icon: Edit,
},
{
text: "删除",
code: "delete",
elProps: computed(() => ({ type: "danger" })),
confirm: {
props: { options: { draggable: true } },
},
icon: Delete,
},
{
text: "复制",
code: "copy",
elProps: {
type: "success",
},
icon: DocumentCopy,
},
],
};
</script>
<template>
<el-row>
<el-text style="margin-right: 10px">操作按钮类型</el-text>
<el-radio-group v-model="buttonType">
<el-radio value="el-link">el-link</el-radio>
<el-radio value="el-icon">el-icon</el-radio>
<el-radio value="el-button">el-button</el-radio>
</el-radio-group>
</el-row>
<ProTable :columns="columns" :data="data" :operation-props />
</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
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
隐藏源代码
操作栏事件
操作栏事件有两大类：
- 按钮级：每个按钮单独设置事件
- 表格级：事件直接绑定到
ProTable上，任意按钮均会触发事件
按钮级事件如下：
onClick：点击按钮时触发onConfirm：操作需要二次确认时，点击确认时触发onCancel：操作需要二次确认时，点击取消时触发
表格级事件如下：
buttonClick：点击按钮时触发buttonConfirm：操作需要二次确认时，点击确认时触发buttonCancel：操作需要二次确认时，点击取消时触发
提示
onClick 可以和 buttonClick 同时触发。
vue
<script setup lang="ts">
import type { OperationNamespace, TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
import { Delete, Edit } from "@element-plus/icons-vue";
import { computed } from "vue";
const data = [
{ username: "张三", status: 0 },
{ username: "李四", status: 1 },
{ username: "王五", status: 2 },
{ username: "孙六", status: 3 },
];
const columns: TableColumn[] = [
{ prop: "username", label: "用户姓名", el: "copy" },
{
prop: "status",
label: "状态",
el: "el-tag",
options: [
{ label: "未解决", value: "0", tagType: "info" },
{ label: "已解决", value: "1", tagType: "primary" },
{ label: "解决中", value: "2", tagType: "warning" },
{ label: "失败", value: "3", tagType: "danger" },
],
},
{
prop: "operation",
label: "操作",
width: 100,
buttons: [
{
text: "修改",
elProps: row => ({
type: "primary",
disabled: row.status === 1,
}),
show: computed(() => true),
icon: Edit,
onClick: params => {
params.row._editable = !params.row._editable;
},
},
{
text: "删除",
code: "delete",
elProps: computed(() => ({ type: "danger" })),
confirm: {
props: { options: { draggable: true } },
},
icon: Delete,
onClick: params => {
console.log(params, "onClick");
},
onConfirm: params => {
console.log(params, "onConfirm");
},
// 也支持函数式风格
onCancel(params) {
console.log(params, "onCancel");
},
},
],
},
];
const handleButtonClick = (params: OperationNamespace.ButtonsCallBackParams) => {
console.log(params, "handleButtonClick");
};
const handleButtonConfirm = (params: OperationNamespace.ButtonsCallBackParams) => {
console.log(params, "handleButtonConfirm");
};
const handleButtonCancel = (params: OperationNamespace.ButtonsCallBackParams) => {
console.log(params, "handleButtonCancel");
};
</script>
<template>
<ProTable
:columns="columns"
:data="data"
@button-click="handleButtonClick"
@button-confirm="handleButtonConfirm"
@button-cancel="handleButtonCancel"
/>
</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
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
隐藏源代码
操作栏按钮类型
传入 el 可以设置按钮类型，支持传入响应式变量，当前有如下类型：
el-link | ElLink：链接按钮el-button | ElButton：普通按钮el-icon | ElIcon：图标按钮
传入 confirm: true 或 confirm.el: xx 可以开启二次确认弹框功能，其中 confirm.el: xx 支持传入响应式变量，它有如下类型：
el-popconfirm | ElPopconfirm：气泡确认框el-messageBox | ElMessageBox：消息弹出框
当 confirm 为 true 时，默认开启消息弹出框（el-messageBox）。
提示
上面给出的 el-link | ElLink，代表传入 el-link 和 ElLink 效果一样。
操作栏按钮类型配置项既支持全局配置，也支持按钮级配置，其中按钮级配置优先级高于全局配置。
vue
<script setup lang="ts">
import type { ButtonEl, ConformEl, OperationNamespace, TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
import { Delete, Operation, View, WarnTriangleFilled } from "@element-plus/icons-vue";
import { computed, ref } from "vue";
const confirmType = ref<ConformEl>("el-popconfirm");
const buttonType = ref<ButtonEl>("el-link");
const data = [
{ username: "张三", status: 0 },
{ username: "李四", status: 1 },
{ username: "王五", status: 2 },
{ username: "孙六", status: 3 },
];
const columns: TableColumn[] = [
{ prop: "username", label: "用户姓名", el: "copy" },
{
prop: "status",
label: "状态",
el: "el-tag",
options: [
{ label: "未解决", value: "0", tagType: "info" },
{ label: "已解决", value: "1", tagType: "primary" },
{ label: "解决中", value: "2", tagType: "warning" },
{ label: "失败", value: "3", tagType: "danger" },
],
},
];
const operationProps: OperationNamespace.Props = {
label: "操作",
el: buttonType, // 可选的值：el-button, el-link, el-icon
confirm: {
el: confirmType,
},
width: () => (buttonType.value === "el-button" ? 260 : buttonType.value === "el-icon" ? 160 : 200),
buttons: [
{
text: "按钮级配置",
code: "view",
elProps: row => ({
type: "info",
disabled: row.status === 1,
}),
// 按钮级别的配置优先级高于全局配置
el: "el-button",
confirm: {
el: "ElPopconfirm",
},
icon: View,
},
{
text: "打开",
code: "open",
elProps: () => ({
type: "warning",
}),
icon: Operation,
confirm: {
props: {
width: 150,
icon: WarnTriangleFilled,
iconColor: "red",
message: data => `确定打开 username 为 ${data.row.username} 的数据吗？`,
title: data => `确定打开 username 为 ${data.row.username} 的数据吗？`,
},
},
},
{
text: "删除",
code: "delete",
elProps: computed(() => ({ type: "danger" })),
confirm: {
props: {
width: 200,
icon: WarnTriangleFilled,
iconColor: "red",
message: data => `确定删除 username 为 ${data.row.username} 且行数为 ${data.rowIndex} 的数据吗？`,
title: data => `确定删除 username 为 ${data.row.username} 且行数为 ${data.rowIndex} 的数据吗？`,
},
},
icon: Delete,
},
],
};
</script>
<template>
<el-row>
<el-text style="margin-right: 10px">操作按钮二次确认类型</el-text>
<el-radio-group v-model="confirmType">
<el-radio value="el-popconfirm">el-popconfirm</el-radio>
<el-radio value="el-messageBox">el-messageBox</el-radio>
</el-radio-group>
</el-row>
<el-row>
<el-text style="margin-right: 10px">操作按钮类型</el-text>
<el-radio-group v-model="buttonType">
<el-radio value="el-link">el-link</el-radio>
<el-radio value="el-icon">el-icon</el-radio>
<el-radio value="el-button">el-button</el-radio>
</el-radio-group>
</el-row>
<ProTable :columns="columns" :data="data" :operation-props />
</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
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
隐藏源代码
操作栏显示的按钮数量
通过传入 showNumber 配置项，控制操作栏显示的按钮数量。
showNumber 支持数字和函数，当为函数时，参数为当前行 row 和 index，返回一个 number 值，表示允许显示的按钮数量。
vue
<script setup lang="ts">
import type { OperationNamespace, TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
import { DocumentCopy, Delete, View, Edit } from "@element-plus/icons-vue";
import { computed } from "vue";
const data = [
{ username: "张三", status: 0 },
{ username: "李四", status: 1 },
{ username: "王五", status: 2 },
{ username: "孙六", status: 3 },
];
const columns: TableColumn[] = [
{ prop: "username", label: "用户姓名", el: "copy" },
{
prop: "status",
label: "状态",
el: "el-tag",
options: [
{ label: "未解决", value: "0", tagType: "info" },
{ label: "已解决", value: "1", tagType: "primary" },
{ label: "解决中", value: "2", tagType: "warning" },
{ label: "失败", value: "3", tagType: "danger" },
],
},
];
const operationProps: OperationNamespace.Props = {
label: "操作",
width: 200,
showNumber: row => (row.status === 1 ? 2 : 3),
buttons: [
{
text: row => (row.status === 1 ? "开启" : "关闭"),
code: "status",
icon: View,
elProps: {
type: "primary",
},
},
{
text: "查看",
code: "view",
elProps: row => ({
type: "info",
disabled: row.status === 1,
}),
icon: View,
},
{
text: "修改",
elProps: row => ({
type: "primary",
disabled: row.status === 1,
}),
icon: Edit,
},
{
text: "删除",
code: "delete",
elProps: computed(() => ({ type: "danger" })),
confirm: {
props: { options: { draggable: true } },
},
icon: Delete,
},
{
text: "复制",
code: "copy",
elProps: {
type: "success",
},
icon: DocumentCopy,
},
],
};
</script>
<template>
<ProTable :columns="columns" :data="data" :operation-props />
</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
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
隐藏源代码
操作栏权限控制
通过在按钮上配置 show 属性来控制按钮的显示。
show 支持数字、函数、响应式（Ref、Computed），当为函数时，参数为当前行 row 和 index，返回一个 boolean 值，表示是否显示该按钮。
vue
<script setup lang="ts">
import type { ButtonEl, OperationNamespace, TableColumn } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
import { DocumentCopy, Delete, View, Edit } from "@element-plus/icons-vue";
import { computed, ref } from "vue";
const permissionList = ["sys.view", "sys.edit", "sys.copy"];
const data = [
{ username: "张三", status: 0 },
{ username: "李四", status: 1 },
{ username: "王五", status: 2 },
{ username: "孙六", status: 3 },
];
const columns: TableColumn[] = [
{ prop: "username", label: "用户姓名", el: "copy" },
{
prop: "status",
label: "状态",
el: "el-tag",
options: [
{ label: "未解决", value: "0", tagType: "info" },
{ label: "已解决", value: "1", tagType: "primary" },
{ label: "解决中", value: "2", tagType: "warning" },
{ label: "失败", value: "3", tagType: "danger" },
],
},
];
const operationProps: OperationNamespace.Props = {
label: "操作",
width: 150,
buttons: [
{
text: "查看",
code: "view",
elProps: row => ({
type: "info",
disabled: row.status === 1,
}),
show: () => permissionList.includes("sys.view"), // 权限控制
icon: View,
},
{
text: "修改",
elProps: row => ({
type: "primary",
disabled: row.status === 1,
}),
show: computed(() => permissionList.includes("sys.edit")), // 支持 computed
icon: Edit,
},
{
text: "删除",
code: "delete",
elProps: computed(() => ({ type: "danger" })),
show: row => permissionList.includes("sys.delete") || row.status === 1,
confirm: {
props: { options: { draggable: true } },
},
icon: Delete,
},
],
};
</script>
<template>
<ProTable :columns="columns" :data="data" :operation-props />
</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
隐藏源代码