# 操作与编辑

<cite>
**本文引用的文件**
- [ProTable.vue](file://packages/core/src/components/ProTable.vue)
- [ProTableEdit.vue](file://packages/core/src/components/ProTableEdit.vue)
- [ProForm.vue](file://packages/core/src/components/ProForm.vue)
- [ProSearch.vue](file://packages/core/src/components/ProSearch.vue)
- [ProModal.vue](file://packages/components/ProModal.vue)
- [ProTable.vue（视图示例）](file://src/views/ProTable.vue)
- [EditTable.vue（视图示例）](file://src/views/EditTable.vue)
- [ProForm.vue（视图示例）](file://src/views/ProForm.vue)
- [ProModalDemo.vue（视图示例）](file://src/views/ProModalDemo.vue)
- [TableRender.vue（视图示例）](file://src/views/TableRender.vue)
- [ProTable.d.ts](file://types/ProTable.d.ts)
</cite>

## 目录
1. [简介](#简介)
2. [项目结构](#项目结构)
3. [核心组件](#核心组件)
4. [架构总览](#架构总览)
5. [详细组件分析](#详细组件分析)
6. [依赖关系分析](#依赖关系分析)
7. [性能考量](#性能考量)
8. [故障排查指南](#故障排查指南)
9. [结论](#结论)
10. [附录](#附录)

## 简介
本章节面向需要在表格中实现“新增、编辑、删除、查看详情”等操作的开发者，系统性讲解 ProTable 与 ProTableEdit 的操作与编辑能力，涵盖：
- 操作按钮配置（actions 数组、工具栏按钮、权限控制、确认流程）
- 模态框表单（ProForm 与 ProModal 的联动）
- 表单验证与提交
- ProTable 与 ProTableEdit 的集成方式
- 常见操作场景的配置要点与权限控制方案
- 操作反馈与用户体验优化建议

## 项目结构
围绕“操作与编辑”的关键文件与职责如下：
- ProTable：提供远程数据加载、搜索、分页、工具栏、操作列渲染、模态框表单等能力
- ProTableEdit：提供行内编辑、批量增删改、快捷键导航、保存与校验等能力
- ProForm：通用表单渲染与校验，支持与 ProTable 的模态框联动
- ProSearch：通用搜索表单，支持多列布局与动态展开收起
- ProModal：轻量级确认对话框，支持异步确认逻辑

```mermaid
graph TB
subgraph "视图层"
VPT["ProTable.vue视图示例"]
VET["EditTable.vue视图示例"]
VPForm["ProForm.vue视图示例"]
VPM["ProModalDemo.vue视图示例"]
VR["TableRender.vue视图示例"]
end
subgraph "核心组件"
PT["ProTable.vue核心"]
PTE["ProTableEdit.vue核心"]
PF["ProForm.vue核心"]
PS["ProSearch.vue核心"]
PM["ProModal.vue组件"]
end
VPT --> PT
VET --> PTE
VPForm --> PF
VPM --> PM
VR --> PT
PT --> PF
PT --> PS
PT --> PM
PTE --> PT
```

**图表来源**
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)
- [ProTableEdit.vue（核心）](file://packages/core/src/components/ProTableEdit.vue)
- [ProForm.vue（核心）](file://packages/core/src/components/ProForm.vue)
- [ProSearch.vue（核心）](file://packages/core/src/components/ProSearch.vue)
- [ProModal.vue（组件）](file://packages/components/ProModal.vue)
- [ProTable.vue（视图示例）](file://src/views/ProTable.vue)
- [EditTable.vue（视图示例）](file://src/views/EditTable.vue)
- [ProForm.vue（视图示例）](file://src/views/ProForm.vue)
- [ProModalDemo.vue（视图示例）](file://src/views/ProModalDemo.vue)
- [TableRender.vue（视图示例）](file://src/views/TableRender.vue)

**章节来源**
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)
- [ProTableEdit.vue（核心）](file://packages/core/src/components/ProTableEdit.vue)
- [ProForm.vue（核心）](file://packages/core/src/components/ProForm.vue)
- [ProSearch.vue（核心）](file://packages/core/src/components/ProSearch.vue)
- [ProModal.vue（组件）](file://packages/components/ProModal.vue)
- [ProTable.vue（视图示例）](file://src/views/ProTable.vue)
- [EditTable.vue（视图示例）](file://src/views/EditTable.vue)
- [ProForm.vue（视图示例）](file://src/views/ProForm.vue)
- [ProModalDemo.vue（视图示例）](file://src/views/ProModalDemo.vue)
- [TableRender.vue（视图示例）](file://src/views/TableRender.vue)

## 核心组件
- ProTable：负责远程数据请求、搜索、分页、工具栏、操作列渲染、模态框表单、成功/失败消息处理、删除确认等
- ProTableEdit：负责行内编辑、新增/复制/删除/恢复行、批量选择、快捷键导航、保存与校验、与 ProTable 的联动
- ProForm：负责表单渲染、字段规则校验、提交与回调
- ProSearch：负责搜索表单渲染、多列布局、展开收起、搜索/重置事件
- ProModal：负责确认对话框、异步确认逻辑

**章节来源**
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)
- [ProTableEdit.vue（核心）](file://packages/core/src/components/ProTableEdit.vue)
- [ProForm.vue（核心）](file://packages/core/src/components/ProForm.vue)
- [ProSearch.vue（核心）](file://packages/core/src/components/ProSearch.vue)
- [ProModal.vue（组件）](file://packages/components/ProModal.vue)

## 架构总览
ProTable 通过 actions 渲染操作列，支持“删除”等内置动作与自定义 action；点击后进入模态框表单（ProForm），完成新增/编辑/查看；提交成功后刷新表格或关闭对话框。

```mermaid
sequenceDiagram
participant U as "用户"
participant T as "ProTable"
participant D as "对话框(ProForm)"
participant S as "服务端"
U->>T : 点击“删除/编辑/新增”
alt 删除
T->>U : 弹出确认(Poptip)
U-->>T : 确认
T->>S : 发送删除请求
S-->>T : 返回结果
T->>T : 刷新列表
else 新增/编辑
T->>D : 打开模态框并填充表单
U->>D : 编辑/填写字段
U-->>D : 提交
D->>S : 发送提交请求
S-->>D : 返回结果
D-->>T : 关闭并刷新
end
```

**图表来源**
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)
- [ProForm.vue（核心）](file://packages/core/src/components/ProForm.vue)

**章节来源**
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)
- [ProForm.vue（核心）](file://packages/core/src/components/ProForm.vue)

## 详细组件分析

### ProTable 操作列与工具栏
- 操作列（key 为 "action"）通过 actions 数组配置，支持内置类型（如删除）与自定义 action
- 内置删除类型会自动弹出确认对话框，确认后调用删除请求并刷新
- 自定义 action 可通过 render 回调传入 params，自行决定行为
- 工具栏按钮可通过 toolBarActions 配置，支持字符串与对象两种形式

```mermaid
flowchart TD
Start(["点击操作列按钮"]) --> Type{"类型判断"}
Type --> |删除| Confirm["弹出确认对话框"]
Confirm --> |取消| End["结束"]
Confirm --> |确认| DeleteReq["发送删除请求"]
DeleteReq --> Refresh["刷新列表"]
Type --> |自定义| Custom["执行自定义 action(params)"]
Custom --> End
```

**图表来源**
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)

**章节来源**
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)
- [ProTable.vue（视图示例）](file://src/views/ProTable.vue)

### 模态框表单与提交
- ProTable 在新增/编辑时打开模态框，内部嵌入 ProForm
- 表单字段通过 columns 渲染，支持规则校验与格式化
- 提交时先进行表单校验，再调用提交接口，成功后关闭对话框并刷新

```mermaid
sequenceDiagram
participant T as "ProTable"
participant F as "ProForm"
participant S as "服务端"
T->>F : 打开模态框并绑定表单数据
F->>F : 字段校验
F->>S : 提交表单
S-->>F : 返回结果
F-->>T : 关闭并刷新
```

**图表来源**
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)
- [ProForm.vue（核心）](file://packages/core/src/components/ProForm.vue)

**章节来源**
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)
- [ProForm.vue（核心）](file://packages/core/src/components/ProForm.vue)
- [ProForm.vue（视图示例）](file://src/views/ProForm.vue)

### ProTableEdit 行内编辑与批量操作
- 行内编辑：点击单元格进入编辑态，支持快捷键 Tab 导航、必填/正则等规则校验
- 新增/复制/删除/恢复：通过左侧控制列或工具栏按钮触发
- 批量选择：支持多行批量复制/删除/刷新/恢复
- 保存：仅当存在变更时显示保存按钮，保存前进行整体校验

```mermaid
flowchart TD
Click["点击单元格"] --> EditMode["进入编辑态"]
EditMode --> Validate["字段校验"]
Validate --> Change{"是否变更?"}
Change --> |是| Mark["_isEdit/_isAdd/_isDelete 标记"]
Change --> |否| Normal["保持原状"]
Mark --> Save["点击保存"]
Save --> Valid["整体校验"]
Valid --> |通过| Submit["提交保存"]
Valid --> |不通过| Error["提示错误"]
Submit --> Reset["重置状态并刷新"]
```

**图表来源**
- [ProTableEdit.vue（核心）](file://packages/core/src/components/ProTableEdit.vue)

**章节来源**
- [ProTableEdit.vue（核心）](file://packages/core/src/components/ProTableEdit.vue)
- [EditTable.vue（视图示例）](file://src/views/EditTable.vue)

### ProModal 确认对话框
- 提供统一的确认/取消交互，支持异步确认逻辑（onOk 返回布尔值决定是否关闭）
- 常用于删除等高风险操作的二次确认

```mermaid
sequenceDiagram
participant U as "用户"
participant M as "ProModal"
participant C as "调用方"
U->>M : 点击确认
M->>C : 触发 onOk()
C-->>M : 返回 true/false
alt 返回 true
M-->>U : 关闭对话框
else 返回 false
M-->>U : 保持打开
end
```

**图表来源**
- [ProModal.vue（组件）](file://packages/components/ProModal.vue)
- [ProModalDemo.vue（视图示例）](file://src/views/ProModalDemo.vue)

**章节来源**
- [ProModal.vue（组件）](file://packages/components/ProModal.vue)
- [ProModalDemo.vue（视图示例）](file://src/views/ProModalDemo.vue)

### ProSearch 搜索与分页联动
- 支持多列布局、展开收起、搜索/重置事件
- 与 ProTable 的分页、请求映射配合使用

**章节来源**
- [ProSearch.vue（核心）](file://packages/core/src/components/ProSearch.vue)
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)

## 依赖关系分析
- ProTable 依赖 ProForm、ProSearch、UIEditFrame、屏幕全屏组件
- ProTableEdit 依赖 ProTable 作为底层表格容器，并组合使用 ProForm（在行内编辑场景中）
- ProForm 依赖 UIEditFrame、ProTypeItem、校验器
- ProModal 为独立对话框组件，可被任意组件调用

```mermaid
graph LR
PT["ProTable"] --> PF["ProForm"]
PT --> PS["ProSearch"]
PT --> PM["ProModal"]
PTE["ProTableEdit"] --> PT
PF --> |渲染| PT
```

**图表来源**
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)
- [ProTableEdit.vue（核心）](file://packages/core/src/components/ProTableEdit.vue)
- [ProForm.vue（核心）](file://packages/core/src/components/ProForm.vue)
- [ProSearch.vue（核心）](file://packages/core/src/components/ProSearch.vue)
- [ProModal.vue（组件）](file://packages/components/ProModal.vue)

**章节来源**
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)
- [ProTableEdit.vue（核心）](file://packages/core/src/components/ProTableEdit.vue)
- [ProForm.vue（核心）](file://packages/core/src/components/ProForm.vue)
- [ProSearch.vue（核心）](file://packages/core/src/components/ProSearch.vue)
- [ProModal.vue（组件）](file://packages/components/ProModal.vue)

## 性能考量
- 列渲染优化：ProTable 使用 columnFilter 动态过滤列，避免不必要的渲染
- 分页与懒加载：ProTable 支持分页参数映射与懒加载，减少一次性渲染压力
- 行内编辑缓存：ProTableEdit 通过 editList 记录编辑状态，避免重复渲染
- 表单校验：ProForm 支持单项字段即时校验，降低整体校验成本
- 对话框按需渲染：ProTable 的表单对话框仅在打开时渲染，减少内存占用

**章节来源**
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)
- [ProTableEdit.vue（核心）](file://packages/core/src/components/ProTableEdit.vue)
- [ProForm.vue（核心）](file://packages/core/src/components/ProForm.vue)

## 故障排查指南
- 删除后未刷新
  - 检查删除请求返回的 success 字段与 success 条件映射
  - 确认分页边界处理（最后一页删除后回退一页）
- 表单提交失败但无提示
  - 检查提交接口返回的消息映射与 success 条件
  - 确认 ProForm 的 complete 回调是否正确处理
- 行内编辑无效
  - 检查 renderTableEdit 的 edit 配置与 canEdit 返回值
  - 确认快捷键 Tab 是否启用（shortcuts.tab）
- 模态框无法关闭
  - 检查 onOk 返回值与 loading 状态
  - 确认 v-model 绑定是否正确

**章节来源**
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)
- [ProTableEdit.vue（核心）](file://packages/core/src/components/ProTableEdit.vue)
- [ProForm.vue（核心）](file://packages/core/src/components/ProForm.vue)
- [ProModal.vue（组件）](file://packages/components/ProModal.vue)

## 结论
ProTable 与 ProTableEdit 提供了完整的“操作与编辑”能力：从工具栏按钮、操作列、确认对话框，到模态框表单与行内编辑，覆盖了常见的 CRUD 场景。通过合理的配置与权限控制，可快速搭建高质量的表格操作体验。

## 附录

### 操作按钮配置要点
- 操作列 actions
  - 内置类型：删除（带确认）、自定义（带 render 回调）
  - 显示条件：通过 show(params) 控制显示
- 工具栏按钮
  - 支持字符串与对象两种形式，对象可自定义渲染
- 权限控制
  - 通过 show(params) 或禁用状态控制按钮可用性
  - 通过 render 回调注入业务逻辑（如跳转详情）

**章节来源**
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)
- [ProTable.vue（视图示例）](file://src/views/ProTable.vue)

### 模态框表单配置要点
- 表单字段
  - 通过 columns 渲染，支持 renderForm 自定义渲染
  - 支持 rules 规则与格式化函数
- 提交流程
  - 先校验，再提交，成功后关闭并刷新
- 与 ProTable 集成
  - 通过 submitForm.request/method/headers 配置提交接口
  - 通过 map.message/success 控制消息与成功条件

**章节来源**
- [ProForm.vue（核心）](file://packages/core/src/components/ProForm.vue)
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)
- [ProForm.vue（视图示例）](file://src/views/ProForm.vue)

### 行内编辑与保存
- 行内编辑
  - 通过 renderTableEdit.normal/edit 定义编辑态与展示态
  - 支持快捷键 Tab 导航与必填/正则校验
- 保存
  - 仅当存在变更时显示保存按钮
  - 保存前进行整体校验，成功后重置状态并刷新

**章节来源**
- [ProTableEdit.vue（核心）](file://packages/core/src/components/ProTableEdit.vue)
- [EditTable.vue（视图示例）](file://src/views/EditTable.vue)

### 类型与属性参考
- ProTable 属性概览（节选）
  - columns：列配置数组
  - toolBarActions：工具栏按钮数组
  - request：远程请求配置
  - submitForm：新建/编辑提交配置
  - map：数据路径映射
  - hide：隐藏配置（search/toolBar/page/table）

**章节来源**
- [ProTable.d.ts](file://types/ProTable.d.ts)
- [ProTable.vue（核心）](file://packages/core/src/components/ProTable.vue)