Skip to content

TreeEditTable 树形编辑表格

复用 EditTable 的编辑、校验和命令协议,并开启 Element Plus 树形数据能力。

手动触发-基础

编辑节点、新增下级和取消恢复都使用与 Vue 2 相同的列参数。

运行结果展开树节点,使用行内按钮编辑或新增下级

手动触发-校验

运行结果展开树节点,使用行内按钮编辑或新增下级

Table Attributes

继承 EditTable 全部属性,额外支持:

参数默认值说明
addInsidetrue在树数据内部新增
addInsidePositionbeforeFirst子节点插入位置
childrenKeychildren子节点字段

Column Options

与 EditTable 一致。操作列使用 commandType: 'addSub' 新增子节点。

Column ExtendProps Options

与 EditTable 一致;行按钮的 visibleValidatordisableValidator 兼容直接接收当前节点。

Table Events

继承 EditTable 命令事件,并增加 add-sub(parent, row)。组件不会自动推断 parentIddeviceId 等业务字段,请在该事件中把父节点上下文写入新行。commandType: 'addSub' 没有配置 command 时只触发 add-sub,不会发出无名称事件。暴露 addSubRow(parent)

Toolbar Slot

透传 EditTable 的 toolbar 作用域插槽,插槽参数同样为 { addRow, editing }。插槽存在时替换默认标题和命令区,不传时继续显示原有配置。