m-dynamic-form

m-dynamic-form

基于 Vue 3 + Element Plus + vxe-table 的动态表单组件，可通过 schema 配置渲染表单项。

安装

npm install m-dynamic-form element-plus @element-plus/icons-vue vue-i18n vxe-table @vxe-ui/core xe-utils

vxe-table@4.22+ 必须同时安装 @vxe-ui/core（以及已有的 xe-utils），否则 Vite 预构建会报 Could not resolve "@vxe-ui/core"。

使用

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
import BaseForm, { configureDynamicForm, zhCN, enUS } from 'm-dynamic-form'
import 'm-dynamic-form/style.css'

const i18n = createI18n({
  legacy: false,
  locale: 'zh-CN',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS,
  },
})

// 可选：配置文件下载（上传/表格模板下载）
configureDynamicForm({
  downloadFile: async (id) => {
    // 返回 Blob，或 { code, msg }
    return await fetch(`/api/file/${id}`).then((r) => r.blob())
  },
})

createApp(App).use(ElementPlus).use(VxeUITable).use(i18n).mount('#app')

<template>
  <BaseForm ref="formRef" :model="model" :schemas="schemas" />
</template>

本地开发

npm install
npm run dev          # playground
npm run build        # 产出 dist，用于发布 npm
npm run type-check

导出

• BaseForm：动态表单组件
• configureDynamicForm：包级配置（如下载）
• zhCN / enUS：表单文案，可合并进业务 i18n
• 类型与工具：FormSchema、parseFileListValue 等