# BsTableForm 表格表单
功能与表单功能基本一致，页面排版按表格分列模式排布
# 基础用法
适用基础表单数据
<template>
<BsTableForm
:colNums="3"
:titleWidth="200"
:formData="formData"
:formItems="formItems"
/>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
sex: '',
age: '',
interest: '',
status: '',
level: '',
address: ''
},
formItems: [
{
field: 'name',
title: '姓名',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeInput',
props: {
type: 'text',
placeholder: '请输入名称'
}
}
},
{
field: 'sex',
title: '性别',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeSelect',
options: [{
value: 0,
label: '女'
}, {
value: 1,
label: '男'
}],
props: {
placeholder: '请选择性别'
}
}
},
{
field: 'age',
title: '年龄',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeInput',
props: {
type: 'number',
placeholder: '请输入名称'
}
}
},
{
field: 'interest',
title: '兴趣爱好',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeCheckbox',
options: [
{ value: '1', label: '绘画' },
{ value: '0', label: '棋牌' }
],
props: {
placeholder: '请选择兴趣'
}
}
},
{
field: 'status',
title: '是否在职',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeRadio',
options: [
{ value: 1, label: '是' },
{ value: 0, label: '否' }
],
props: {
placeholder: '是否在职'
}
}
},
{
field: 'level',
title: '职位',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeTree',
props: {
config: {
showFilter: true,
levelno: -1,
multiple: true,
isHump: true,
treeProps: {
// 树配置选项
labelFormat: '{code}-{name}', // {code}-{name}
nodeKey: 'code', // 树的主键
label: 'name', // 树的显示lalel字段
children: 'children' // 树的嵌套字段
},
}
},
options: [
{
'id': '1',
'code': '1',
'name': '董事长'
},
{
'id': '2',
'code': '2',
'name': '总经理'
},
{
'id': '3',
'code': '3',
'name': '总裁'
},
{
'id': '4',
'code': '4',
'name': '副总经理'
},
{
'id': '5',
'code': '5',
'name': '副总裁'
},
{
'id': '6',
'code': '6',
'name': '首席执行官'
},
{
'id': '7',
'code': '7',
'name': '总助'
},
{
'id': '8',
'code': '8',
'name': '总监'
}
]
}
},
{
field: 'address',
title: '通讯地址',
span: 24,
titleWidth: 100,
itemRender: {
name: '$textarea',
props: {
placeholder: '请输入通讯地址',
rows: 10,
maxlength: '2000',
'show-word-count': true
}
}
}
]
}
}
}
</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
185
186
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
185
186
Expand Copy Copy
# 表单必填项校验
给表单添加一些必填项，也可为校验项添加校验规则，通过规则校验是否符合
[注]：规则校验项正则可按数组添加多个，只要其中一个校验符合就会校验通过
<template>
<BsTableForm
ref='tableForm'
:colNums="3"
:titleWidth="200"
:formData="formData"
:formItems="formItems"
:rules="formRules"
/>
<vxe-button status="primary" content="校验" @click="validateForm" style="margin-top:15px;"></vxe-button>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
sex: '',
age: '',
interest: '',
status: '',
level: '',
email: '',
phone: '',
address: ''
},
formItems: [
{
field: 'name',
title: '姓名',
span: 8,
titleWidth: 100,
required: true,
itemRender: {
name: '$vxeInput',
props: {
type: 'text',
placeholder: '请输入名称'
}
}
},
{
field: 'sex',
title: '性别',
span: 8,
titleWidth: 100,
required: true,
itemRender: {
name: '$vxeSelect',
options: [{
value: 0,
label: '女'
}, {
value: 1,
label: '男'
}],
props: {
placeholder: '请选择性别'
}
}
},
{
field: 'age',
title: '年龄',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeInput',
props: {
type: 'number',
placeholder: '请输入名称'
}
}
},
{
field: 'interest',
title: '兴趣爱好',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeCheckbox',
options: [
{ value: '1', label: '绘画' },
{ value: '0', label: '棋牌' }
],
props: {
placeholder: '请选择兴趣'
}
}
},
{
field: 'status',
title: '是否在职',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeRadio',
options: [
{ value: 1, label: '是' },
{ value: 0, label: '否' }
],
props: {
placeholder: '是否在职'
}
}
},
{
field: 'level',
title: '职位',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeTree',
props: {
config: {
showFilter: true,
levelno: -1,
multiple: true,
isHump: true,
treeProps: {
// 树配置选项
labelFormat: '{code}-{name}', // {code}-{name}
nodeKey: 'code', // 树的主键
label: 'name', // 树的显示lalel字段
children: 'children' // 树的嵌套字段
},
}
},
options: [
{
'id': '1',
'code': '1',
'name': '董事长'
},
{
'id': '2',
'code': '2',
'name': '总经理'
},
{
'id': '3',
'code': '3',
'name': '总裁'
},
{
'id': '4',
'code': '4',
'name': '副总经理'
},
{
'id': '5',
'code': '5',
'name': '副总裁'
},
{
'id': '6',
'code': '6',
'name': '首席执行官'
},
{
'id': '7',
'code': '7',
'name': '总助'
},
{
'id': '8',
'code': '8',
'name': '总监'
}
]
}
},
{
field: 'email',
title: '邮箱',
span: 8,
titleWidth: 100,
required: true,
itemRender: {
name: '$vxeInput',
props: {
type: 'text',
placeholder: '请输入邮箱'
}
}
},
{
field: 'phone',
title: '电话',
span: 8,
titleWidth: 100,
required: true,
itemRender: {
name: '$vxeInput',
props: {
type: 'text',
placeholder: '请输入电话'
}
}
},
{
field: 'address',
title: '通讯地址',
span: 24,
titleWidth: 100,
required: true,
itemRender: {
name: '$textarea',
props: {
placeholder: '请输入通讯地址',
rows: 10,
maxlength: '2000',
'show-word-count': true
}
}
}
],
// 校验项规则
formRules: {
name: [
{
required: true,
message: '请输入姓名'
}
],
sex: [
{
required: true,
message: '请选择性别'
}
],
email: [
{
required: true,
message: '请输入邮箱',
pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
patterMsg: '邮箱不符合规则，请重新输入'
}
],
phone: [
{
required: true,
message: '请输入电话',
pattern: [/1(3|4|5|6|7|8|9)[0-9]{9}/, /^1[3|4|5|7|8|9][0-9]\d{8}$/],
patterMsg: '电话不符合规则，请重新输入'
}
],
address: [
{
required: true,
message: '请输入通讯地址'
}
]
}
}
},
methods: {
validateForm() {
this.$refs.tableForm.formValidate()
}
}
}
</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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
Expand Copy Copy
# 表单项合并行
表单项标题可按行进行合并显示
[注]：表单项父级需设置height
<template>
<BsTableForm
ref='tableForm'
:colNums="2"
:titleWidth="200"
:formData="formData"
:formItems="formItems"
/>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
sex: '',
age: '',
interest: '',
status: '',
level: '',
email: '',
phone: '',
address: ''
},
formItems: [
{
field: 'user',
title: '个人基本信息',
span: 24,
titleWidth: 150,
height: 120,
children: [
{
field: 'name',
title: '姓名',
titleWidth: 100,
itemRender: {
name: '$vxeInput',
props: {
type: 'text',
placeholder: '请输入名称'
}
}
},
{
field: 'sex',
title: '性别',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeSelect',
options: [{
value: 0,
label: '女'
}, {
value: 1,
label: '男'
}],
props: {
placeholder: '请选择性别'
}
}
},
{
field: 'age',
title: '年龄',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeInput',
props: {
type: 'number',
placeholder: '请输入名称'
}
}
},
]
},
{
field: 'interest',
title: '兴趣爱好',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeCheckbox',
options: [
{ value: '1', label: '绘画' },
{ value: '0', label: '棋牌' }
],
props: {
placeholder: '请选择兴趣'
}
}
},
{
field: 'status',
title: '是否在职',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeRadio',
options: [
{ value: 1, label: '是' },
{ value: 0, label: '否' }
],
props: {
placeholder: '是否在职'
}
}
},
{
field: 'level',
title: '职位',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeTree',
props: {
config: {
showFilter: true,
levelno: -1,
multiple: true,
isHump: true,
treeProps: {
// 树配置选项
labelFormat: '{code}-{name}', // {code}-{name}
nodeKey: 'code', // 树的主键
label: 'name', // 树的显示lalel字段
children: 'children' // 树的嵌套字段
},
}
},
options: [
{
'id': '1',
'code': '1',
'name': '董事长'
},
{
'id': '2',
'code': '2',
'name': '总经理'
},
{
'id': '3',
'code': '3',
'name': '总裁'
},
{
'id': '4',
'code': '4',
'name': '副总经理'
},
{
'id': '5',
'code': '5',
'name': '副总裁'
},
{
'id': '6',
'code': '6',
'name': '首席执行官'
},
{
'id': '7',
'code': '7',
'name': '总助'
},
{
'id': '8',
'code': '8',
'name': '总监'
}
]
}
},
{
field: 'email',
title: '邮箱',
span: 8,
titleWidth: 100,
itemRender: {
name: '$vxeInput',
props: {
type: 'text',
placeholder: '请输入邮箱'
}
}
},
{
field: 'address',
title: '通讯地址',
span: 24,
titleWidth: 100,
itemRender: {
name: '$textarea',
props: {
placeholder: '请输入通讯地址',
rows: 10,
maxlength: '2000',
'show-word-count': true
}
}
}
]
}
}
}
</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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
Expand Copy Copy
# 表单项链接或按钮配置
表单项可通过动态配置链接及操作按钮
<template>
<BsTableForm
ref='tableForm'
:colNums="3"
:titleWidth="200"
:formData="formData"
:formItems="formItems"
:emptyItemConfig="{
titleWidth: 200
}"
@btnClickHandle="btnClickHandle"
@defHandle="defHandle"
/>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
sex: '',
age: '',
file: '',
interest: '',
status: '',
level: '',
email: '',
phone: '',
address: ''
},
formItems: [
{
field: 'name',
title: '姓名',
span: 8,
titleWidth: 200,
itemRender: {
name: '$vxeInput',
props: {
type: 'text',
placeholder: '请输入名称'
}
},
buttons: [
{
btnCode: 'code',
btnName: '操作按钮'
}
]
},
{
field: 'sex',
title: '性别',
span: 8,
titleWidth: 200,
itemRender: {
name: '$vxeSelect',
options: [{
value: 0,
label: '女'
}, {
value: 1,
label: '男'
}],
props: {
placeholder: '请选择性别'
}
}
},
{
field: 'age',
title: '年龄',
span: 8,
titleWidth: 200,
itemRender: {
name: '$vxeInput',
props: {
type: 'number',
placeholder: '请输入名称'
}
}
},
{
field: 'file',
title: '附件名称',
span: 8,
titleWidth: 200,
isSlot: true,
slotHtml: '<span>附件名称 <a href="http://www.baidu.com" _blank>百度一下</a></span> ',
itemRender: {
name: '$vxeInput',
props: {
type: 'number',
placeholder: '请输入附件名称'
}
}
},
{
field: 'interest',
title: '兴趣爱好',
span: 8,
titleWidth: 200,
itemRender: {
name: '$vxeCheckbox',
options: [
{ value: '1', label: '绘画' },
{ value: '0', label: '棋牌' }
],
props: {
placeholder: '请选择兴趣'
}
}
},
{
field: 'address',
title: '通讯地址',
span: 24,
titleWidth: 200,
itemRender: {
name: '$textarea',
props: {
placeholder: '请输入通讯地址',
rows: 10,
maxlength: '2000',
'show-word-count': true
}
}
}
]
}
},
methods: {
btnClickHandle(btnObj) {
console.log(btnObj[0].btnName)
alert(btnObj[0].btnName)
},
defHandle(obj) {
alert(obj.title)
console.log(obj)
}
}
}
</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
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
Expand Copy Copy
# 表单范围边框线
添加标框体表示这些表单项是一个整体或是关联关系的项
<template>
<BsTableForm
ref='tableForm'
:colNums="2"
:titleWidth="200"
:formData="formData"
:formItems="formItems"
:emptyItemConfig="{
titleWidth: 200
}"
/>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
sex: '',
age: '',
interest: '',
email: '',
phone: '',
address: ''
},
formItems: [
{
field: 'wrapper',
title: '',
type: 'wrapper-border',
span: 24,
contains: [
'name',
'age',
'phone',
'email',
'interest'
]
},
{
field: 'name',
title: '姓名',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'text', placeholder: '请输入名称' } },
},
{
field: 'age',
title: '年龄',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'number', placeholder: '请输入名称' } }
},
{
field: 'phone',
title: '电话',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'number', placeholder: '请输入电话' } }
},
{
field: 'email',
title: '邮箱',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'number', placeholder: '请输入邮箱' } }
},
{
field: 'interest',
title: '兴趣爱好',
span: 8,
titleWidth: 200,
itemRender: {
name: '$vxeCheckbox',
options: [
{ value: '1', label: '绘画' },
{ value: '0', label: '棋牌' }
],
props: {
placeholder: '请选择兴趣'
}
}
},
{
field: 'address',
title: '通讯地址',
span: 24,
titleWidth: 200,
itemRender: {
name: '$textarea',
props: {
placeholder: '请输入通讯地址',
rows: 10,
maxlength: '2000',
'show-word-count': true
}
}
}
]
}
}
}
</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
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
Expand Copy Copy
# 表单分割行
表单中添加分割行，区分信息域
<template>
<BsTableForm
ref='tableForm'
:colNums="2"
:titleWidth="200"
:formData="formData"
:formItems="formItems"
:emptyItemConfig="{
titleWidth: 200
}"
/>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
sex: '',
age: '',
interest: '',
email: '',
phone: '',
address: '',
company: '',
work: '',
time: ''
},
formItems: [
{
field: 'name',
title: '姓名',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'text', placeholder: '请输入名称' } },
},
{
field: 'age',
title: '年龄',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'number', placeholder: '请输入名称' } }
},
{
field: 'phone',
title: '电话',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'number', placeholder: '请输入电话' } }
},
{
field: 'email',
title: '邮箱',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'text', placeholder: '请输入邮箱' } }
},
{
field: 'interest',
title: '兴趣爱好',
span: 8,
titleWidth: 200,
itemRender: {
name: '$vxeCheckbox',
options: [
{ value: '1', label: '绘画' },
{ value: '0', label: '棋牌' }
],
props: {
placeholder: '请选择兴趣'
}
}
},
{
field: 'address',
title: '通讯地址',
span: 24,
titleWidth: 200,
itemRender: {
name: '$textarea',
props: {
placeholder: '请输入通讯地址',
rows: 10,
maxlength: '2000',
'show-word-count': true
}
}
},
{
field: 'division-row',
title: '工作信息',
span: 24,
titleWidth: 0,
type: 'division-row'
},
{
field: 'company',
title: '工作单位',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'text', placeholder: '请输入工作单位' } },
},
{
field: 'work',
title: '工作职位',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'text', placeholder: '请输入工作职位' } },
},
{
field: 'time',
title: '工作年限',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'text', placeholder: '请输入工作年限' } },
},
]
}
}
}
</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
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
Expand Copy Copy
# 发票组件样式
设置发票组件样式显示,isShowCircle设置为true
<template>
<BsTableForm
ref='tableForm'
:colNums="2"
:titleWidth="200"
:formData="formData"
:formItems="formItems"
:emptyItemConfig="{
titleWidth: 200
}"
:isShowCircle="true"
/>
</template>
<script>
export default {
data() {
return {
formData: {
},
formItems: [
{
field: 'name',
title: '名称',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'text', placeholder: '请输入名称' } },
},
{
field: 'code',
title: '识别号',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'number', placeholder: '请输入名称' } }
},
{
field: 'bank',
title: '开户银行',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'number', placeholder: '请输入电话' } }
},
{
field: 'account',
title: '账号',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'text', placeholder: '请输入邮箱' } }
},
{
field: 'address',
title: '通讯地址',
span: 24,
titleWidth: 200,
itemRender: {
name: '$textarea',
props: {
placeholder: '请输入通讯地址',
rows: 10,
maxlength: '2000',
'show-word-count': true
}
}
},
{
field: 'division-row',
title: '工作信息',
span: 24,
titleWidth: 0,
type: 'division-row'
},
{
field: 'company',
title: '工作单位',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'text', placeholder: '请输入工作单位' } },
},
{
field: 'work',
title: '工作职位',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'text', placeholder: '请输入工作职位' } },
},
{
field: 'time',
title: '工作年限',
span: 8,
titleWidth: 200,
itemRender: { name: '$vxeInput', props: { type: 'text', placeholder: '请输入工作年限' } },
},
]
}
}
}
</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
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
Expand Copy Copy