# 异步属性
当我们使用下拉菜单，树形选择，复选框组，单选框组等控件时，可能会遇到从服务器端获取数据的情况，我们支持在 props 中传递一个函数返回 Promise，用来获取 options 数据。
注：为了避免每次打开表单都发送异步请求，我们还是建议您在外部获取到选项以后，再传递到
props参数中，当然如何使用是您的选择。
<template>
<div>
<v-form-create :formConfig="formConfig" :formData="formData" v-model="fApi" />
<a-button @click="submit">提交</a-button>
</div>
</template>
<script>
export default {
name: 'Demo',
data() {
return {
fApi: {},
formData: {},
formConfig: {
formItems: [
{
type: 'select',
label: '下拉选择',
field: 'select_1',
span: 24,
props: {
options: () => {
return new Promise(resolve => {
setTimeout(() => {
resolve([
{
label: '选项1',
value: '1'
},
{
label: '选项2',
value: '2'
}
])
}, 1000)
})
}
}
},
{
type: 'treeSelect',
label: '树形选择',
field: 'tree_select_2',
span: 24,
props: {
treeData: () => {
return new Promise(resolve => {
setTimeout(() => {
resolve([
{
label: '选项1',
value: '1',
children: [
{
label: '选项三',
value: '1-1'
}
]
},
{
label: '选项2',
value: '2'
}
])
}, 2000)
})
}
}
},
{
type: 'checkboxGroup',
label: '复选框',
field: 'checkbox_group_3',
span: 24,
props: {
options: () => {
return new Promise(resolve => {
setTimeout(() => {
resolve([
{
label: '选项1',
value: '1'
},
{
label: '选项2',
value: '2'
}
])
}, 3000)
})
}
}
}
],
config: {
layout: 'horizontal',
labelLayout: 'flex',
labelWidth: 100,
labelCol: {},
wrapperCol: {}
}
}
}
},
methods: {
async submit() {
const data = await this.fApi.submit()
alert(JSON.stringify(data, null, '\t'))
}
}
}
</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
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
显示代码 复制代码 复制代码
注：异步属性只支持
options和treeData，暂不支持其他数据字段