np-form 自定义底部

通过 footer 属性自定义底部。

浏览器不支持，请手动复制 footer.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">前缀</span>,
    suffixRender: () => <NButton onClick={() => {}}>自定义按钮</NButton>,
  },
  onSubmit: () =>
    new Promise<void>(resolve => setTimeout(() => resolve(), 1200)),
  columns: [
    { label: '姓名', key: 'fullName' },
    { label: '电话', key: 'tel', type: 'number' },
    {
      label: '性别',
      key: 'gender',
      type: 'radio',
      options: [
        { label: '男', value: 'man' },
        { label: '女', value: 'feman' },
      ],
    },
    {
      label: '喜好',
      key: 'hobby',
      type: 'checkbox',
      options: ['唱', '跳', 'rapper'],
    },
  ],
}
</script>

右对齐

通过 align="right" 让底部内容靠右对齐，提交异常时的校验反馈也会同步靠右。

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

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

const option: FormOption = {
  footer: {
    // 底部内容靠右对齐，校验反馈信息同步靠右
    align: 'right',
  },
  // 提交异常时，错误信息会展示在底部表单项的校验反馈中
  onSubmit: () => {
    throw new Error('提交失败，请稍后重试')
  },
  columns: [
    { label: '姓名', key: 'fullName' },
    { label: '电话', key: 'tel', type: 'number' },
  ],
}
</script>

组件配置

FormOption Props

属性	说明	类型	默认值
footer	底部属性，false 则隐藏整个底部	boolean / FooterProps	-

Footer Props

属性	说明	类型	默认值
submitBtn	提交按钮是否显示	boolean	true
resetBtn	重置按钮是否显示	boolean	true
submitErrorFeedback	提交（onSubmit）异常时，是否将错误信息展示在底部表单项的校验反馈中	boolean	true
align	底部内容对齐方式，right 时靠右对齐且校验反馈同步靠右	'left' | 'right'	'left'
prefixRender	前缀渲染函数	(data)=>VNode	-
suffixRender	后缀渲染函数	(data)=>VNode	-