Appearance
TreeEditTable 树形编辑表格
复用 EditTable 的编辑、校验和命令协议,并开启 Element Plus 树形数据能力。
手动触发-基础
编辑节点、新增下级和取消恢复都使用与 Vue 2 相同的列参数。
运行结果展开树节点,使用行内按钮编辑或新增下级
手动触发-校验
运行结果展开树节点,使用行内按钮编辑或新增下级
Table Attributes
继承 EditTable 全部属性,额外支持:
| 参数 | 默认值 | 说明 |
|---|---|---|
addInside | true | 在树数据内部新增 |
addInsidePosition | beforeFirst | 子节点插入位置 |
childrenKey | children | 子节点字段 |
Column Options
与 EditTable 一致。操作列使用 commandType: 'addSub' 新增子节点。
Column ExtendProps Options
与 EditTable 一致;行按钮的 visibleValidator 和 disableValidator 兼容直接接收当前节点。
Table Events
继承 EditTable 命令事件,并增加 add-sub(parent, row)。组件不会自动推断 parentId、deviceId 等业务字段,请在该事件中把父节点上下文写入新行。commandType: 'addSub' 没有配置 command 时只触发 add-sub,不会发出无名称事件。暴露 addSubRow(parent)。
Toolbar Slot
透传 EditTable 的 toolbar 作用域插槽,插槽参数同样为 { addRow, editing }。插槽存在时替换默认标题和命令区,不传时继续显示原有配置。
