element-plus-formkit

基于 ElementPlus 对表单组件进行组合包装，通过数据流的方法对表单数据进行处理，便于快速开发。

中文 | English

要查看实时示例和文档，请访问文档。

安装项目

pnpm add element-plus-formkit@latest

使用

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import 'element-plus-formkit/dist/index.css'

const app = createApp(App);

app.mount('#app');

基本使用

在页面中使用 Formkit 组件

<template>
  <FormKit :config="config" v-model="FormData" />
</template>

<script setup lang="ts">
import { FormKit } from 'element-plus-formkit'

const FormData = reactive({})

const config = ref([
  {
    type: 'input',
    key: 'name',
    label: '姓名'
  },
  {
    type: 'select',
    key: 'class',
    label: '班级',
    options: []
  }
])
</script>

registerModule

Formkit 允许您注册自定义组件

import { registerModule } from 'element-plus-formkit';

import CustomEditor from './components/CustomEditor.vue'
registerModule('customEditor', CustomEditor)

// formkit item config
{
    type: 'customEditor', // Using custom modules
    key: 'content',
    label: 'Article'
}

setConfigure

Formkit 接受大量全局配置参数，如文件上传网络地址等。

// 设置全局配置（可在安装前或安装后设置）
import { setConfigure } from 'element-plus-formkit'
import type { UploadRequesterOptions } from 'element-plus-formkit/types/formkit-types'
import 'element-plus-formkit/dist/index.css'

setConfigure('upload', async (file: File, options: UploadRequesterOptions) => {
    const UploadFormData = new FormData()
    UploadFormData.append('file', file)
    const response = await useAxios().post("/default/oss/upload", UploadFormData, {
        headers: { 'Content-Type': 'multipart/form-data' },
        onUploadProgress: (progressEvent) => {
            const total = progressEvent.total || 1,
                loaded = progressEvent.loaded;
            options.onProgress?.({ total, loaded })
        }
    })
    return response
})

请注意，formkit 依赖于 elementplus 表单进行开发，您需要在系统中引入 elementplus。

Component Attributes

注意： columns设置为字符串'auto'后label-width将失效，失效后的计算结果为0px

Config Attributes

Config type explain

FormKit Slots

Exposes