---
title: "外观"
description: "组件样式覆盖、分页样式覆盖、斑马纹与边框、视觉密度、内容自适应、空值占位与粘性表头。"
seo_title: "Appearance"
seo_description: "Customize DataTable appearance — ui slot overrides, pagination ui overrides, stripe and borders, density presets, fit-content width, empty-cell variants and sticky header."
canonical_url: "https://nuxt.mhaibaraai.cn/docs/data-table/appearance"
---
# 外观

> 组件样式覆盖、分页样式覆盖、斑马纹与边框、视觉密度、内容自适应、空值占位与粘性表头。

## `ui` 组件样式覆盖

`ui` prop 接收 slot class 映射，与主题深度合并，定制 `root`、`th`、`td`、`tbody` 等局部样式：

```vue [DataTableUiOverrideExample.vue]
<script setup lang="ts">
import type { DataTableColumn, DataTableProps } from '@movk/nuxt'
import type { Person } from '~/composables/useTableMock'

const data = makePeople(6)
const columns: DataTableColumn<Person>[] = [
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'department', header: '部门' },
  { accessorKey: 'role', header: '岗位' },
  { accessorKey: 'level', header: '职级' }
]

const customUi: DataTableProps<Person>['ui'] = {
  root: 'rounded-xl shadow-sm',
  th: 'bg-primary/10 text-primary font-semibold',
  td: 'py-3 text-default',
  tbody: 'divide-y divide-default'
}
</script>

<template>
  <MDataTable :data="data" :columns="columns" :ui="customUi" />
</template>
```

## `paginationUi` 分页样式覆盖

`paginationUi.ui` 接收 Pagination 主题 slots，可重写 `root`、`summary`、`actions`、`selectedCount` 等局部 class；`paginationUi` 还可配置 `show`、`pageSizes`：

```vue [DataTablePaginationUiExample.vue]
<script setup lang="ts">
import type { DataTableColumn, PaginationState, RowSelectionState } from '@movk/nuxt'
import type { Person } from '~/composables/useTableMock'

const data = makePeople(8)
const selection = ref<RowSelectionState>({ P0002: true })
const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 4 })
const columns: DataTableColumn<Person>[] = [
  { type: 'selection', mode: 'multiple' },
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'department', header: '部门' },
  { accessorKey: 'role', header: '岗位' }
]
</script>

<template>
  <MDataTable
    v-model:row-selection="selection"
    v-model:pagination="pagination"
    :data="data"
    :columns="columns"
    row-key="id"
    :pagination-ui="{
      show: true,
      pageSizes: [4, 8],
      ui: {
        root: 'border-t border-default pt-3 mt-1',
        summary: 'text-primary font-medium',
        actions: 'gap-4',
        selectedCount: 'text-success'
      }
    }"
  />
</template>
```

## 斑马纹与边框

`stripe` 控制偶数行底色；`bordered` 支持布尔与对象形态，对象形态通过 `color`/`width`/`style` 自定义纵向边框：

```vue [DataTableStripeBorderedExample.vue]
<script setup lang="ts">
import type { DataTableColumn } from '@movk/nuxt'
import type { Person } from '~/composables/useTableMock'

const data = makePeople(6)
const columns: DataTableColumn<Person>[] = [
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'department', header: '部门' },
  { accessorKey: 'role', header: '岗位' },
  { accessorKey: 'level', header: '职级' }
]
</script>

<template>
  <MDataTable :data="data" :columns="columns" />
</template>
```

## `density` 视觉密度

`density` 切换 `compact`、`normal`、`comfortable` 三档单元格内边距预设：

```vue [DataTableDensityExample.vue]
<script setup lang="ts">
import type { DataTableColumn } from '@movk/nuxt'
import type { Person } from '~/composables/useTableMock'

const data = makePeople(6)
const columns: DataTableColumn<Person>[] = [
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'department', header: '部门' },
  { accessorKey: 'role', header: '岗位' },
  { accessorKey: 'level', header: '职级' }
]
</script>

<template>
  <MDataTable :data="data" :columns="columns" />
</template>
```

## `fitContent` 内容自适应宽度

`fitContent` 让表格宽度由列宽决定，不再撑满父容器，适合工具型紧凑表格：

```vue [DataTableFitContentExample.vue]
<script setup lang="ts">
import type { DataTableColumn } from '@movk/nuxt'
import type { Person } from '~/composables/useTableMock'

const data = makePeople(4)
const columns: DataTableColumn<Person>[] = [
  { accessorKey: 'id', header: '工号' },
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'department', header: '部门' },
  { accessorKey: 'level', header: '职级' }
]
</script>

<template>
  <MDataTable :data="data" :columns="columns" bordered />
</template>
```

## `emptyCell` 空值占位

`emptyCell` 支持字符串、函数模板（返回 VNode）与 `false`，分别用于自定义文本、自定义节点与完全关闭。列级 `emptyCell` 优先于全局：

```vue [DataTableEmptyCellVariantsExample.vue]
<script setup lang="ts">
import type { DataTableColumn, DataTableProps } from '@movk/nuxt'
import type { Person } from '~/composables/useTableMock'
import { UBadge, UIcon } from '#components'

const vnodeCell: DataTableProps<Person>['emptyCell'] = () =>
  h(UBadge, { color: 'neutral', variant: 'subtle', size: 'sm' }, () => [
    h(UIcon, { name: 'i-lucide-minus', class: 'size-3' }),
    ' 暂无'
  ])

const columns: DataTableColumn<Person>[] = [
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'address', header: '住址', size: 200 },
  { accessorKey: 'bio', header: '简介', size: 220, emptyCell: vnodeCell }
]

const data: Person[] = makePeople(3).map((p, i) => ({
  ...p,
  bio: i % 2 === 0 ? '' : p.bio,
  address: i % 3 === 0 ? '' : p.address
}))
</script>

<template>
  <MDataTable :data="data" :columns="columns" />
</template>
```

## `sticky` 粘性表头

`sticky` 默认开启，关闭后表头随内容滚动；需配合受限高度的滚动容器（如 `ui.root: 'max-h-[40vh]'`）：

```vue [DataTableStickyExample.vue]
<script setup lang="ts">
import type { DataTableColumn } from '@movk/nuxt'
import type { Person } from '~/composables/useTableMock'

const columns: DataTableColumn<Person>[] = [
  { accessorKey: 'name', header: '姓名' },
  { accessorKey: 'department', header: '部门' },
  { accessorKey: 'role', header: '岗位' },
  { accessorKey: 'level', header: '职级' }
]
</script>

<template>
  <MDataTable :data="makePeople(30)" :columns="columns" :ui="{ root: 'max-h-[40vh]' }" />
</template>
```


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.