# 生成表单
通过FcDesigner
生成的规则生成表单
# 获取FcDesigner
中表单的生成规则
getRule
获取生成规则getOption
获取表单配置
<template>
<fc-designer ref="designer" :menu="menu"/>
</template>
<script>
export default {
name: 'app',
data() {
return {};
},
methods:{
getForm(){
//FcDesigner 生成的`JSON`
const FcDesignerRule = this.$refs.designer.getRule();
//FcDesigner 生成的`options`
const FcDesignerOptions = this.$refs.designer.getOption();
}
}
};
</script>
# 通过规则在FcDesigner
中回显表单
<template>
<fc-designer ref="designer"/>
</template>
<script>
export default {
name: 'app',
data() {
return {};
},
created(){
this.$refs.designer.setRule(FcDesignerRule);
this.$refs.designer.setOption(FcDesignerOption);
}
};
</script>
# 通过规则生成表单
<template>
<form-create
v-model="fapi"
:rule="rule"
:option="option"
@submit="onSubmit"
></form-create>
</template>
<script>
import formCreate from "@form-create/element-ui";
//FcDesigner 生成的`JSON`
const FcDesignerRule = '[{"type":"input","field":"cuk5qqdw3umc","title":"输入框","info":"","_fc_drag_tag":"input","hidden":false,"display":true}]';
//FcDesigner 生成的`options`
const FcDesignerOptions = '{"form":{"labelPosition":"right","size":"mini","labelWidth":"125px","hideRequiredAsterisk":false,"showMessage":true,"inlineMessage":false}}';
export default {
data () {
return {
fapi: null,
rule: formCreate.parseJson(FcDesignerRule),
option: formCreate.parseJson(FcDesignerOptions)
}
},
methods: {
onSubmit (formData) {
//todo 提交表单
}
}
}
</script>