elp-form

🚀Easier to build Form based on element-plus

English | 中文

• Preview

🚀 Features

• ⚡ Layout: Through the layoutConfig list configuration, you can customize the layout of the form row, col
• 🐱 Component basic attributes are retained: Keep all the attribute configuration of the element-plus Form, Input and other components, flexibly configure the attributes of a single form item
• 🎈 Form input verification: Through the rules configuration, you can customize the form verification rules, support all rules of element-plus Form
• 🥏 Built-in submission and reset: Submit the form with one click, reset the form with one click
• 🚩 Slots and hooks: Through the hooks property and the slots property, you can customize the form slots and hooks

📦 Install

npm install elp-form
or
pnpm add elp-form
or
yarn add elp-form

🦄 Usage

import { ElpForm } from "elp-form";

<ElpForm
  :formItems="formItems"
  :rules="rules"
  :submitLoading="submitLoading"
  :layoutConfig="layoutConfig"
  @resetForm="resetForm"
  @search="search"
  />

Configuration: formItems(required)

• Support component types: input, select, switch, TimeSelect, inputNumber, radio, upload

const formItems =  reactive([
  {
    label?: string;,  /** Form label text `optional` */
    type: string, /** Form label type(input,select,date) `required` */
    value:string,  /** Form label binding value `required` */
    defaultValue?: string, /** Form label default value `optional` */
    attribute: {
      placeholder?: string, /** Form label placeholder `optional` */
      maxlength?: number, /** Form label maximum length `optional` */
      ... /** Form label other attributes `optional` */
    },
    rowIndex?: number, /** Form label row index, can be controlled by layoutConfig `optional` */
    hook?: {
      change?: (value: any) => void, /** Form label change event `optional` */
      ... /** Form label other hooks `optional` */
    },
    slots?: {
      prepend?: string, /** Form label prepend slot `optional` */
      append?: string, /** Form label append slot `optional` */
      ... /** Form label other slots `optional` */
    },
  },
  ...

]);

Configuration: submitLoading(optional)

• Loading status when submitting the form

import { ref } from "vue";
const submitLoading = ref(false);

Configuration: rules(optional)

• Verify whether the user's input meets the specifications (same as element-plus rules)

import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
const rules = reactive<FormRules>({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
  ]
});

Configuration: layoutConfig(optional)

• Configure the form layout
• rowAttr is the same as element-plus layout-row
• colAttr is the same as element-plus layout-col

const layoutConfig = [
  {
    rowAttr: {
      gutter: 0 /** Row attribute `optional` */
      ... /** Row attribute `optional` */
    },
    cols: [
      {
        rowIndex: 0, /** Corresponding rowindex of formItems `required` */
        colAttr: {
          span: 8 /** Column attribute `optional` */
          ... /** Column attribute `optional` */
        }
      },
      ...
    ]
  },
  ...
];

Configuration: hooks(optional)

• Configure the form hook function to provide all the hook functions of the component
• Through the hooks property, you can customize the form component hook

const formItems = reactive([
{
  label?: string;,  /** Form label text `optional` */
  type: 'switch', /** Form label type(input,select,date) `required` */
  ...,
  hooks: {
    change: (val: any) => {
      console.log('switch11', val)
      ElMessage({
        message: val ? 'Open' : 'Close',
        type: 'success',
      })
    },
  },
  ...
},
...
]);

Configuration: slots(optional)

• Configure the form slot function to provide all the slot functions of the component
• Through the slots property, you can customize the form component slot

const formItems = reactive([
{
  label?: string;,  /** Form label text `optional` */
  type: 'input', /** Form label type(input,select,date) `required` */
  ...,
  slots: {
    prepend: () => {
      return <span>prepend</span>
    },
    append: () => {
      return <span>append</span>
    },
  },
  ...
},
...
]);