np-table Slots

Use slots to insert custom content at the top and bottom of the table.

Header Slots

• headerLeft: content on the left of the table header
• headerRight: content on the right of the table header, rendered before the "Add" button and the filter, display and refresh buttons

Footer Slot

• footerLeft: content on the left of the table footer, on the same row as the pagination

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

<template>
  <np-table :option="option">
    <template #headerLeft>
      <n-text strong style="font-size: 16px">User List</n-text>
    </template>
    <template #headerRight>
      <n-button secondary @click="handleExport">Export</n-button>
    </template>
    <template #footerLeft>
      <n-text depth="3">Total {{ total }} items</n-text>
    </template>
  </np-table>
</template>

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

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

const message = useMessage()

const mockData: User[] = Array.from({ length: 100 }, (_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`,
  age: 20 + (i % 30),
  address: `City ${i + 1}`,
}))

const total = mockData.length

const option: TableOption<User> = {
  columns: [
    { key: 'name', label: 'Name' },
    { key: 'age', label: 'Age' },
    { key: 'address', label: 'Address' },
  ],
  api: {
    fetch: async ({ page, pageSize }) => {
      return {
        items: mockData.slice((page - 1) * pageSize, page * pageSize),
        itemCount: mockData.length,
      }
    },
  },
}

const handleExport = () => {
  message.success(`Exported ${total} items`)
}
</script>

Slot List

Name	Description
headerLeft	Slot on the left of the table header
headerRight	Slot on the right of the table header, rendered before the "Add" and filter/display/refresh buttons
footerLeft	Slot on the left of the table footer, on the same row as the pagination

option.slots

Besides component slots, the same positions can be configured through option.slots. When both exist, option.slots takes precedence.

import { h } from 'vue'
import { NButton } from 'naive-ui'
import type { TableOption } from 'naive-plus'

const option: TableOption = {
  // ...
  slots: {
    headerLeft: () => h('span', 'User List'),
    headerRight: () =>
      h(NButton, { secondary: true }, { default: () => 'Export' }),
    footerLeft: () => h('span', 'Total 100 items'),
  },
}

TableSlotOption

Prop	Description	Type
headerLeft	Content on the left of the header, takes precedence over the slot	() => VNodeChild
headerRight	Content on the right of the header, takes precedence over the slot	() => VNodeChild
footerLeft	Content on the left of the footer, takes precedence over the slot	() => VNodeChild