签入版本

EasyGoAdmin_Gin_NaiveVue/zh/frontend/table-components.md

@@ -0,0 +1,69 @@
+# 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)