PowerfulForm

文档中大写开头的表示类型 例如：PowerfulTableHeaderProps.type 表示 PowerfulTableHeaderProps 类型下的 type 属性 DEMO

语言

对于语言方面组件是默认使用 英语 因为 element-plus 默认是使用英语，不引用中文包的主要原因是避免增大体积。组件内部语言跟随 element-plus。部分提示文字语言，组件内部也支持 中、英 文，如果你需要支持更多语言或者更改组件内部的语言，可以在 use(PowerfulForm, { local: 您的语言变量 }) 替换。也可以参考我们提供的 demo 实现。

继承关系

表单配置可以和表格配置重合，可以说配置一个表格的 headers 再加上一两行数据即可配置一个表单

TIP

下面 index.vue 中演示了基础的继承关系， extend-table 传递 true 时，form-view 组件内部自动回去 powerful-table 获取 header 配置（请保证 powerful-table ref 为 PTable 。当然如果你 powerful-table ref 为其他值时，请保证 extend-table 与 powerful-table ref 一致）

Details

index-data.tsindex-data.tsxindex-data.tsxindex.vue

// powerful-table（表格） props
export const columns: PowerfulTableHeader<Lists>[] = [
  {
    label: '制造商',
    width: 200,
    overflowTooltip: true,
    isShowOrFilterColumn: 'filter',
    defaultFilter: true,
    headerAlign: 'left',
    props: [
      {
        type: 'href',
        prop: 'manufacturerHref',
        text: '厂商：',
        data: setData<'href', Lists>({
          text: (row: any) => row.manufacturer,
          property: {
            underline: true,
          },
        }),
      },
      {
        prop: 'icon',
        type: 'iconfont',
        text: '车标：',
        data: setData<'iconfont', Lists>({
          class: 'viteIcon',
          style: {
            height: '40px',
            lineHeight: '40px',
            fontSize: '40px',
          },
        }),
      },
    ],
  }
]

tsx

// powerful-form（表单） props formItems
export const formItems: FormItem[] = [
  {
    text: '制造商:',
    prop: 'manufacturer',
    type: FormTypeEnum.Input,
  },
  {
    type: FormTypeEnum.Select,
    prop: 'brand',
    text: '品牌：',
    data: {
      options: [
        { label: 'Audi', value: '奥迪' },
        { label: 'BMW', value: '宝马' },
      ],
    },
  },
  {
    text: '收藏：',
    prop: 'switchVal',
    basis: '45%',
    type: FormTypeEnum.Switch,
  },
  {
    prop: 'price',
    text: '售价：',
    type: FormTypeEnum.Input,
  },
  {
    type: FormTypeEnum.DatePicker,
    text: '发售日期：',
    prop: 'data',
  },
  {
    type: FormTypeEnum.DatePicker,
    text: '日期区间：',
    prop: 'dateRange',
  },
  {
    text: '简介',
    prop: 'content',
  },
]

tsx

// 表格结合表单
export const columns: PowerfulFormPTHeaders[] = [
  {
    label: '制作厂', //显示的名称
    headerAlign: 'left',
    props: [
      {
        type: 'href',
        prop: 'manufacturerHref',
        text: '厂商：',
        data: {
          text: (row: any) => row.manufacturer,
          property: {
            underline: true,
          },
        },
        formItem: {
          type: FormTypeEnum.Select,
          data: {
            options: [
              {
                label: 'a1',
                value: '1',
                options: [
                  {
                    label: 'a3',
                    value: '3',
                  },
                  {
                    label: 'a3',
                    value: '3',
                  },
                ],
              },
              {
                label: 'a2',
                value: '2',
                options: [
                  {
                    label: 'a3',
                    value: '3',
                  },
                  {
                    label: 'a3',
                    value: '3',
                  },
                ],
              },
            ],
            slots: {
              // 自定义插槽
              default: (h) => <div>自定义插槽</div>,
            },
          },
        },
      },
      {
        prop: 'icon',
        type: 'iconfont',
        text: '车标：',
        data: {
          class: 'viteIcon',
          style: {
            height: '40px',
            lineHeight: '40px',
            fontSize: '40px',
          },
        },
        formItem: {},
      },
    ],
  }
]

html

<template>
  <PowerfulTable
    ref="PTable"
    :list-request="{
      listApi,
    }"
    :header="header"
  />

  <PowerfulForm ref="FView" :extend-table="true"/>
<template>

<script>
  // ...
</script>

使用方法

npmyarnpnpm

npm i el-plus-powerful-form

yarn add el-plus-powerful-form

pnpm add el-plus-powerful-form

main.tsapp.vuehtml

import PowerfulForm from "el-plus-powerful-form";
import { LangKey } from "el-plus-powerful-form";

const app = createApp(App);
app.use(PowerfulForm, {
  // 更改组件默认语言
  locale: {
    en: {
    [LangKey.VerifyPhone]: '手机号验证失败',
    [LangKey.VerifyEmail]: '邮箱地址验证失败',
    [LangKey.VerifyEmpty]: `数据不能为空`,
      // ...
    },
    'zh-cn': {
    [LangKey.VerifyPhone]: '手机号验证失败',
    [LangKey.VerifyEmail]: '邮箱地址验证失败',
    [LangKey.VerifyEmpty]: `数据不能为空`,
      // ...
    },
  },
});
app.mount("#app");

vue

<PowerfulForm :list="list" :header="header" />

Config Attributes

通过 app.use 注入

属性名	说明	TS类型	默认值
`locale`	内部部分文字语言查看可选值	`LangPackages`	-

Attributes

属性名	说明	TS类型	默认值
`showType`	显示类型，当为 `query` 时不会向 `el-form` 传递 `rule`	`string`	-
`extendTable`	是否继承表格。如果是 `true` 的话自动查找 `table` 组件 `ref` 名称为 `PTable` 的，也可以传递 `table` 的 `Ref` 名称	`boolean \| string`	`false`
`formItems`	表单配置	`array`	-
`formDataDefault`	表单默认值	`object`	-
`disabled`	表单是否禁用	`boolean`	-
`property`	`el-form` 组件 `props`	`object`	-
`apis`	`apis` 接口合集	`function \| object`	-

Apis

TIP

支持对象格式，也支持函数形式。
PowerfulForm 暴露了 submitForm 函数。调用 submitForm 函数时在校验通过后会自动调用 apis （apis 时函数时直接触发，当 apis 时对象的时候会调用 apis 属性为 showType 的值。也就是 apis[showType] ）。submitForm 函数返回一个 promise

html

<PowerfulForm ... :apis="() => Promise.resolve({ data: [] })" />
<PowerfulForm ... showType="update" :apis="{
 'added': () => Promise.resolve({ data: [] })
 'update': () => Promise.resolve({ data: [] })
}" />

<!-- 请保证您的 apis 中的函数有一个形参，这样的话，组件内部会将 formData 数据传递进去 -->
<PowerfulForm ... :apis="requestAdd" />

<script setup>
const requestAdd = (params) => {
  console.log(params) // 这里的 params 为 formData
  return Promise.resolve({ data: [] })
}
// ...
</script>

FormItems

属性名	说明	TS类型	默认值
`prop`	`el-form-item prop` 属性。配合表格组件时，默认读取 `PowerfulTableHeaderProps.prop`	`string`	-
`text`	`el-form-item label` 属性。配合表格组件时，默认读取 `PowerfulTableHeader.label`	`string`
`slotName`	插槽名称。配合表格组件时，默认读取 `PowerfulTableHeaderProps.slotName`	`string`
`render`	渲染函数. 传递 `render` 时，不在根据 `type` 渲染	`function`	-
`basis`	`CSS` 中 `flex-basis` 属性，其元素宽度占比，当两个相邻的对象 `basis` 为 `48%` 时，则这个两个元素在一行	`string`	`'100%'`
`type`	默认 `input` 类型	`enum`
`data`	`PowerfulTableHeaderProps.type === FormItem.type` 则继承 `PowerfulTableHeaderProps.data`。不同的 `type` `data` 值不一样	`FormType['xxx']`
`showType`	显示类型，部分数据只在新增表单显示，部分只在修改表单显示。默认全部显示。如果传递此值将和表单组件 `props` 中的属性`showType` 进行比较，相等则显示	`string \| string[]`	-
`defaultData`	表单数据数据默认值，默认寻找表单组件 `props` 中的属性`formDataDefault` 相应的 `prop`	`any`	-
`rule`	规则校验，可以传递完整的 `rule` 规则，也可以传递部分规则例如：`rule = true` 开启必填校验；`rule = [1, 10]` 开启长度校验；`rule = 'phone'` 开启手机号校验；	`string \| boolean \| array`	-
`property`	`formItem props` 请参见 `Element Plus` 文档	`Partial<FormItemProps>`	-

Type is Input（default） or Textarea

属性名	说明	TS类型	默认值
`symbol`	插槽的内容	`string`	-
`style`	样式	`object`	-
`slot`	如果只需要一个插槽的话可以使用 `slot` 参数，配合 `symbol` 实现	`'prepend' \| 'append' \| 'prefix' \| 'suffix'`	-
`on`	事件对象，接收下面 `Event` 相应方法名称	`object`	-
`slots`	`el-input` 组件 `插槽`	`object`	-
`property`	属性扩展字段 (支持 `el-input` 组件所有属性名)	`object \| function`	-

Input slots 说明

插槽名	类型
`prefix`	`SlotFun`
`suffix`	`SlotFun`
`prepend`	`SlotFun`
`append`	`SlotFun`

Input Event

方法名	说明	类型
`blur`	失焦	`function`
`change`	数据更改	`function`
`input`	输入	`function`
`focus`	聚焦	`function`
`clear`	清除	`function`

Input Interface

type SlotFun = (
  h: typeof createElement,
  row: PowerfulFormData['formData'],
  index: number
) => string | number | VNode | JSX.Element

type InputEmit<T = {
    /**
     * 表单配置项数据
     */
    formItem: FormItem<FormTypeEnum.Input>
    /**
     * 索引
     */
    index: number
    /**
     * 表单数据
     */
    formData: PowerfulFormData['formData']
  }> = {
  blur?: (params: T, ...arg: any) => void
  change?: (params: T, ...arg: any) => void
  input?: (params: T, ...arg: any) => void
  focus?: (params: T, ...arg: any) => void
  clear?: (params: T, ...arg: any) => void
}

Type is Switch

属性名	说明	TS类型	默认值
`style`	样式	`object`	-
`on`	事件对象，接收下面 `Event` 相应方法名称	`object`	-
`property`	属性扩展字段 (支持 `el-switch` 组件所有属性名)	`object \| function`	-

Switch Event

方法名	说明	类型
`change`	数据更改	`function`

Switch Interface

type SwitchEmit<T = {
    /**
     * 表单配置项数据
     */
    formItem: FormItem<FormTypeEnum.Switch>
    /**
     * 索引
     */
    index: number
    /**
     * 表单数据
     */
    formData: PowerfulFormData['formData']
  }> = {
  change?: (params: T, ...arg: any) => void
}

Type is Select

属性名	说明	TS类型	默认值
`style`	样式	`object`	-
`options`	选项的数据源 options	`array`	-
`on`	事件对象，接收下面 `Event` 相应方法名称	`object`	-
`slots`	`el-selectV2` 组件 `插槽`	`object`	-
`property`	属性扩展字段 (支持 `el-selectV2` 组件所有属性名)	`object \| function`	-

Select Event

方法名	说明	类型
`change`	数据变化	`function`
`focus`	聚焦事件	`function`
`blur`	失焦事件	`function`
`clear`	清除事件	`function`
`remove-tag`	删除标签事件，多选情况下存在	`function`
`visible-change`	显示隐藏事件	`function`

Select Interface

type SwitchEmit<T = {
    /**
     * 表单配置项数据
     */
    formItem: FormItem<FormTypeEnum.Select>
    /**
     * 索引
     */
    index: number
    /**
     * 表单数据
     */
    formData: PowerfulFormData['formData']
  }> = {
  change?: (params: T, ...arg: any) => void
  focus?: (params: T, ...arg: any) => void
  blur?: (params: T, ...arg: any) => void
  clear?: (params: T, ...arg: any) => void
  'remove-tag'?: (params: T, ...arg: any) => void
  'visible-change'?: (params: T, ...arg: any) => void
}

Type is Rate

属性名	说明	TS类型	默认值
`style`	样式	`object`	-
`on`	事件对象，接收下面 `Event` 相应方法名称	`object`	-
`options`	单选按钮数据参考 `radio props`	`array`	-
`property`	属性扩展字段 (支持 `el-radio-group` 组件所有属性名)	`object \| function`	-

Rate Event

方法名	说明	类型
`change`	数据更改	`function`

Rate Interface

interface RadioOptions {
  /**
   * Radio 自定义内容，没有则显示 label
   */
  text?: string
  /**
   * Radio label
   */
  label: string
  /**
   * 是否禁用复选框形式的表单
   */
  disabled?: FunBol<FormTypeEnum.Checkbox>
  /**
   * 是否显示边框
   */
  border?: boolean
  /**
   * 表单的名称
   */
  name?: string
}

type RateEmit<T = {
    /**
     * 表单配置项数据
     */
    formItem: FormItem<FormTypeEnum.Rate>
    /**
     * 索引
     */
    index: number
    /**
     * 表单数据
     */
    formData: PowerfulFormData['formData']
  }> = {
  change?: (params: T, ...arg: any) => void
}

Type is Radio

属性名	说明	TS类型	默认值
`style`	样式	`object`	-
`options`	单选按钮数据参考 `radio props`	`array`	-
`on`	事件对象，接收下面 `Event` 相应方法名称	`object`	-
`property`	属性扩展字段 (支持 `el-radio-group` 组件所有属性名)	`object \| function`	-

Radio Event

方法名	说明	类型
`change`	数据变化	`function`

RadioDataEmit Interface

type RadioDataEmit<T> = {
  /**
   * change 事件
   */
  change?: ((parameter: T, ...arg: any) => void) | undefined
}

Type is Checkbox

属性名	说明	TS类型	默认值
`style`	样式	`object`	-
`options`	单选按钮数据参考 `radio props`	`array`	-
`on`	事件对象，接收下面 `Event` 相应方法名称	`object`	-
`property`	属性扩展字段 (支持 `el-check-group` 组件所有属性名)	`object \| function`	-

Checkbox Event

方法名	说明	类型
`change`	数据变化	`function`

Checkbox Interface

type CheckboxDataEmit = RadioDataEmit<{
  /**
   * 表单配置项数据
   */
  formItem: FormItem<FormTypeEnum.Checkbox>
  /**
   * 索引
   */
  index: number
  /**
   * 表单数据
   */
  formData: PowerfulFormData['formData']
}>

Type is DatePicker

属性名	说明	TS类型	默认值
`style`	样式	`object`	-
`on`	事件对象，接收下面 `Event` 相应方法名称	`object`	-
`slots`	`el-date-picker` 组件 `插槽`	`object`	-
`property`	属性扩展字段 (支持 `el-date-picker` 组件所有属性名)	`object \| function`	-

DatePicker slots 说明

插槽名	类型
`default`	`SlotFun`
`'range-separator'`	`SlotFun`

DatePicker Event

方法名	说明	类型
`change`	用户确认选定的值时触发	`function`
`blur`	在组件 Input 失去焦点时触发	`function`
`focus`	在组件 Input 获得焦点时触发	`function`
`calendar-change`	在日历所选日期更改时触发	`function`
`panel-change`	当日期面板改变时触发。	`function`
`visible-change`	当 DatePicker 的下拉列表出现/消失时触发	`function`

DatePicker Interface

type DatePickerEmit<T = {
    /**
     * 表单配置项数据
     */
    formItem: FormItem<FormTypeEnum.DatePicker>
    /**
     * 索引
     */
    index: number
    /**
     * 表单数据
     */
    formData: PowerfulFormData['formData']
  }> = {
  change?: ((parameter: T, ...arg: any) => void) | undefined
  blur?: ((parameter: T, ...arg: any) => void) | undefined
  focus?: ((parameter: T, ...arg: any) => void) | undefined
  'calendar-change'?: ((parameter: T, ...arg: any) => void) | undefined
  'panel-change'?: (parameter: T, ...arg: any) => void
  'visible-change'?: (parameter: T, ...arg: any) => void
}

Type is Slot

属性名	说明	TS类型	默认值
-	-	-	-

Slots

插槽名	说明
`[slotName]`	表单内自定义的插槽名称

Utils/Hooks

函数名	说明	TS类型
`getType`	获取变量类型	`function`
`deepClone`	深度克隆	`function`
`isTypeProtect`	类型保护搜索 "用户自定义的类型保护"	`function`
`useGetRefs`	同步向上获取 `ref` 实例	`function`
`useAsyncGetRefs`	异步向上获取 `ref` 实例	`function`

Expose

属性名	说明	类型
`$slots`	所传递的插槽名称	`object`
`$attrs`	所传递的属性并且非 `props` 定义的属性名. 文档	`object`
`$refs`	表单 `Ref` 实例	`object`
`props`	组件 `props`	`object`
`powerfulFormData`	`PowerfulForm` 组件数据	`object`
`formItems`	`formItems` 更具 `props.showType` 过滤后的数据	`array`
`submitForm`	提交校验函数	`function`
`visibleFormTrigger`	控制表单显隐	`function`
`refreshRender`	刷新从表格继承数据	`function`

PowerfulForm ​

标签 ​

语言 ​

继承关系 ​

使用方法 ​

Config Attributes ​

Attributes ​

Apis ​

FormItems ​

Type is Input（default） or Textarea ​

Input slots 说明 ​

Input Event ​

Input Interface ​

Type is Switch ​

Switch Event ​

Switch Interface ​

Type is Select ​

Select Event ​

Select Interface ​

Type is Rate ​

Rate Event ​

Rate Interface ​

Type is Radio ​

Radio Event ​

RadioDataEmit Interface ​

Type is Checkbox ​

Checkbox Event ​

Checkbox Interface ​

Type is DatePicker ​

DatePicker slots 说明 ​

DatePicker Event ​

DatePicker Interface ​

Type is Slot ​

Slots ​

Utils/Hooks ​

Expose ​