数据表格 UTable

后台、管理台里最常见的就是表格。UTable 负责把数据数组渲染成带样式的表格，表头、对齐、行操作都能配置，比手写 <table> 省事很多。

本篇基于 /453.html 接好的环境。底层用了 TanStack Table，但新手只需要掌握「传数据 + 定列」即可。

基本用法

UTable 用 :data 传行数据，用 :columns 定义列。每一列用 accessorKey 指向数据字段，header 是列标题。

<template>
  <UTable :data="users" :columns="columns" />
</template>

<script setup>
const users = [
  { id: 1, name: '张三', role: '管理员' },
  { id: 2, name: '李四', role: '普通用户' }
]

const columns = [
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'role', header: '角色' }
]
</script>

accessorKey 告诉表格「这一列取对象里的哪个字段」，表格会自动把每行对应的值填进单元格。

自定义单元格

默认单元格只显示原始文本。想放按钮、标签等组件，用 #<列id> 插槽，插槽名就是列的 id。

<template>
  <UTable :data="users" :columns="columns">
    <template #role-cell="{ row }">
      <UBadge color="info" variant="subtle">{{ row.original.role }}</UBadge>
    </template>
  </UTable>
</template>

<script setup>
const users = [
  { id: 1, name: '张三', role: '管理员' },
  { id: 2, name: '李四', role: '普通用户' }
]

const columns = [
  { accessorKey: 'name', header: '姓名', id: 'name' },
  { accessorKey: 'role', header: '角色', id: 'role' }
]
</script>

插槽名格式是 <id>-cell，row.original 能拿到这一行的完整数据对象。这里用 Toast 与通知 里的 UBadge 把角色渲染成小标签。

行内操作列

很多表格最后一列是「操作」（编辑、删除）。加一列不带 accessorKey 的操作列，在插槽里放按钮或下拉菜单（下拉菜单与命令面板）。

<template>
  <UTable :data="users" :columns="columns">
    <template #actions-cell="{ row }">
      <UButton size="xs" variant="soft" @click="edit(row.original)">编辑</UButton>
    </template>
  </UTable>
</template>

<script setup>
const users = [
  { id: 1, name: '张三', role: '管理员' },
  { id: 2, name: '李四', role: '普通用户' }
]

const columns = [
  { accessorKey: 'name', header: '姓名' },
  { id: 'actions', header: '操作' }
]

function edit(user) {
  console.log('编辑', user)
}
</script>

操作列只写了 id 和 header，没有 accessorKey，表格会把这一列当作「自定义渲染列」，内容完全由 #actions-cell 插槽决定。

常用配置

<template>
  <UTable :data="users" :columns="columns" sticky class="h-96" />
</template>

常见问题

参考资料

• Nuxt UI Table 文档