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

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

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

 

文档：https://vue-json-schema-form.lljj.me/zh/guide/basic-config.html#ui-schema

安装：

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;">
        <VueForm
          v-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

 

单独给input 设置宽度 h4

// 你的 data 配置中的 uiSchema 部分
uiSchema: {
  // 针对输入框字段 "string_1754895321686x0" 设置宽度
  "string_1754895321686x0": { 
    "ui:options": {
      // 通过 style 直接设置宽度（支持 px、%、rem 等）
      "style": { "width": "300px" } // 固定宽度 300px
      // 或百分比："width": "50%"（占父容器的 50% 宽度）
    },
    // 或通过 attrs 传递原生 HTML 属性（效果相同）
    // "ui:attrs": { "style": "width: 300px" }
  },
  // 其他字段配置...
}