element-form-render v0.5.0

简介

写JSON创建form (适用于ElementPlus + TypeScript + Vue3)

安装

npm i element-form-render

使用

1. 首先在您的项目全局的 main.ts 中设置表单生成器axios的baseURL(主要是避免每个页面都设置)

import {setAxiosConfig} from "element-form-render/src";
setAxiosConfig({
    timeout: 50000,
    baseURL: "https://domain.com", // 如果想在表单组件使用相对URL，需要设置 baseURL
    headers: { // 根据自己的需求设置headers，如无特殊需求可不设置
        "Authorization": "token",
        "Content-Type": "application/json"
    }
});

2. 通过本组件约定的结构定义编写JSON结构,创建表单

<template>
  <div>
    <form-render :json="json" @on-submit="handleSubmit" />
  </div>
</template>
<script setup lang="ts">
// 您可以从"element-form-render/src" 中引入本组件所有的组件、类型、类库和函数
import {FormRender} from "element-form-render/src";
import type {FormStructure} from "element-form-render/src/types";
import {reactive} from "vue";
const json = reactive<FormStructure>({
    type: "create",
    name: "test",
    title: "title", //设置为空则不显示标题
    api: "/api/form/create",// 不设置的话可以使用 @on-submit 获取表单提交的数据
    elements : [// 二维数组进行布局，第一维是行 每一行内可以放置多个组件（注意：使用了Element的24等分格，注意个数适配）
        [
            {
              type:"input",
              name:"title",
              label:"网站名称",
              validator:["required"]
            },
        ],
        [
            {
                type:"input",
                name:"website",
                label:"网站网址",
                width:"300px",
                prefix:"https://www",
                suffix:".com",
                validator:["required"]
            }
       ],
       [
            {
              type:"radio",
              name:"type",
              label:"网站类型",
              source:{
                type:"static",
                 options:[
                     {label:"门户站", value:"portal"},
                     {label:"资源站", value:"source"}
                 ]
              }
            },
            {
                type: "checkbox",
                name: "tags",
                label: "网站类型",
                source: {
                    type: "ajax",
                    options: {
                      api: "/api/dict",
                      params: {section: "site_tag"},
                      labelField: "name",
                      valueField: "id"
                    }
                }
            },
        ]
    ]
});

// 当表单 api 不设置时 定义获取数据的函数
const handleSubmit = (data) => {
    console.log(data);
}
</script>
<style scoped>
</style>

3. FormStructure 类型定义

export type FormStructure = {
    type: 'create' | 'update' | 'customer',// 当值为”update“时，表单将会自动请求api获取需要修改的数据
    name: string,
    title: string,
    elements: FormElementField[][], // 字段布局
    api?: string,// 表单数据提交URL
    primary_key?: string, // 修改数据时数据主键名
    primary_value?: string|number,// 修改数据时数据主键值
    config?: { // 表单设置项
        labelWidth?: number,
        labelPosition?: 'left' | 'right' | 'top',
        showSubmit?: boolean,
        submitText?: string,
        showReset?: boolean,
        resetText?: string,
    },
    dynamicData?: Record<string, any>,// 当使用自定义字段组件时，可以通过该对象写数据
    appendData?: Record<string, any>
}

API

1. 属性

2. 事件方法

3. 支持的字段类型

4. 支持的validator

require
required
string
integer
float
alpha
alphaNum
alphaDash
number
upper
lower
url
email
mobile (中国国内手机号码)
phone (座机号码)
telephone 国内固话+国内手机号(不含400 800电话)
bank_code 银行账号 (非严谨)
license_code 企业统一信用代码
chinese 汉字
amount 金额
idcard(CHN)
date
datetime
time
length:36
length:1:10
max:100
min:100
between:1:10
gt:1
gte:2
lt:2
lte:2
regexp:^\d{6}$