CRUD (Create, Read, Update, Delete)

By configuring api with add, edit, and delete methods and using formProps to define the form fields, you can quickly build a complete CRUD feature.

Basic Usage

Configure the form field types in the column formProps, and provide add, edit, del methods in api to enable CRUD.

• Click the Add button to open the create form
• Click the Edit action to open the edit form with the row data prefilled
• Click the Delete action to open a confirmation dialog
• If api.add/edit/del throws an error or returns false, the dialog will not close

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

<template>
  <np-table :option="option" />
</template>

<script setup lang="ts">
import type { TableOption } from 'naive-plus'

type User = {
  id: number
  name: string
  age: number
  address: string
}

const mockData: User[] = [
  { id: 1, name: 'John', age: 30, address: 'New York' },
  { id: 2, name: 'Jane', age: 25, address: 'Los Angeles' },
  { id: 3, name: 'Bob', age: 35, address: 'Chicago' },
]

const option: TableOption<User> = {
  columns: [
    {
      key: 'name',
      label: 'Name',
      formProps: { type: 'input' },
    },
    {
      key: 'age',
      label: 'Age',
      formProps: { type: 'number' },
    },
    {
      key: 'address',
      label: 'Address',
      formProps: { type: 'input' },
    },
  ],
  api: {
    fetch: async ({ page, pageSize }) => {
      return {
        items: mockData.slice((page - 1) * pageSize, page * pageSize),
        itemCount: mockData.length,
      }
    },
    add: async rowData => {
      mockData.unshift({ ...rowData, id: mockData.length + 1 })
    },
    edit: async rowData => {
      const idx = mockData.findIndex(item => item.id === rowData.id)
      if (idx !== -1) {
        mockData[idx] = { ...mockData[idx], ...rowData }
      }
    },
    del: async rowData => {
      const idx = mockData.findIndex(item => item.id === rowData.id)
      if (idx !== -1) {
        mockData.splice(idx, 1)
      }
    },
  },
}
</script>

onBefore Hook

operation.onBefore is triggered before the dialog opens, and can be used to:

• Block the action: return false or throw an error, the dialog will not open
• Replace data: return a new object, which will be used as the initial form data
• Open normally: return void / undefined / true, default behavior

浏览器不支持，请手动复制 crud-on-before.en.vue

<template>
  <div>
    <n-space vertical>
      <n-alert type="info">
        onBefore control:
        <n-radio-group v-model:value="mode">
          <n-radio value="normal">Open normally</n-radio>
          <n-radio value="block">Block (return false)</n-radio>
          <n-radio value="replace">
            Replace data (overwrite the address to "Overwritten Address")
          </n-radio>
        </n-radio-group>
      </n-alert>
      <np-table :option="option" />
    </n-space>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { NAlert, NRadio, NRadioGroup, NSpace } from 'naive-ui'
import type { TableOption } from 'naive-plus'

type User = {
  id: number
  name: string
  age: number
  address: string
}

const mode = ref<'normal' | 'block' | 'replace'>('normal')

const mockData: User[] = [
  { id: 1, name: 'John', age: 30, address: 'New York' },
  { id: 2, name: 'Jane', age: 25, address: 'Los Angeles' },
  { id: 3, name: 'Bob', age: 35, address: 'Chicago' },
]

const option: TableOption<User> = {
  columns: [
    {
      key: 'name',
      label: 'Name',
      formProps: { type: 'input' },
    },
    {
      key: 'age',
      label: 'Age',
      formProps: { type: 'number' },
    },
    {
      key: 'address',
      label: 'Address',
      formProps: { type: 'input' },
    },
  ],
  api: {
    fetch: async ({ page, pageSize }) => {
      return {
        items: mockData.slice((page - 1) * pageSize, page * pageSize),
        itemCount: mockData.length,
      }
    },
    add: async rowData => {
      mockData.unshift({ ...rowData, id: mockData.length + 1 })
    },
    edit: async rowData => {
      const idx = mockData.findIndex(item => item.id === rowData.id)
      if (idx !== -1) {
        mockData[idx] = { ...mockData[idx], ...rowData }
      }
    },
    del: async rowData => {
      const idx = mockData.findIndex(item => item.id === rowData.id)
      if (idx !== -1) {
        mockData.splice(idx, 1)
      }
    },
  },
  operation: {
    onBefore: async (rowData, type) => {
      if (mode.value === 'block') {
        // return false to block the action, the dialog will not open
        return false
      }
      if (mode.value === 'replace' && type === 'edit') {
        // return a new object to replace the initial data
        return { ...rowData, address: 'Overwritten Address' }
      }
      // return undefined / void to open normally
    },
  },
}
</script>

Types

formProps

TableColumn.formProps is used to configure how a column is displayed in the form. You can override the config for different action modes via addProps and editProps.

formProps?: Partial<FormColumn> & {
  addProps?: Partial<FormColumn>   // Extra config for the add mode, overrides formProps
  editProps?: Partial<FormColumn>  // Extra config for the edit mode, overrides formProps
}

operation.onBefore

onBefore?: (
  rowData: T,
  type: 'add' | 'edit' | 'del'
) => boolean | T | void | Promise<boolean | T | void>

Return	Description
false	Block the action, the dialog will not open
Thrown error	Block the action, the dialog will not open
Object T	Use the returned object as the initial form data
void / undefined / true	Open the dialog normally

api

Method	Description	Type
add	Create API	(rowData: T) => Promise<T | boolean | void>
edit	Update API	(rowData: T) => Promise<T | boolean | void>
del	Delete API	(rowData: T) => Promise<T | boolean | void>

All three methods are optional. If they return false or throw an error, the dialog will not close; otherwise, the dialog closes and the table refreshes.