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