79 lines
2.8 KiB
Markdown
79 lines
2.8 KiB
Markdown
# 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）
|