proForm 数据表单

只需一个配置对象即可实现基础数据表单功能，其中 type 支持 element-plus 组件(不需要带 el-)、Core 核心组件、内置组件及自定义组件

基本用法

<script setup lang="ts">
import type { BasicForm } from '@/types/form'

const formData = reactive<any>({})
const formConfig = reactive<BasicForm>({
  formItems: [
    {
      label: '用户名',
      value: '',
      name: 'name',
      type: 'input', // type支持element-plus组件(不需要带el-)、Core核心组件、内置组件及自定义组件
      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      search: true,
      props: {
        // 组件属性
      },
      events: {
        // 组件事件
      },
    },
  ],
})

const create = (data: any) => {
  console.log(data)
}
const update = (data: any) => {
  console.log(data)
}
const proFormRef = ref<any>()
const handleSave = () => {
  // 调用proForm提供的提交表单方法
  proFormRef.value.submit()
}
</script>

<template>
  <pro-form
    :formConfig="formConfig"
    :formData="formData"
    :create="create"
    :update="update"
    ref="proFormRef"
  >
  </pro-form>
  <div class="text-center">
    <el-button type="primary" @click="handleSave">保存</el-button>
  </div>
</template>

属性

参数	说明	类型	默认值	可选值
formConfig（必传）	表单配置,具体配置见下面	BasicForm
formData（必传）	表单数据（编辑时回显的数据）	Object
create（必传）	表单新增方法(参数 data:表单数据)	Function
update（必传）	表单编辑方法(参数 data:表单数据)	Function
formSubmit（如果传此参数 create 和 update 就不需要传）	自定义表单提交方法(参数 data:表单数据)	Function

BasicForm

type BasicForm = {
  props?: Partial<FormProps> // 表单属性（element-plus的form属性）
  route?: any // 路由(默认是弹窗方式，如果要打开一个新页面，可以配置此项)
  span?: number // 栅格占位
  disabled?: boolean // 是否禁用
  formItems: BasicFormItem[]
}
type BasicFormItem = {
  label: string // 表单标签
  value: any // 表单值
  name: string // 接口需要的字段名
  type: string // 表单类型
  placeholder?: string
  children?: Array<BasicFormItem>
  options?: Array<any> // 下拉框选项
  search?: boolean // 是否出现在搜索框
  required?: boolean // 是否必填
  rules?: FormItemRule | FormItemRule[] // 表单验证规则
  span?: number // 栅格占位
  props?: object // 组件属性
  events?: object // 组件事件
  request?: Function // 异步请求数据
  slots?: Array<FormSlot> // 自定义插槽
  notFormItem?: boolean // 是否为表单项
  hidden?: boolean // 是否隐藏
  extra?: any // 额外信息
  formItemProps?: object // formItem属性
  formItemSlots?: Array<FormSlot> // formItem插槽
}
type FormSlot = {
  name: string // 插槽名称
  alias: string // 插槽别名
}

方法

方法名	说明	类型	参数
submit	表单提交	Function

Exposes

名称	说明	类型	参数
submit	表单提交	Function