表格

NDataTable 的基础用法：列定义、分页与排序。

姓名	年龄	状态	操作
张三	28	在职
李四	34	休假
王五	25	在职

1

2

<script setup>
import { h, ref } from 'vue'
import { NButton, NDataTable, NTag, useMessage } from 'naive-ui'

const message = useMessage()

const columns = [
  { title: '姓名', key: 'name', sorter: (a, b) => a.name.localeCompare(b.name) },
  { title: '年龄', key: 'age', sorter: (a, b) => a.age - b.age },
  {
    title: '状态',
    key: 'status',
    render(row) {
      return h(
        NTag,
        { type: row.status === '在职' ? 'success' : 'warning' },
        { default: () => row.status }
      )
    }
  },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return h(
        NButton,
        { size: 'small', onClick: () => message.info(`查看 ${row.name}`) },
        { default: () => '查看' }
      )
    }
  }
]

const data = [
  { key: 1, name: '张三', age: 28, status: '在职' },
  { key: 2, name: '李四', age: 34, status: '休假' },
  { key: 3, name: '王五', age: 25, status: '在职' },
  { key: 4, name: '赵六', age: 41, status: '在职' },
  { key: 5, name: '钱七', age: 30, status: '休假' }
]

const pagination = { pageSize: 3 }
</script>

<template>
  <n-data-table
    :columns="columns"
    :data="data"
    :pagination="pagination"
    :bordered="false"
    striped
  />
</template>

点列表头可排序，「查看」按钮会弹出 message。