StepsForm 分步表单
StepsForm 组件是 ElSteps,ElStep和 PlusForm 组件的组合，支持 PlusForm 组件的所有自定义函数和插槽， 它的主要用途是引导用户按照流程完成任务的分步导航条， 可根据实际应用场景设定步骤，步骤不得少于 2 步。
基础用法
设置 active 属性，接受一个 Number，表明步骤，从 1 开始。data 是分步表单所需的数据。
第一步
2
第二步
3
第三步
<template>
<PlusStepsForm v-model="active" :data="stepForm" @next="next" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const stepForm = ref([
{
title: '第一步',
form: {
modelValue: {},
columns: [
{
label: '名称',
width: 120,
prop: 'name',
valueType: 'copy',
tooltip: '名称最多显示6个字符'
},
{
label: '状态',
width: 120,
prop: 'status',
valueType: 'select',
options: [
{
label: '未解决',
value: '0',
color: 'red'
},
{
label: '已解决',
value: '1',
color: 'blue'
},
{
label: '解决中',
value: '2',
color: 'yellow'
},
{
label: '失败',
value: '3',
color: 'red'
}
]
}
],
rules: {
name: [
{
required: true,
message: '请输入名称'
}
]
}
}
},
{
title: '第二步',
form: {
labelWidth: '100',
modelValue: {},
columns: [
{
label: '标签',
width: 120,
prop: 'tag'
},
{
label: '执行进度',
width: 200,
prop: 'progress'
},
{
label: '评分',
width: 200,
prop: 'rate',
valueType: 'rate'
},
{
label: '是否显示',
width: 100,
prop: 'switch',
valueType: 'switch'
}
],
rules: {
tag: [
{
required: true,
message: '请输入标签'
}
],
progress: [
{
required: true,
message: '请输入执行进度'
}
]
}
}
},
{
title: '第三步',
form: {
modelValue: {},
columns: [
{
label: '时间',
prop: 'time',
valueType: 'date-picker'
},
{
label: '要求',
prop: 'demand',
valueType: 'checkbox',
options: [
{
label: '四六级',
value: '0'
},
{
label: '计算机二级证书',
value: '1'
},
{
label: '普通话证书',
value: '2'
}
]
},
{
label: '奖励',
prop: 'price'
},
{
label: '提成',
prop: 'percentage'
},
{
label: '说明',
prop: 'desc',
valueType: 'textarea',
fieldProps: {
maxlength: 10,
showWordLimit: true,
autosize: { minRows: 2, maxRows: 4 }
}
}
],
rules: {
time: [
{
required: true,
trigger: 'change',
message: '请选择时间'
}
],
demand: [
{
required: true,
trigger: 'change',
message: '请选择要求'
}
]
}
}
}
])
const active = ref(1)
const next = (actives: number, values: any) => {
active.value = actives
console.log(active, values, stepForm.value)
}
</script>
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
垂直的分步表单
垂直方向的分步表单。
只需要设置 direction 属性为 vertical 即可。
第一步
这是第一步的描述内容
2
第二步
这是第二步的描述内容
3
第三步
这是第三步的描述内容
<template>
<PlusStepsForm v-model="active" direction="vertical" :space="120" :data="stepForm" @next="next" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const stepForm = ref([
{
title: '第一步',
description: '这是第一步的描述内容',
form: {
modelValue: {},
columns: [
{
label: '名称',
width: 120,
prop: 'name',
valueType: 'copy',
tooltip: '名称最多显示6个字符'
},
{
label: '状态',
width: 120,
prop: 'status',
valueType: 'select',
options: [
{
label: '未解决',
value: '0',
color: 'red'
},
{
label: '已解决',
value: '1',
color: 'blue'
},
{
label: '解决中',
value: '2',
color: 'yellow'
},
{
label: '失败',
value: '3',
color: 'red'
}
]
}
],
rules: {
name: [
{
required: true,
message: '请输入名称'
}
]
}
}
},
{
title: '第二步',
description: '这是第二步的描述内容',
form: {
labelWidth: '100',
modelValue: {},
columns: [
{
label: '标签',
width: 120,
prop: 'tag'
},
{
label: '执行进度',
width: 200,
prop: 'progress'
},
{
label: '评分',
width: 200,
prop: 'rate',
valueType: 'rate'
},
{
label: '是否显示',
width: 100,
prop: 'switch',
valueType: 'switch'
}
],
rules: {
tag: [
{
required: true,
message: '请输入标签'
}
],
progress: [
{
required: true,
message: '请输入执行进度'
}
]
}
}
},
{
title: '第三步',
description: '这是第三步的描述内容',
form: {
modelValue: {},
columns: [
{
label: '时间',
prop: 'time',
valueType: 'date-picker'
},
{
label: '要求',
prop: 'demand',
valueType: 'checkbox',
options: [
{
label: '四六级',
value: '0'
},
{
label: '计算机二级证书',
value: '1'
},
{
label: '普通话证书',
value: '2'
}
]
},
{
label: '奖励',
prop: 'price'
},
{
label: '提成',
prop: 'percentage'
},
{
label: '说明',
prop: 'desc',
valueType: 'textarea',
fieldProps: {
maxlength: 10,
showWordLimit: true,
autosize: { minRows: 2, maxRows: 4 }
}
}
],
rules: {
time: [
{
required: true,
trigger: 'change',
message: '请选择时间'
}
],
demand: [
{
required: true,
trigger: 'change',
message: '请选择要求'
}
]
}
}
}
])
const active = ref(1)
const next = (actives: number, values: any) => {
active.value = actives
console.log(actives, values, stepForm.value)
}
</script>
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
带图标的分步表单
通过 icon 属性来设置图标， 图标的类型可以参考 Icon 组件的文档。
第一步
第二步
第三步
<template>
<PlusStepsForm v-model="active" :data="stepForm" @next="next" />
</template>
<script lang="ts" setup>
import { shallowRef, ref } from 'vue'
import { Edit, Picture, Upload } from '@element-plus/icons-vue'
const stepForm = shallowRef([
{
title: '第一步',
icon: Edit,
form: {
modelValue: {},
columns: [
{
label: '名称',
width: 120,
prop: 'name',
valueType: 'copy',
tooltip: '名称最多显示6个字符'
},
{
label: '状态',
width: 120,
prop: 'status',
valueType: 'select',
options: [
{
label: '未解决',
value: '0',
color: 'red'
},
{
label: '已解决',
value: '1',
color: 'blue'
},
{
label: '解决中',
value: '2',
color: 'yellow'
},
{
label: '失败',
value: '3',
color: 'red'
}
]
}
],
rules: {
name: [
{
required: true,
message: '请输入名称'
}
]
}
}
},
{
title: '第二步',
icon: Upload,
form: {
labelWidth: '100',
modelValue: {},
columns: [
{
label: '标签',
width: 120,
prop: 'tag'
},
{
label: '执行进度',
width: 200,
prop: 'progress'
},
{
label: '评分',
width: 200,
prop: 'rate',
valueType: 'rate'
},
{
label: '是否显示',
width: 100,
prop: 'switch',
valueType: 'switch'
}
],
rules: {
tag: [
{
required: true,
message: '请输入标签'
}
],
progress: [
{
required: true,
message: '请输入执行进度'
}
]
}
}
},
{
title: '第三步',
icon: Picture,
form: {
modelValue: {},
columns: [
{
label: '时间',
prop: 'time',
valueType: 'date-picker'
},
{
label: '要求',
prop: 'demand',
valueType: 'checkbox',
options: [
{
label: '四六级',
value: '0'
},
{
label: '计算机二级证书',
value: '1'
},
{
label: '普通话证书',
value: '2'
}
]
},
{
label: '奖励',
prop: 'price'
},
{
label: '提成',
prop: 'percentage'
},
{
label: '说明',
prop: 'desc',
valueType: 'textarea',
fieldProps: {
maxlength: 10,
showWordLimit: true,
autosize: { minRows: 2, maxRows: 4 }
}
}
],
rules: {
time: [
{
required: true,
trigger: 'change',
message: '请选择时间'
}
],
demand: [
{
required: true,
trigger: 'change',
message: '请选择要求'
}
]
}
}
}
])
const active = ref(1)
const next = (actives: number, values: any) => {
active.value = actives
console.log(active, values, stepForm.value)
}
</script>
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
简洁风格的分步表单
设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。
第一步
第二步
第三步
<template>
<PlusStepsForm v-model="active" simple :data="stepForm" @next="next" />
</template>
<script lang="ts" setup>
import { ref, shallowRef } from 'vue'
import { Edit, Upload, Picture } from '@element-plus/icons-vue'
const stepForm = shallowRef([
{
title: '第一步',
icon: Edit,
form: {
modelValue: {},
columns: [
{
label: '名称',
width: 120,
prop: 'name',
valueType: 'copy',
tooltip: '名称最多显示6个字符'
},
{
label: '状态',
width: 120,
prop: 'status',
valueType: 'select',
options: [
{
label: '未解决',
value: '0',
color: 'red'
},
{
label: '已解决',
value: '1',
color: 'blue'
},
{
label: '解决中',
value: '2',
color: 'yellow'
},
{
label: '失败',
value: '3',
color: 'red'
}
]
}
],
rules: {
name: [
{
required: true,
message: '请输入名称'
}
]
}
}
},
{
title: '第二步',
icon: Upload,
form: {
labelWidth: '100',
modelValue: {},
columns: [
{
label: '标签',
width: 120,
prop: 'tag'
},
{
label: '执行进度',
width: 200,
prop: 'progress'
},
{
label: '评分',
width: 200,
prop: 'rate',
valueType: 'rate'
},
{
label: '是否显示',
width: 100,
prop: 'switch',
valueType: 'switch'
}
],
rules: {
tag: [
{
required: true,
message: '请输入标签'
}
],
progress: [
{
required: true,
message: '请输入执行进度'
}
]
}
}
},
{
title: '第三步',
icon: Picture,
form: {
modelValue: {},
columns: [
{
label: '时间',
prop: 'time',
valueType: 'date-picker'
},
{
label: '要求',
prop: 'demand',
valueType: 'checkbox',
options: [
{
label: '四六级',
value: '0'
},
{
label: '计算机二级证书',
value: '1'
},
{
label: '普通话证书',
value: '2'
}
]
},
{
label: '奖励',
prop: 'price'
},
{
label: '提成',
prop: 'percentage'
},
{
label: '说明',
prop: 'desc',
valueType: 'textarea',
fieldProps: {
maxlength: 10,
showWordLimit: true,
autosize: { minRows: 2, maxRows: 4 }
}
}
],
rules: {
time: [
{
required: true,
trigger: 'change',
message: '请选择时间'
}
],
demand: [
{
required: true,
trigger: 'change',
message: '请选择要求'
}
]
}
}
}
])
const active = ref(1)
const next = (actives: number, values: any) => {
active.value = actives
console.log(active, values, stepForm.value)
}
</script>
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
插槽渲染分步表单头部
设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。
第一步
这是第一步的描述内容
2
第二步
这是第二步的描述内容
3
第三步
这是第三步的描述内容
<template>
<PlusStepsForm v-model="active" :data="stepForm" @next="next">
<template #title="{ title }">{{ title }}</template>
<template #description="{ description }">{{ description }}</template>
</PlusStepsForm>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const stepForm = ref([
{
title: '第一步',
description: '这是第一步的描述内容',
form: {
modelValue: {},
columns: [
{
label: '名称',
width: 120,
prop: 'name',
valueType: 'copy',
tooltip: '名称最多显示6个字符'
},
{
label: '状态',
width: 120,
prop: 'status',
valueType: 'select',
options: [
{
label: '未解决',
value: '0',
color: 'red'
},
{
label: '已解决',
value: '1',
color: 'blue'
},
{
label: '解决中',
value: '2',
color: 'yellow'
},
{
label: '失败',
value: '3',
color: 'red'
}
]
}
],
rules: {
name: [
{
required: true,
message: '请输入名称'
}
]
}
}
},
{
title: '第二步',
description: '这是第二步的描述内容',
form: {
modelValue: {},
columns: [
{
label: '标签',
width: 120,
prop: 'tag'
},
{
label: '执行进度',
width: 200,
prop: 'progress'
},
{
label: '评分',
width: 200,
prop: 'rate',
valueType: 'rate'
},
{
label: '是否显示',
width: 100,
prop: 'switch',
valueType: 'switch'
}
],
rules: {
tag: [
{
required: true,
message: '请输入标签'
}
],
progress: [
{
required: true,
message: '请输入执行进度'
}
]
}
}
},
{
title: '第三步',
description: '这是第三步的描述内容',
form: {
modelValue: {},
columns: [
{
label: '时间',
prop: 'time',
valueType: 'date-picker'
},
{
label: '要求',
prop: 'demand',
valueType: 'checkbox',
options: [
{
label: '四六级',
value: '0'
},
{
label: '计算机二级证书',
value: '1'
},
{
label: '普通话证书',
value: '2'
}
]
},
{
label: '奖励',
prop: 'price'
},
{
label: '提成',
prop: 'percentage'
},
{
label: '说明',
prop: 'desc',
valueType: 'textarea',
fieldProps: {
maxlength: 10,
showWordLimit: true,
autosize: { minRows: 2, maxRows: 4 }
}
}
],
rules: {
time: [
{
required: true,
trigger: 'change',
message: '请选择时间'
}
],
demand: [
{
required: true,
trigger: 'change',
message: '请选择要求'
}
]
}
}
}
])
const active = ref(1)
const next = (actives: number, values: any) => {
active.value = actives
console.log(actives, values, stepForm.value)
}
</script>
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
插槽渲染分步表单每一步内容
v0.1.22 新增设置 step-* 可应用自定义插槽渲染每一步内容，*表示的是步骤数，从 1 开始。
第一步
这是第一步的描述内容
2
第二步
这是第二步的描述内容
3
第三步
这是第三步的描述内容
<template>
<PlusStepsForm v-model="active" direction="vertical" :space="120" :data="stepForm" @next="next">
<template #step-1>
<h3>自定义第一步内容</h3>
</template>
</PlusStepsForm>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const stepForm = ref([
{
title: '第一步',
description: '这是第一步的描述内容'
},
{
title: '第二步',
description: '这是第二步的描述内容',
form: {
modelValue: {},
columns: [
{
label: '标签',
width: 120,
prop: 'tag'
},
{
label: '执行进度',
width: 200,
prop: 'progress'
},
{
label: '评分',
width: 200,
prop: 'rate',
valueType: 'rate'
},
{
label: '是否显示',
width: 100,
prop: 'switch',
valueType: 'switch'
}
],
rules: {
tag: [
{
required: true,
message: '请输入标签'
}
],
progress: [
{
required: true,
message: '请输入执行进度'
}
]
}
}
},
{
title: '第三步',
description: '这是第三步的描述内容',
form: {
modelValue: {},
columns: [
{
label: '时间',
prop: 'time',
valueType: 'date-picker'
},
{
label: '要求',
prop: 'demand',
valueType: 'checkbox',
options: [
{
label: '四六级',
value: '0'
},
{
label: '计算机二级证书',
value: '1'
},
{
label: '普通话证书',
value: '2'
}
]
},
{
label: '奖励',
prop: 'price'
},
{
label: '提成',
prop: 'percentage'
},
{
label: '说明',
prop: 'desc',
valueType: 'textarea',
fieldProps: {
maxlength: 10,
showWordLimit: true,
autosize: { minRows: 2, maxRows: 4 }
}
}
],
rules: {
time: [
{
required: true,
trigger: 'change',
message: '请选择时间'
}
],
demand: [
{
required: true,
trigger: 'change',
message: '请选择要求'
}
]
}
}
}
])
const active = ref(1)
const next = (actives: number, values: any) => {
active.value = actives
console.log(actives, values, stepForm.value)
}
</script>
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
StepsForm API
StepsForm Attributes
| 名称 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
model-value / v-model | 分步表单绑定的第几步值 | number | 1 | 否 (v0.1.14 版本前是 必须) |
data | 分步表单展示的数据 | array PlusStepFromRow[] | [] | 否 (v0.1.14 版本前是 必须) |
submitText v0.1.14 | 提交按钮文字 | string | 提交 | 否 |
nextText v0.1.14 | 下一步按钮文字 | string | 下一步 | 否 |
preText v0.1.14 | 上一步按钮文字 | string | 上一步 | 否 |
| ... | ... | ... | ... | ... |
...表示同时支持所有 ElSteps Attributes
StepsForm Events
| 名称 | 说明 | 类型 |
|---|---|---|
change | 表单变化触发的事件 | function |
pre | 点击上一步按钮触发的事件 | function |
next | 点击下一步（提交）按钮校验通过触发的事件 | function allValues参数为v0.1.23新增 |
submit v0.1.23 | 点击提交按钮触发的事件 | function |
StepsForm Slots
| 插槽名 | 说明 | 作用域插槽参数 |
|---|---|---|
| step-* v0.1.22 | 每一步内容的插槽，*表示的是步骤数，从 1 开始 | {title,form,description,icon,status} PlusStepFromRow |
| ... | ... | ... |
...表示同时支持所有 ElStep 的其他插槽 如 icon, title, description