# fetch v2.5.3+
Asynchronous data can be loaded through the custom attribute fetch and assigned to the specified attribute
# 类型
type fetch = string | {
//The location where asynchronous data is inserted, for example:'options', 'props.options'
to: String;
//interface address
action: String;
//Parse the data returned by the interface and return the final data. The default is `res.data`
parse?: (body: any) => any;
//Request method, default GET
method?: String;
//Call interface with data
data?: Object;
//Call the method of submitting data attached to the interface,The default is `formData`
dataType?: 'json';
//Custom header header information
headers?: Object;
//Interface request failed callback
onError?: (e: Error | ProgressEvent) => void;
}
When fetch is a string, the data will be assigned to rule.options by default
# Example
# Load the options of select through the interface
<template>
<div>
<form-create :rule="rule" v-model="fApi" :option="options"/>
</div>
</template>
<script>
export default {
data(){
return {
fApi:{},
options:{
onSubmit:(formData)=>{
alert(JSON.stringify(formData))
}
},
rule:[
{
type:'select',
field:'city',
title:'city',
value:'',
options: [],
effect:{
fetch: {
action:'http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_province.json',
to: 'options',
method:'GET',
parse(res){
return res.rows.map(row=>{
return {
label: row.name,
value: row.adcode
}
})
}
}
}
}
]
}
}
}
</script>
# Load the option of cascader through the interface
<template>
<div>
<form-create :rule="rule" v-model="fApi" :option="options"/>
</div>
</template>
<script>
export default {
data(){
return {
fApi:{},
options:{
onSubmit:(formData)=>{
alert(JSON.stringify(formData))
}
},
rule:[
{
type:'cascader',
field:'city',
title:'city',
value:[],
props:{
options:[]
},
effect:{
fetch: {
action:'https://cdn.jsdelivr.net/gh/modood/Administrative-divisions-of-China@2.4.0/dist/pc-code.json',
to: 'props.options',
method:'GET',
parse(res){
function tidy(list){
return list.map(val=>{
return {
value:val.code,
label:val.name,
children:val.children ? tidy(val.children) : undefined
}
})
}
return tidy(res);
}
}
}
}
]
}
}
}
</script>