70 lines
2.6 KiB
Markdown
70 lines
2.6 KiB
Markdown
# 9.9 表格与页面组件
|
||
|
||
:::tip 概述
|
||
列表页的骨架组件：PageWrapper（页面容器）、BasicForm（查询/表单，`components/Form`）、BasicTable（数据表格，`components/Table`）。三者经 `@register` 注册模式配合使用——参考实现即 `views/tool/example/`。
|
||
:::
|
||
|
||
## 组件与目录对应
|
||
|
||
| 使用名 | 目录 | 职责 |
|
||
|---|---|---|
|
||
| PageWrapper | layout / Page | 页面容器（响应高度、内容区） |
|
||
| BasicForm | components/Form（src/BasicForm.vue） | 表单引擎（FormSchema 声明驱动，@register 注册） |
|
||
| BasicTable | components/Table（src/Table.vue） | 表格引擎（columns 配置 + request 数据回调 + 分页 + 操作列） |
|
||
| editDialog / detailDialog | 页面私有（views 下） | 新增/编辑与详情弹窗（example 页即此结构） |
|
||
|
||
## 典型组合（摘自 views/tool/example/index.vue）
|
||
|
||
```html
|
||
<PageWrapper>
|
||
<el-card :bordered="false" class="pt-3 mb-3 proCard">
|
||
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
|
||
</el-card>
|
||
|
||
<el-card :bordered="false" class="proCard">
|
||
<BasicTable
|
||
:columns="columns"
|
||
:request="loadDataTable"
|
||
:row-key="(row) => row.id"
|
||
ref="tableRef"
|
||
:actionColumn="actionColumn"
|
||
@selection-change="onSelectionChange"
|
||
>
|
||
<template #tableTitle>工具栏按钮区（v-perm 控制显隐）</template>
|
||
</BasicTable>
|
||
</el-card>
|
||
|
||
<editDialog v-if="editVisible" :id="currentId" v-model:visible="editVisible" @success="reloadTable('noRefresh')" />
|
||
</PageWrapper>
|
||
```
|
||
|
||
## 配置外置
|
||
|
||
| 文件 | 内容 |
|
||
|---|---|
|
||
| columns.ts | 表格列（`{ label, prop, minWidth }`，`render(record)` 自定义渲染：ElAvatar 图片、ElTag 选项、链接等） |
|
||
| querySchemas.ts | 查询表单（`FormSchema[]`：Input / Select / InputNumber / DatePicker 按字段类型选组件） |
|
||
|
||
配置外置使 index.vue 只保留交互逻辑——生成器产物即此结构，新页面照抄。
|
||
|
||
## 数据流
|
||
|
||
```text
|
||
BasicTable :request → loadDataTable → getExamplePage（api 模块）
|
||
→ 返回分页数据（records/total）→ 表格渲染与分页条
|
||
actionColumn → 行内操作（编辑/详情/删除，挂 v-perm）
|
||
selection-change → 批量删除选择集
|
||
```
|
||
|
||
## 使用规约
|
||
|
||
- 业务页面不裸写 el-table + 手动分页，一律 BasicTable
|
||
- 列定义进 columns.ts，查询项进 querySchemas.ts
|
||
- 操作列按钮 v-perm 数组入参（`v-perm="['sys:example:add']"`）
|
||
- 页面私有弹窗组件放页面目录，不进全局 components
|
||
|
||
## 相关
|
||
|
||
- [9.13 新增页面开发步骤](/zh/frontend/new-page.html)
|
||
- [8.3 分页查询规范](/zh/api-spec/pagination.html)
|