# 9.9 数据展示组件

:::tip 概述
components/ 提供 25 类公共组件，覆盖数据展示（Table/Page/CountTo/Qrcode/Render）、容器（Modal）、辅助（icon/Websocket/Lockscreen）等场景。本节介绍高频展示组件。
:::

## 高频展示组件

| 组件 | 职责 | 典型用法 |
|------|------|---------|
| Table | 表格封装（columns 配置驱动） | 列表页主表格，对接 columns.ts |
| pagination | 分页组件 | 配合 Table，切换触发重新请求 |
| Page | 页面容器（标题/操作区/搜索区） | 列表页外框 |
| Render | 函数式渲染（h 函数封装） | 复杂列渲染 |
| CountTo | 数字滚动动画 | 仪表盘统计卡片 |
| Qrcode | 二维码生成 | 扫码场景 |
| icon | 图标组件 | 菜单/操作图标 |
| Modal | 弹窗封装 | 编辑/详情弹窗 |
| TableSelect | 表格选择器 | 单选/多选弹窗选择数据 |
| Websocket | WebSocket 封装 | 实时消息（前端遗留能力） |

## Table 与 columns.ts 的配合（真实模式）

```ts
// columns.ts 定义列（真实模式摘自 example）
export const columns = [
  { type: 'selection' },                          // 多选框列
  { label: 'ID', prop: 'id', fixed: 'left', width: 50 },
  { label: '案例名称', prop: 'name', minWidth: 120 },   // 普通文本
  {
    label: '案例图片', prop: 'avatar', minWidth: 120,
    // 图片渲染：以方形头像形式展示
    render(record) {
      return h(ElAvatar, { size: 48, src: record.row.avatar, shape: 'square', fit: 'fill' });
    },
  },
  // 枚举列建议渲染 {field}Text（statusText）
];
```

渲染规则约定：图片列 ElAvatar、选项列 ElTag、链接列 a 标签、其余普通文本。

## 展示 {field}Text（枚举列）

```text
后端基座已填充 statusText 等字典文本 → columns 直接 prop: 'statusText'
或 render 用 ElTag 展示 text + 语义色
唯一真相在字典管理页（前端不硬编码枚举文案）
```

## Page 容器布局（列表页标准形态）

```text
<Page>
  搜索区（querySchemas 驱动的 Form）
  操作区（新增/导出等按钮，v-permission 控制）
  表格区（Table + pagination）
</Page>

弹窗层：edit.vue（新增/编辑）、detail.vue（详情）
```

## 与其他层的对接

```text
Table data   ← http 解包后的 data.records（PageData 声明）
pagination   ← data.total / data.size / data.current
columns      ← views/{域}/{模块}/columns.ts
弹窗表单     ← edit.vue（字段对齐 Req 结构体）
```

## 开发规约

+ 列表列用 columns.ts 声明式配置（勿在模板里手写 el-table-column）
+ 复杂列用 render 函数（h + Element Plus 组件）
+ 图片列 src 用后端 GetFileUrl 已补域名的字段（勿手拼）
+ 枚举列展示 {field}Text（勿硬编码映射）
+ 操作列按钮逐个加 v-permission（对齐 gmeta permission）