Appearance
EditTable 行内编辑表格
支持自动/手动触发、校验、新增、分页和后台排序。以下 10 个示例与 Vue 2 文档对应。
自动触发-基础
点击行进入编辑；修改数据后点击另一行或表格外部时触发 saveCommand。没有修改时直接结束当前编辑并进入目标行，不执行校验和保存。异步保存完成并调用 done() 后，组件会自动进入刚才点击的目标行。
运行结果点击一行或操作按钮进入编辑
自动触发-校验
运行结果点击一行或操作按钮进入编辑
Link 链接列
运行结果点击一行或操作按钮进入编辑
手动触发-基础
Vue 2 的 handleEdit / handleSave / handleCancel 命令名可直接迁移；自定义命令应显式使用 commandType，避免依赖名称推断。
运行结果点击一行或操作按钮进入编辑
手动触发-校验
运行结果点击一行或操作按钮进入编辑
表格内部-新增
addInside 在当前数据源中插入带默认值的新行。
运行结果点击一行或操作按钮进入编辑
行内事件
演示字段的 onChange、onEnter 和行内命令。
运行结果点击一行或操作按钮进入编辑
定制事件
运行结果点击一行或操作按钮进入编辑
工具栏插槽
toolbar 是作用域插槽，存在时替换默认的标题、新增按钮和定制命令区域，并提供 addRow 与 editing。不传插槽时原有声明式配置保持不变。
vue
<CaEditTable v-bind="tableProps">
<template #toolbar="{ addRow, editing }">
<div class="business-toolbar">
<span>共 {{ total }} 条</span>
<ElButton type="primary" :disabled="editing" @click="addRow">新增</ElButton>
</div>
</template>
</CaEditTable>分页
Total 23
- 1
- 2
- 3
- 4
- 5
- 6
- 8
运行结果点击一行或操作按钮进入编辑
排序
Total 23
- 1
- 2
- 3
- 4
- 5
- 6
- 8
运行结果点击一行或操作按钮进入编辑
编辑期间分页与排序
分页、切换每页数量和排序都会先检查当前编辑行：
- 没有正在编辑的行时，组件按原流程更新
pagination、发出事件并调用getList。 - 编辑行没有业务变更时，组件先结束编辑，再继续本次分页或排序。
- 编辑行存在未保存变更时，组件保留当前行和草稿，不修改
pagination、不发出对应事件、也不调用getList，并提示“请先保存或取消当前编辑”。 - 新增行始终视为有未保存变更；保存或取消后可继续操作。
CaTreeEditTable自动继承这一保护。
此行为不需要新增属性或监听器。业务仍通过 dirtyCheck(row, originalRow) 自定义已有行的变更判断。
Table Attributes
| 参数 | 默认值 | 说明 |
|---|---|---|
editTriggerMode | manual | manual / auto |
rowKey | id | 行主键 |
dataSource | [] | 表格数据 |
columns | [] | 编辑列配置 |
pagination | {} | 分页和排序状态 |
addCommand | - | 新增命令 |
editCommand | - | 自动模式编辑命令 |
saveCommand | - | 自动模式保存命令 |
dirtyCheck | - | 自定义已有行是否有业务变更；默认深比较可编辑字段 |
addInside | false | 是否在数据源内新增 |
addInsidePosition | beforeFirst | 新行插入位置 |
customCommands | [] | 顶部定制命令 |
appendContent | '' | 表格尾部内容 |
getList | - | 分页和排序回调 |
elementProps | {} | 透传 ElTable |
Column Options
在 CommonTable 列参数上增加 rules、editable 与 addable。index 列默认宽度为 64px，可通过 elementProps.width 覆盖。
Column ExtendProps Options
支持 defaultValue、autoFocus、commands、editableCommands、options、onChange 与 onEnter。
Table Events
命令字符串会作为同名事件发出，各生命周期参数如下：
- 编辑命令：
(index, row, done)。 - 保存命令：
(index, row, done, reason?)。仅当可编辑字段发生变化时发出，业务保存完成后调用done()结束编辑。 - 取消命令：
(index, row, compatibleNoopDone)。组件在发出事件前已经恢复快照，第三个参数只用于兼容仍会调用done()的旧处理器。 - 新增下级命令：命名事件接收
(index, parent)，实际新节点通过独立的add-sub(parent, child)事件取得。
分页和排序分别发出 page-index-change、page-size-change 与 sort-change；存在未保存编辑而被阻止时不会发出对应事件。
Field Type Options
编辑列支持 input、inputNumber、select、switch、custom、link、status 与普通展示列。日期编辑列支持 date、datetime、dateRange、dateTimeRange、month、monthRange、year 和 yearRange；其中 yearRange 使用 Element Plus 的 yearrange 选择器。
注意事项
同一时刻只编辑一行；取消已有行会恢复快照，取消新增行会移除该行。已有行默认深比较全部 editable: true 字段，支持数组、对象、日期及循环引用；新增行始终视为有变更。业务需要忽略格式化字段或纳入隐藏字段时，可通过 dirtyCheck(row, originalRow) 覆盖默认判断。组件会直接写入行对象的 operateType，后端不接收该字段时需在提交前剔除。暴露 dirty、isDirty、addRow、startEdit、finishEdit、cancelEdit、validate 与 requestSave。
首次加载或必须阻断表格操作的请求使用 loading。保存完成后的后台数据对账应保持 loading = false；单行保存可使用对应命令的 elementProps.loading，组合搜索、同步中和结果提示可放在 toolbar 插槽中。成功/失败消息和重试策略由业务侧维护。