ProFormSteps 步骤表单
ProFormSteps 步骤表单组件是在 ProForm 超级表单 和 ElSteps 步骤条、ElStep 步骤条项 的基础上进行拓展，因此完全兼容这些组件的所有 Props 配置、Emit 事件、Slots 插槽。
步骤条超级表单组件通过表单来引导用户按照流程完成任务，可根据实际应用场景设定步骤，步骤不得少于 2 步
基础用法
设置 active 属性，接受一个 Number，表明步骤的 index，从 0 开始。
需要定宽的步骤条时，设置 space 属性即可，它接受 Number，单位为 px， 如果不设置，则为自适应。
设置 finish-status 属性可以改变已经完成的步骤的状态。
表单数据请传入 columns 属性。
0
第一步
0
第二步
0
第三步
vue
<script lang="ts" setup>
import type { FormStepColumn } from "@/components/pro/form-steps";
import { ref } from "vue";
import { ProFormSteps } from "@/components/pro/form-steps";
const active = ref(1);
const stepForm = ref<FormStepColumn[]>([
{
title: "第一步",
form: {
modelValue: {},
columns: [
{ label: "名称", prop: "name", tooltip: "名称最多显示6个字符" },
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "未解决", value: "0" },
{ label: "已解决", value: "1" },
{ label: "解决中", value: "2" },
{ label: "失败", value: "3" },
],
},
],
elFormProps: {
rules: {
name: [{ required: true, message: "请输入名称" }],
},
},
},
},
{
title: "第二步",
form: {
modelValue: {},
columns: [
{ label: "标签", prop: "tag" },
{ label: "执行进度", prop: "progress" },
{ label: "评分", width: 200, prop: "rate", el: "el-rate" },
{ label: "是否显示", width: 100, prop: "switch", el: "el-switch" },
],
elFormProps: {
labelWidth: "100",
rules: {
tag: [{ required: true, message: "请输入标签" }],
progress: [{ required: true, message: "请输入执行进度" }],
},
},
},
},
{
title: "第三步",
form: {
modelValue: {},
columns: [
{ label: "时间", prop: "time", el: "el-date-picker" },
{
label: "要求",
prop: "demand",
el: "el-checkbox",
options: [
{ label: "四六级", value: "0" },
{ label: "计算机二级证书", value: "1" },
{ label: "普通话证书", value: "2" },
],
},
{ label: "奖励", prop: "price" },
{ label: "提成", prop: "percentage" },
{
label: "说明",
prop: "desc",
el: "el-input",
elProps: {
type: "textarea",
maxlength: 10,
showWordLimit: true,
autosize: { minRows: 2, maxRows: 4 },
},
},
],
elFormProps: {
rules: {
time: [{ required: true, trigger: "change", message: "请选择时间" }],
demand: [{ required: true, trigger: "change", message: "请选择要求" }],
},
},
},
},
]);
const next = (actives: number, currentModel: Record<string, any>, allModel: Record<string, any>) => {
active.value = actives;
console.log(actives, currentModel, allModel, stepForm.value);
};
</script>
<template>
<ProFormSteps v-model="active" :columns="stepForm" @next="next" />
</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
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
隐藏源代码
带图标的分步表单
第一步
第二步
第三步
vue
<script lang="ts" setup>
import type { FormStepColumn } from "@/components/pro/form-steps";
import { ref } from "vue";
import { Edit, Picture, Upload } from "@element-plus/icons-vue";
import { ProFormSteps } from "@/components/pro/form-steps";
const active = ref(1);
const stepForm = ref<FormStepColumn[]>([
{
title: "第一步",
icon: Edit,
form: {
modelValue: {},
columns: [
{ label: "名称", prop: "name", tooltip: "名称最多显示6个字符" },
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "未解决", value: "0" },
{ label: "已解决", value: "1" },
{ label: "解决中", value: "2" },
{ label: "失败", value: "3" },
],
},
],
elFormProps: {
rules: {
name: [{ required: true, message: "请输入名称" }],
},
},
},
},
{
title: "第二步",
icon: Upload,
form: {
modelValue: {},
columns: [
{ label: "标签", prop: "tag" },
{ label: "执行进度", prop: "progress" },
{ label: "评分", width: 200, prop: "rate", el: "el-rate" },
{ label: "是否显示", width: 100, prop: "switch", el: "el-switch" },
],
elFormProps: {
labelWidth: "100",
rules: {
tag: [{ required: true, message: "请输入标签" }],
progress: [{ required: true, message: "请输入执行进度" }],
},
},
},
},
{
title: "第三步",
icon: Picture,
form: {
modelValue: {},
columns: [
{ label: "时间", prop: "time", el: "el-date-picker" },
{
label: "要求",
prop: "demand",
el: "el-checkbox",
options: [
{ label: "四六级", value: "0" },
{ label: "计算机二级证书", value: "1" },
{ label: "普通话证书", value: "2" },
],
},
{ label: "奖励", prop: "price" },
{ label: "提成", prop: "percentage" },
{
label: "说明",
prop: "desc",
el: "el-input",
elProps: {
type: "textarea",
maxlength: 10,
showWordLimit: true,
autosize: { minRows: 2, maxRows: 4 },
},
},
],
elFormProps: {
rules: {
time: [{ required: true, trigger: "change", message: "请选择时间" }],
demand: [{ required: true, trigger: "change", message: "请选择要求" }],
},
},
},
},
]);
const next = (actives: number, currentModel: Record<string, any>, allModel: Record<string, any>) => {
active.value = actives;
console.log(actives, currentModel, allModel, stepForm.value);
};
</script>
<template>
<ProFormSteps v-model="active" :columns="stepForm" @next="next" />
</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
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
隐藏源代码
垂直的分步表单
垂直方向的步骤条。
只需要在设置 direction 属性为 vertical 即可。
0
第一步
0
第二步
0
第三步
vue
<script lang="ts" setup>
import type { FormStepColumn } from "@/components/pro/form-steps";
import { ref } from "vue";
import { ProFormSteps } from "@/components/pro/form-steps";
const active = ref(1);
const stepForm = ref<FormStepColumn[]>([
{
title: "第一步",
form: {
modelValue: {},
columns: [
{ label: "名称", prop: "name", tooltip: "名称最多显示6个字符" },
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "未解决", value: "0" },
{ label: "已解决", value: "1" },
{ label: "解决中", value: "2" },
{ label: "失败", value: "3" },
],
},
],
elFormProps: {
rules: {
name: [{ required: true, message: "请输入名称" }],
},
},
},
},
{
title: "第二步",
form: {
modelValue: {},
columns: [
{ label: "标签", prop: "tag" },
{ label: "执行进度", prop: "progress" },
{ label: "评分", width: 200, prop: "rate", el: "el-rate" },
{ label: "是否显示", width: 100, prop: "switch", el: "el-switch" },
],
elFormProps: {
labelWidth: "100",
rules: {
tag: [{ required: true, message: "请输入标签" }],
progress: [{ required: true, message: "请输入执行进度" }],
},
},
},
},
{
title: "第三步",
form: {
modelValue: {},
columns: [
{ label: "时间", prop: "time", el: "el-date-picker" },
{
label: "要求",
prop: "demand",
el: "el-checkbox",
options: [
{ label: "四六级", value: "0" },
{ label: "计算机二级证书", value: "1" },
{ label: "普通话证书", value: "2" },
],
},
{ label: "奖励", prop: "price" },
{ label: "提成", prop: "percentage" },
{
label: "说明",
prop: "desc",
el: "el-input",
elProps: {
type: "textarea",
maxlength: 10,
showWordLimit: true,
autosize: { minRows: 2, maxRows: 4 },
},
},
],
elFormProps: {
rules: {
time: [{ required: true, trigger: "change", message: "请选择时间" }],
demand: [{ required: true, trigger: "change", message: "请选择要求" }],
},
},
},
},
]);
const next = (actives: number, currentModel: Record<string, any>, allModel: Record<string, any>) => {
active.value = actives;
console.log(actives, currentModel, allModel, stepForm.value);
};
</script>
<template>
<ProFormSteps v-model="active" :columns="stepForm" @next="next" :space="100" direction="vertical" />
</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
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
隐藏源代码
简洁风格的分步表单
设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。
第一步
第二步
第三步
vue
<script lang="ts" setup>
import type { FormStepColumn } from "@/components/pro/form-steps";
import { ref } from "vue";
import { Edit, Picture, Upload } from "@element-plus/icons-vue";
import { ProFormSteps } from "@/components/pro/form-steps";
const active = ref(1);
const stepForm = ref<FormStepColumn[]>([
{
title: "第一步",
icon: Edit,
form: {
modelValue: {},
columns: [
{ label: "名称", prop: "name", tooltip: "名称最多显示6个字符" },
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "未解决", value: "0" },
{ label: "已解决", value: "1" },
{ label: "解决中", value: "2" },
{ label: "失败", value: "3" },
],
},
],
elFormProps: {
rules: {
name: [{ required: true, message: "请输入名称" }],
},
},
},
},
{
title: "第二步",
icon: Upload,
form: {
modelValue: {},
columns: [
{ label: "标签", prop: "tag" },
{ label: "执行进度", prop: "progress" },
{ label: "评分", width: 200, prop: "rate", el: "el-rate" },
{ label: "是否显示", width: 100, prop: "switch", el: "el-switch" },
],
elFormProps: {
labelWidth: "100",
rules: {
tag: [{ required: true, message: "请输入标签" }],
progress: [{ required: true, message: "请输入执行进度" }],
},
},
},
},
{
title: "第三步",
icon: Picture,
form: {
modelValue: {},
columns: [
{ label: "时间", prop: "time", el: "el-date-picker" },
{
label: "要求",
prop: "demand",
el: "el-checkbox",
options: [
{ label: "四六级", value: "0" },
{ label: "计算机二级证书", value: "1" },
{ label: "普通话证书", value: "2" },
],
},
{ label: "奖励", prop: "price" },
{ label: "提成", prop: "percentage" },
{
label: "说明",
prop: "desc",
el: "el-input",
elProps: {
type: "textarea",
maxlength: 10,
showWordLimit: true,
autosize: { minRows: 2, maxRows: 4 },
},
},
],
elFormProps: {
rules: {
time: [{ required: true, trigger: "change", message: "请选择时间" }],
demand: [{ required: true, trigger: "change", message: "请选择要求" }],
},
},
},
},
]);
const next = (actives: number, currentModel: Record<string, any>, allModel: Record<string, any>) => {
active.value = actives;
console.log(actives, currentModel, allModel, stepForm.value);
};
</script>
<template>
<ProFormSteps v-model="active" :columns="stepForm" @next="next" simple />
</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
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
隐藏源代码
插槽渲染分步表单头部
通过 el-steps 自带的插槽可以自定义图标、标题、描述文案。
0
第一步 插槽渲染
这是第一步的描述内容 插槽渲染
0
第二步 插槽渲染
这是第二步的描述内容 插槽渲染
0
第三步 插槽渲染
这是第三步的描述内容 插槽渲染
vue
<script lang="ts" setup>
import type { FormStepColumn } from "@/components/pro/form-steps";
import { ref } from "vue";
import { ProFormSteps } from "@/components/pro/form-steps";
const active = ref(1);
const stepForm = ref<FormStepColumn[]>([
{
title: "第一步",
description: "这是第一步的描述内容",
form: {
modelValue: {},
columns: [
{ label: "名称", prop: "name", tooltip: "名称最多显示6个字符" },
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "未解决", value: "0" },
{ label: "已解决", value: "1" },
{ label: "解决中", value: "2" },
{ label: "失败", value: "3" },
],
},
],
elFormProps: {
rules: {
name: [{ required: true, message: "请输入名称" }],
},
},
},
},
{
title: "第二步",
description: "这是第二步的描述内容",
form: {
modelValue: {},
columns: [
{ label: "标签", prop: "tag" },
{ label: "执行进度", prop: "progress" },
{ label: "评分", width: 200, prop: "rate", el: "el-rate" },
{ label: "是否显示", width: 100, prop: "switch", el: "el-switch" },
],
elFormProps: {
labelWidth: "100",
rules: {
tag: [{ required: true, message: "请输入标签" }],
progress: [{ required: true, message: "请输入执行进度" }],
},
},
},
},
{
title: "第三步",
description: "这是第三步的描述内容",
form: {
modelValue: {},
columns: [
{ label: "时间", prop: "time", el: "el-date-picker" },
{
label: "要求",
prop: "demand",
el: "el-checkbox",
options: [
{ label: "四六级", value: "0" },
{ label: "计算机二级证书", value: "1" },
{ label: "普通话证书", value: "2" },
],
},
{ label: "奖励", prop: "price" },
{ label: "提成", prop: "percentage" },
{
label: "说明",
prop: "desc",
el: "el-input",
elProps: {
type: "textarea",
maxlength: 10,
showWordLimit: true,
autosize: { minRows: 2, maxRows: 4 },
},
},
],
elFormProps: {
rules: {
time: [{ required: true, trigger: "change", message: "请选择时间" }],
demand: [{ required: true, trigger: "change", message: "请选择要求" }],
},
},
},
},
]);
const next = (actives: number, currentModel: Record<string, any>, allModel: Record<string, any>) => {
active.value = actives;
console.log(actives, currentModel, allModel, stepForm.value);
};
</script>
<template>
<ProFormSteps v-model="active" :columns="stepForm" @next="next">
<template #title="{ title }">{{ title }} 插槽渲染</template>
<template #description="{ description }">{{ description }} 插槽渲染</template>
</ProFormSteps>
</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
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
隐藏源代码
插槽渲染步骤条表单每一步内容
每一步内容的插槽为 step-${index}，index 表示步骤数，从 1 开始。
0
第一步
0
第二步
0
第三步
vue
<script lang="ts" setup>
import type { FormStepColumn } from "@/components/pro/form-steps";
import { ref } from "vue";
import { ProFormSteps } from "@/components/pro/form-steps";
const active = ref(1);
const stepForm = ref<FormStepColumn[]>([
{
title: "第一步",
form: {
modelValue: {},
columns: [
{ label: "名称", prop: "name", tooltip: "名称最多显示6个字符" },
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "未解决", value: "0" },
{ label: "已解决", value: "1" },
{ label: "解决中", value: "2" },
{ label: "失败", value: "3" },
],
},
],
elFormProps: {
rules: {
name: [{ required: true, message: "请输入名称" }],
},
},
},
},
{
title: "第二步",
form: {
modelValue: {},
columns: [
{ label: "标签", prop: "tag" },
{ label: "执行进度", prop: "progress" },
{ label: "评分", width: 200, prop: "rate", el: "el-rate" },
{ label: "是否显示", width: 100, prop: "switch", el: "el-switch" },
],
elFormProps: {
labelWidth: "100",
rules: {
tag: [{ required: true, message: "请输入标签" }],
progress: [{ required: true, message: "请输入执行进度" }],
},
},
},
},
{
title: "第三步",
form: {
modelValue: {},
columns: [
{ label: "时间", prop: "time", el: "el-date-picker" },
{
label: "要求",
prop: "demand",
el: "el-checkbox",
options: [
{ label: "四六级", value: "0" },
{ label: "计算机二级证书", value: "1" },
{ label: "普通话证书", value: "2" },
],
},
{ label: "奖励", prop: "price" },
{ label: "提成", prop: "percentage" },
{
label: "说明",
prop: "desc",
el: "el-input",
elProps: {
type: "textarea",
maxlength: 10,
showWordLimit: true,
autosize: { minRows: 2, maxRows: 4 },
},
},
],
elFormProps: {
rules: {
time: [{ required: true, trigger: "change", message: "请选择时间" }],
demand: [{ required: true, trigger: "change", message: "请选择要求" }],
},
},
},
},
]);
const next = (actives: number, currentModel: Record<string, any>, allModel: Record<string, any>) => {
active.value = actives;
console.log(actives, currentModel, allModel, stepForm.value);
};
</script>
<template>
<ProFormSteps v-model="active" :columns="stepForm" @next="next" :space="100" direction="vertical">
<template #step-1>
<h3>自定义第一步内容</h3>
</template>
</ProFormSteps>
</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
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
隐藏源代码
Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 当前步骤数 | object | 1 |
| columns | 步骤表单配置信息 | array FormStepColumn[] | [] |
| submitText | 下一步按钮文字 | string | 下一步 |
| preText | 上一步按钮文字 | string | 上一步 |
FormStepColumn 配置项
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | ElSteps 的 title | string | |
| description | ElSteps 的 description | string | |
| icon | ElSteps 的 icon | object | |
| status | ElSteps 的 status | object | |
| form | ProForm 的 Props | array ProForm |
Event
| 名称 | 说明 | 类型 |
|---|---|---|
| pre | 上一步按钮点击事件 | function |
| next | 下一步按钮点击事件 | function |
| submit | 提交按钮点击事件 | function |
| change | 表单值改变事件 | function |
Slots
| 插槽名 | 说明 | 作用域插槽参数 |
|---|---|---|
| icon | 自定义图标 | |
| title | 自定义标题 | |
| description | 自定义描述文案 | |
| step-'active' | 每一步内容的插槽，active 表示的是当前所在的步骤数，从 1 开始 | FormStepColumn |
| ... | 其他扩展属性，支持所有 ProForm Slots | ... |
Exposes
| 名称 | 说明 | 类型 |
|---|---|---|
| proFormInstance | ProForm 实例 | object |
| pre | 上一步按钮点击事件 | function |
| next | 下一步按钮点击事件 | function |