form-create
form-create copied to clipboard
作者有计划做成代码生成器吗?
目前设计完表单是由form-create组件进行解析渲染,有计划做成 设计表单后直接生成源码吗?
缘由:一些复杂的业务逻辑form-create组件无法胜任,需要自己改代码实现
举个例子,页面上设计后,生成下面这样的代码,而不是json
<template>
<el-form ref="refForm" :model="formData" size="medium" label-position="right" label-width="100" :hide-requiredasterisk="true" :rules="rules">
<el-form-item :show-label="true" label-width="100" label="单行文本" prop="field_FN3XY">
<el-input v-model="formData.field_FN3XY" placeholder="请输入" suffix-icon="el-icon-delete" type="text">
</el-input>
</el-form-item>
<el-form-item :show-label="true" label-width="100" label="单选框" prop="field_Xz09y">
<el-radio-group v-model="formData.field_Xz09y" :border="true" size="medium">
<el-radio-button label="1">
<template slot="default">选项一</template>
</el-radio-button>
<el-radio-button label="2">
<template slot="default">选项二</template>
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="postData(refForm)">保存</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</template>
<script setup>
import {ref,reactive} from "vue";
import {
Api
} from "@/api";
const formData = reactive({
"field_FN3XY": "",
"field_Xz09y": 2
});
const UIData = reactive({});
const rules = {
"field_FN3XY": []
}
const refForm = ref(null)
const postData = function(formEl) {
formEl.validate((valid) => {
if (valid === false) {
return false;
}
Api.Post("undefined", formData).then(res => {
Elmessage.sucess("保存成功!");
});
})
}
</script>
感谢反馈, 这个建议很好. 不过目前还没有计划, 后面会考虑