np-form Custom Type

Custom Type

In addition to built-in components, the type of a form field also supports custom VNode.

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

<template>
  <div>
    {{ data }}
    <np-form v-model="data" :option="option" />
  </div>
</template>
<script setup lang="tsx">
import type { FormOption } from 'naive-plus'
import { NInput } from 'naive-ui'
import { ref } from 'vue'

type User = {
  fullName?: string
  tel?: number
  range: string[]
}

const data = ref<User>()

const option: FormOption<User> = {
  columns: [
    { label: 'Name', key: 'fullName' },
    { label: 'Phone', key: 'tel', type: 'number' },
    {
      label: 'Custom Component',
      key: 'range',
      defaultValue: ['', ''],
      type: form => {
        return (
          <div style="display:flex; align-items:center; gap: 8px;">
            <NInput
              value={form.range?.[0]}
              onUpdateValue={(val: string) => (form.range[0] = val)}
            ></NInput>
            <span>~</span>
            <NInput
              value={form.range?.[1]}
              onUpdateValue={(val: string) => (form.range[1] = val)}
            ></NInput>
          </div>
        )
      },
    },
  ],
}
</script>

Fully Custom Render

Use render to fully customize the render, e.g. for a grouped form.

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

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

const option: FormOption = {
  props: {
    labelPlacement: 'left',
    labelWidth: 80,
  },
  onSubmit: async () => {
    await new Promise<void>(resolve => setTimeout(() => resolve(), 1200))
  },
  columns: [
    {
      render: data => <div class="title">Basic Info {data.fullName}</div>,
    },
    { label: 'Name', key: 'fullName' },
    { label: 'Phone', key: 'tel', type: 'number' },
    { render: () => <div class="title">More Info</div> },
    { label: 'ID Card', key: 'idCard' },
    { label: 'Bank Card', key: 'bankCard' },
  ],
}
</script>
<style>
.title {
  padding-top: 8px;
  padding-bottom: 16px;
  font-size: 16px;
  font-weight: bold;
}
</style>

Component Configuration

FormColumn Props

Prop	Description	Type	Default
type	Type function, only renders the input area	(data: AnyObject)=>VNode	-
render	Render function, renders the entire form-item	(data: AnyObject)=>VNode	-