9.9 数据展示组件

概述

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 的配合（真实模式）

// 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（枚举列）

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

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

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

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

与其他层的对接

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）