2.6 KiB
2.6 KiB
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）
<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 只保留交互逻辑——生成器产物即此结构，新页面照抄。
数据流
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