# 9.9 数据展示组件

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

## Table 表格组件

```vue
<template>
  <BasicTable @register="registerTable" />
</template>

<script setup>
import { BasicTable, useTable } from '@/components/Table';

const [registerTable] = useTable({
  api: getExamplePage,          // 数据接口
  columns: [                     // 列定义
    { title: 'ID', field: 'id', width: 80 },
    { title: '名称', field: 'name' },
    { title: '状态', field: 'statusText', width: 100 },
    { title: '创建时间', field: 'createTime', width: 180 },
  ],
  actionColumn: {                // 操作列
    width: 200,
    actions: [
      { label: '编辑', onClick: handleEdit },
      { label: '删除', onClick: handleDelete, type: 'danger' },
    ],
  },
});
</script>
```

## 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>
```

:::warning 组件未实现
Description 描述列表组件尚未在项目中实现，以下为规划示例。
:::

## Description 描述列表

```vue
<template>
  <Description :data="detailData" :schema="schema" />
</template>

<script setup>
import { Description } from '@/components/Description';

const schema = [
  { field: 'username', label: '用户名' },
  { field: 'realname', label: '姓名' },
  { field: 'statusText', label: '状态' },
  { field: 'createTime', label: '创建时间' },
];

const detailData = ref({});
</script>
```

## 相关文档

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