np-form Custom Footer

Customize the footer through the footer prop.

浏览器不支持，请手动复制 footer.en.vue

<template>
  <np-form :option="option" />
</template>
<script setup lang="tsx">
import type { FormOption } from 'naive-plus'
import { NButton } from 'naive-ui'

const option: FormOption = {
  footer: {
    submitBtn: {
      props: {
        block: true,
      },
    },
    resetBtn: false,
    prefixRender: () => <span style="width:40px">Prefix</span>,
    suffixRender: () => <NButton onClick={() => {}}>Custom Button</NButton>,
  },
  onSubmit: () =>
    new Promise<void>(resolve => setTimeout(() => resolve(), 1200)),
  columns: [
    { label: 'Name', key: 'fullName' },
    { label: 'Phone', key: 'tel', type: 'number' },
    {
      label: 'Gender',
      key: 'gender',
      type: 'radio',
      options: [
        { label: 'Male', value: 'man' },
        { label: 'Female', value: 'woman' },
      ],
    },
    {
      label: 'Hobbies',
      key: 'hobby',
      type: 'checkbox',
      options: ['Sing', 'Dance', 'Rap'],
    },
  ],
}
</script>

Align Right

Set align="right" to align the footer content to the end. The validation feedback is aligned to the end as well.

浏览器不支持，请手动复制 footer-align.en.vue

<template>
  <np-form :option="option" />
</template>
<script setup lang="tsx">
import type { FormOption } from 'naive-plus'

const option: FormOption = {
  footer: {
    // Align the footer content to the end, including the validation feedback
    align: 'right',
  },
  // The error message is shown as the feedback of the footer form item
  onSubmit: () => {
    throw new Error('Submit failed, please try again later')
  },
  columns: [
    { label: 'Name', key: 'fullName' },
    { label: 'Phone', key: 'tel', type: 'number' },
  ],
}
</script>

Component Configuration

FormOption Props

Prop	Description	Type	Default
footer	Footer config; set to false to hide the whole footer	boolean / FooterProps	-

Footer Props

Prop	Description	Type	Default
submitBtn	Whether to show the submit button	boolean	true
resetBtn	Whether to show the reset button	boolean	true
submitErrorFeedback	Whether to show the submit (onSubmit) error message as the feedback of the footer form item	boolean	true
align	Footer content alignment; right aligns to the end and moves the validation feedback to the end as well	'left' | 'right'	'left'
prefixRender	Prefix render function	(data)=>VNode	-
suffixRender	Suffix render function	(data)=>VNode	-

Global Defaults

formItemProps / style / align / submitErrorFeedback / submitBtn / resetBtn can be set globally through NpConfigProvider. The same config in option.footer takes priority, and option.footer: false still hides the whole footer.

<np-config-provider
  :component-options="{
    Form: {
      footer: {
        align: 'right',
        submitBtn: { text: 'Save' },
      },
    },
  }"
>
  <np-form :option="option" />
</np-config-provider>

prefixRender / suffixRender are content render functions, specify them at the usage site.

Button text priority: submitBtn.text / resetBtn.text > componentOptions.Form.footer of NpConfigProvider > the locale messages. Prefer locale when you need i18n.