# 使用示例
授权用户可以到控制台-已购产品中下载完整示例代码
# 加载动态数据
# 使用赋值变量
@1.2.7 高级版本提供
<template>
<div>
<fm-generate-form
:data="jsonData"
:remote-option="dynamicData"
ref="generateForm"
>
</fm-generate-form>
<el-button type="primary" @click="handleSubmit">Submit</el-button>
<el-button @click="handleLoadOption">Load Option</el-button>
</div>
</template>
export default {
data () {
return {
jsonData: {"list":[{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"width":"","remote":true,"remoteType":"option","remoteOption":"option","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1575969479252","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"name":"单选框组","key":"1575969479252","model":"option","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
dynamicData: {
option : [], // 单选框组 option data
}
}
},
methods: {
handleSubmit () {
this.$refs.generateForm.getData().then(data => {
alert(JSON.stringify(data))
}).catch(e => {
})
},
handleLoadOption () {
// 模拟数据请求
setTimeout(() => {
this.dynamicData.option = [
{value: '1111', label: '1111'},
{value: '2222', label: '2222'},
{value: '3333', label: '3333'}
]
}, 500)
}
}
}
# 使用方法函数
<template>
<div>
<fm-generate-form
:data="jsonData"
:remote="remoteFuncs"
ref="generateForm"
>
</fm-generate-form>
<el-button type="primary" @click="handleSubmit">Submit</el-button>
</div>
</template>
export default {
data () {
return {
jsonData: {"list":[{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"width":"","remote":true,"remoteType":"func","remoteOption":"option_1576033512246","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_option","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"name":"单选框组","key":"1576033512246","model":"option","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
remoteFuncs: {
func_option (resolve) {
setTimeout(() => {
const option = [
{value: '1111', label: '1111'},
{value: '2222', label: '2222'},
{value: '3333', label: '3333'}
]
resolve(option)
}, 500)
},
},
}
},
methods: {
handleSubmit () {
this.$refs.generateForm.getData().then(data => {
alert(JSON.stringify(data))
}).catch(e => {
})
}
}
}
# 省市区数据联动
@1.2.7 高级版本提供
<template>
<div>
<fm-generate-form
:data="jsonData"
:remote="remoteFuncs"
:value="editData"
:remote-option="dynamicData"
ref="generateForm"
@on-province-change="onProvinceChange"
@on-city-change="onCityChange"
>
</fm-generate-form>
<el-button type="primary" @click="handleSubmit">Submit</el-button>
</div>
</template>
export default {
data () {
return {
jsonData: {"list":[{"type":"select","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"showLabel":false,"width":"","options":[{"value":"Option 1"},{"value":"Option 2"},{"value":"Option 3"}],"remote":true,"remoteType":"option","remoteOption":"optionProvince","filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1576064925417","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true},"name":"省","key":"1576064925417","model":"province","rules":[]},{"type":"select","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"showLabel":false,"width":"","options":[{"value":"Option 1"},{"value":"Option 2"},{"value":"Option 3"}],"remote":true,"remoteType":"option","remoteOption":"optionCity","filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1576064925610","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":true,"dataBind":true},"name":"市","key":"1576064925610","model":"city","rules":[]},{"type":"select","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"showLabel":false,"width":"","options":[{"value":"Option 1"},{"value":"Option 2"},{"value":"Option 3"}],"remote":true,"remoteType":"option","remoteOption":"optionDistrict","filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1576064925781","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":true,"dataBind":true},"name":"区","key":"1576064925781","model":"district","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
editData: {},
remoteFuncs: {
},
dynamicData: {
optionProvince : [], // 省 option data
optionCity : [], // 市 option data
optionDistrict : [], // 区 option data
},
data: null
}
},
mounted () {
axios.get('/data.json').then(data => {
this.data = data.data
this.dynamicData.optionProvince = Object.keys(this.data[86]).map(item => ({
value: item,
label: this.data[86][item]
}))
})
},
methods: {
onProvinceChange (value) {
if (value) {
this.$refs.generateForm.display(['city'])
this.$refs.generateForm.hide(['district'])
this.$refs.generateForm.setData({
city: '',
district: ''
})
this.dynamicData.optionCity = Object.keys(this.data[value]).map(item => ({
value: item,
label: this.data[value][item]
}))
}
},
onCityChange (value) {
if (value) {
this.$refs.generateForm.display(['district'])
this.$refs.generateForm.setData({
district: ''
})
this.dynamicData.optionDistrict = Object.keys(this.data[value]).map(item => ({
value: item,
label: this.data[value][item]
}))
}
},
handleSubmit () {
this.$refs.generateForm.getData().then(data => {
alert(JSON.stringify(data))
}).catch(e => {
})
}
}
}
# 使用 antd 表单
<template>
<div>
<fm-generate-antd-form
:data="jsonData"
ref="generateForm"
>
</fm-generate-antd-form>
<a-button type="primary" @click="handleSubmit">Submit</a-button>
</div>
</template>
export default {
data () {
return {
jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1580735211034","remoteOption":"option_1580735211034"},"name":"单行文本","key":"1580735211034","model":"input_1580735211034","rules":[{"type":"string","message":"单行文本格式不正确"}]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"100%","defaultValue":"","required":false,"disabled":false,"pattern":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1580735214742","remoteOption":"option_1580735214742"},"name":"多行文本","key":"1580735214742","model":"textarea_1580735214742","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"width":"","remote":false,"remoteType":"option","remoteOption":"option_1580735218112","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1580735218112","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"name":"单选框组","key":"1580735218112","model":"radio_1580735218112","rules":[]},{"type":"checkbox","icon":"icon-check-box","options":{"inline":false,"defaultValue":[],"showLabel":false,"options":[{"value":"Option 1"},{"value":"Option 2"},{"value":"Option 3"}],"required":false,"width":"","remote":false,"remoteType":"option","remoteOption":"option_1580735222992","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1580735222992","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"name":"多选框组","key":"1580735222992","model":"checkbox_1580735222992","rules":[]},{"type":"rate","icon":"icon-pingfen1","options":{"defaultValue":0,"max":5,"disabled":false,"allowHalf":false,"required":false,"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showScore":false,"remoteFunc":"func_1580735236274","remoteOption":"option_1580735236274"},"name":"评分","key":"1580735236274","model":"rate_1580735236274","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":"","ui":"element","layout":"horizontal","labelCol":3}}
}
},
methods: {
handleSubmit () {
this.$refs.generateForm.getData().then(data => {
alert(JSON.stringify(data))
}).catch(e => {
})
}
}
}
# 更多...
更多示例持续更新中，如果您有示例需求可以来信告知：gavin_lei@qq.com