element-form-render

Introduction

Create Vue Form by JSON (for ElementPlus + TypeScript + Vue3)

Install

npm i element-form-render

Usage

1. Add below code to main.ts to initialize axios params which used in form render

import { setAxiosConfig, setConfig, setAxios } from "element-form-render";

// set your axios instance that must be implements 'RequestInterface' interface if you don't want to use the buildin request library
setAxios(request);
// It you want to use the buildin request lib,
// you should config the axios parameters like bellow
setAxiosConfig({
  timeout: 50000,
  baseURL: "https://domain.com", //
  headers: { // set headers when you need
    "Authorization": "token",
  }
});
setConfig({
  static_url: "https://static.domain.com", // Static resource host domain
  base_url: "https://api.domain.com", // Api data, File Upload domain
});

2. Follow the JSON struct rules to create form

<template>
  <div>
    <form-render :json="json" @on-submit="handleSubmit" />
  </div>
</template>
<script lang="ts" setup>
  import { type FormStructure } from 'element-form-render'
  import { ref } from 'vue'

  const json = ref<FormStructure>({
    type: 'create', // create OR update OR customer
    config: {
      cols: 3 // Cols number, Default is 1
    },
    title: 'title', // Form title, Leave empty to hide title
    api: '/form/create',// Leave empty that can use @on-submit to catch form data
    elements: [
      // Element layout will follow the config.cols with fill mode
      {
        type: 'input',
        name: 'title',
        label: 'Site Name',
        validator: ['required']
      },
      {
        type: 'input',
        name: 'website',
        label: 'Site URL',
        width: '300px',
        prefix: 'https://www',
        suffix: '.com',
        validator: ['required']
      },
      {
        type: 'radio',
        name: 'type',
        label: 'Type',
        source: {
          type: 'static',
          options: [
            { label: 'Portal', value: 'portal' },
            { label: 'Software', value: 'source' }
          ]
        }
      },
      {
        type: 'checkbox',
        name: 'tags',
        label: 'Tags',
        source: {
          type: 'ajax',
          options: {
            api: '/api/dict',
            params: { section: 'site_tag' },
            labelField: 'name',
            valueField: 'id'
          }
        }
      }
    ]
  })

  // 当表单 api 不设置时 定义获取数据的函数
  function handleSubmit(data: Record<string, any>) {
    console.log(data)
  }
</script>

3. FormStructure definition

type FormStructure = {
  type: 'create' | 'update' | 'customer',// If type is update, the form will load data automatily
  title: string,
  elements: FormElementField[], // Form Elements
  api?: string,// form action
  primary_key?: string, // Primary key name
  primary_value?: string | number,// primary key valye
  axios?: RequestInterface,// Overwrite the buildin request instance
  base_url?: string,// Overwrite global config: base_url
  static_url?: string,// Overwrite global config: static_url
  config?: { // Form config
    size?: '' | 'default' | 'large' | 'small',
    gutter?: number,
    cols?: number,
    labelWidth?: number,
    labelPosition?: 'left' | 'right' | 'top',
    showSubmit?: boolean,
    submitText?: string,
    showReset?: boolean,
    resetText?: string,
  },
}

API

1. 属性

2. 事件方法

3. 实例方法

4. 支持的字段类型，详细配置见类型声明文件

4. Supported validators

type Validators =
  | 'required'
  | 'string'
  | 'integer'
  | 'float'
  | 'alpha'
  | 'number'
  | 'upper'
  | 'lower'
  | 'alphaNum'
  | 'alphaDash'
  | 'url'
  | 'email'
  | 'mobile' // China mobile phone number rule
  | 'idcard' // China idcard rule
  | 'age'
  | 'date'
  | 'datetime'
  | 'phone' // 座机号码
  | 'telephone' // 国内固话+国内手机号(不含400 800电话)
  | 'license_code' // 企业统一信用代码
  | 'bank_code' // 银行账号 (非严谨)
  | 'amount' // Amount
  | 'chinese' // Chinese
  | `length:${number}` // static length
  | `length:${number},${number}` // length range
  | `regexp:${string}` // RegExp
  | `between:${number},${number}` // Number range
  | `gt:${number}` // 大于
  | `>:${number}` // 大于
  | `lt:${number}` // 小于
  | `<:${number}` // 小于
  | `gte:${number}` // 大于等于
  | `>=:${number}` // 大于等于
  | `lte:${number}` // 小于等于
  | `<=:${number}` // 小于等于
  | Required<FormItemRule>['validator'] // 自定义验证函数