vue3 vue3-form-element表单生成工具

基于 Element Plus 、Vue3、 JSON Schema 生成表单

https://www.npmjs.com/package/@lljj/vue3-form-element 

安装：

npm i @lljj/vue3-form-ant

imprt VueForm from "@lljj/vue3-form-ant";

使用

ts文件 

test.ts

export const data = {"schema": {"title": "测试注册表单","description": "A simple form example.","type": "object","required": ["firstName","lastName"],"ui:order": ["lastName","firstName","*","password"],"properties": {"firstName": {"type": "string","title": "First name","default": "Jun"},"lastName": {"type": "string","title": "Last name","ui:options": {"description": "请输入你的姓"},"err:required": "必须输入Last Name"},"price": {"type": "string","description": "最多输入两位小数点，最大值 999999.99","title": "价格","format": "price"},"age": {"type": "integer","title": "Age","maximum": 80,"minimum": 16},"bio": {"type": "string","title": "Bio","minLength": 10},"password": {"type": "string","title": "Password","minLength": 3},"telephone": {"type": "string","title": "Telephone","minLength": 10}}},"uiSchema": {"ui:description": "简单表单例子（这里通过UiSchema覆盖了默认description描述配置）","firstName": {"ui:title": "名字","ui:description": "比如：李白姓李、孙尚香姓孙、马可波罗姓马可波","ui:emptyValue": "","ui:options": {"placeholder": "请输入你的姓","attrs": {"autofocus": true}}},"bio": {"ui:options": {"placeholder": "请输入你的签名","type": "textarea","rows": 6}}},'errorSchema': {"bio": {"err:minLength": "签名最小长度10个字符串222"}},"formFooter": { "okBtn": "保存2" },"formProps": {"layoutColumn": 2,"labelPosition": "left","labelWidth": "156px","labelSuffix": "："}
}

vue 文件

<template><div class="layout-padding"><div class="layout-padding-auto layout-padding-view"><div style="overflow-y: auto;"><VueFormv-model="formData":schema="data2.schema":formFooter="data2.formFooter":formProps="data2.formProps":uiSchema="data2.uiSchema":errorSchema="data2.errorSchema"@submit="handleSubmit"></VueForm></div></div></div>
</template><script setup lang="ts">
//  使用
import VueForm from "@lljj/vue3-form-element";
import {data} from "./test.ts";import { ref } from "vue";
// 表单数据
const formData = ref({});// 表单提交
const handleSubmit = (data: any) => {console.log(data);
};
const data2=reactive(data);
</script>

效果如下：

 

使用地址：https://form.lljj.me/schema-generator.html#/index