# 9.9 数据展示组件

:::tip 概述
本节介绍前端项目中常用的数据展示组件，包括表格（BasicTable）、页面容器（PageWrapper）和图标选择器（IconPicker）。
:::

## Table 表格组件

```vue
<template>
  <BasicTable
    :columns="columns"
    :request="loadDataTable"
    :row-key="(row) => row.id"
    ref="tableRef"
    :actionColumn="actionColumn"
    @selection-change="onSelectionChange"
  />
</template>

<script setup>
import { TableAction } from '@/components/Table';
import { getExamplePage } from '@/api/tool/example';
import { columns } from './columns';

// 分页请求函数（返回 {records, total, current, size, pages}）
const loadDataTable = (params) => getExamplePage(params);

const actionColumn = {
  width: 200,
  title: '操作',
  dataIndex: 'action',
  slots: { customRender: 'action' },
};
</script>
```

:::tip 分页字段约定
本项目 `BasicTable` 通过 `:request` 传入分页请求函数（没有 `useTable` hook），内部绑定后端固定分页结构 `data.records` / `data.total`。`statusText` 等 `*Text` 字段由后端 `serializeMaps` 自动补全，直接作为列 `field` 使用即可。
:::

### 列定义常用属性

| 属性 | 说明 | 示例 |
|------|------|------|
| `title` | 列标题 | `'创建时间'` |
| `field` | 字段名（camelCase，与响应一致） | `'createTime'` |
| `width` | 列宽 | `180` |
| `formatter` | 自定义格式化 | `(v) => v ?? '-'` |
| `slots` | 自定义单元格插槽 | `'statusSlot'` |

## Page 页面容器

```vue
<template>
  <PageWrapper>
    <!-- 页面内容 -->
  </PageWrapper>
</template>

<script setup>
import { PageWrapper } from '@/components/Page';
</script>
```

## Icon 图标选择器

```vue
<template>
  <IconPicker v-model="formData.icon" />
</template>

<script setup>
import IconPicker from '@/components/icon/picker.vue';
</script>
```

## 相关文档

- [数据录入组件](/zh/frontend/form-components.html)
- [Excel 导入导出组件](/zh/frontend/excel-components.html)
- [前端组件速查](/zh/appendix/components.html)