表格编辑
超级表格传入 initNativeRowField: true 开启表格编辑功能,有如下编辑类型:
- 表格整体编辑
- 表格单行编辑
- 表格单列编辑
- 表格单元格编辑
优先级从低到高生效,如开启了表格整体编辑,但是表格单元格配置禁止编辑,则该单元格将不能编辑。
同时支持编辑表单校验。
提示
- 表格数据建议是响应式,这样表格才会监听到数据的变化并进行更新
- 如果传入
data数据时,表单数据不会和表格数据同步更新,请使用formChange事件手动同步 - 如果传入
api来让超级表格内部代理数据时,则表单数据会自动更新表格数据
表格编辑是基于 ProForm 超级表单 进行拓展,每一个表格列配置项 column.editProps 等于 ProFormItem 的 Props。
通过 editProps.el 配置项,可以传入编辑表单的组件,通过 editProps.elProps 可以给编辑表单的组件传入 Props,更多 editProps 的功能可以先去了解 ProForm 超级表单 超级表单的配置。
警告
使用表格编辑功能必须传入 initNativeRowField: true 来初始化内置的增强属性/方法,其中包括表格编辑属性/方法等
initNativeRowField 为 true 会给表格行 row 添加一些 _ 开头的属性和方法,这会遍历每一个数据,因此 耗费一定性能,所以默认关闭。
表格整体编辑
当往 ProTable 传入 editable: true 时,会开启表格整体编辑功能。
表格单行编辑
当 initNativeRowField 为 true,Teek 给每一个 row 里提供了一些增强的属性和方法,方便开发者进行单行或者单元格相关操作。
属性
_editable
- 类型:
boolean - 描述:判断当前行是否处于编辑状态。
_editableCol
- 类型:
Record<string, boolean> - 描述:获取当前行的多个单元格编辑状态,它是一个对象,键是单元格
prop,值为当前单元格是否处于编辑状态。
_proFormInstance
- 类型:
Record<string, ProFormInstance> - 描述:获取当前行的多个单元格编超级表单实例,它是一个对象,键是单元格
prop,值为当前单元格超级表单实例。
_options
- 类型:
Record<string, ElOption[]> - 描述,存储当前行每个
column的options实际值。
_optionProps
- 类型:
Record<string, {optionField: TableColumn["optionField"];transformOption: TableColumn["transformOption"];ignoreOptionIfAbsent: TableColumn["ignoreOptionIfAbsent"]}> - 描述,当前列的
option相关配置,_getValue里需要使用,因此需要提前缓存起来。
方法
_getValue
- 类型:
(prop: string) => unknown - 描述:获取当前行对应
prop的值。
_getData
- 类型:
() => Record<string, any> - 描述:获取当前行的所有数据,该方法会过滤掉
_下划线开头的属性和方法,如果直接通过row获取当行数据,会得到一些_下划线开头的属性和方法。
_openCellEdit
- 类型:
(props?: string | string[]) => void - 描述:开启编辑态方法,支持传入参数
props,如果不传则开启整行编辑,如果传入则开启指定props的单元格编辑,支持数组。
_closeCellEdit
- 类型:
(props?: string | string[], reset?: boolean) => void - 描述:关闭编辑态方法,和
_openCellEdit一样支持传入prop参数指定关闭某个单元格,支持数组。
第二个参数 reset 如果为 true,则自动重置为编辑前的数据(内部调用 _resetCellData 方法)
_resetCellData
- 类型:
(props?: string | string[]) => void - 描述:重置到编辑前的数据,请先使用
_openCellEdit后再使用该函数,通用支持传入prop参数指定重置某个单元格。
_isCellEdit
类型:
(props?: string, mode?: "and" | "or") => boolean描述:判断当前行是否处于编辑态,可选传入 2 个参数:
props:指定单元格是否处于编辑态,支持传入数组mode:当props为数组时,mode可以指定匹配规则,当为and时,所有props都处于编辑态时返回true,当为or时,任意一个props处于编辑态时返回true,默认为and
_validateCellEdit
类型:
(callback?: FormValidateCallback, prop?: string) => FormValidationResult | undefined描述:校验编辑态表单方法,可选传入 2 个参数:
callback:校验成功回调函数,等于ElForm的validate方法第一个参数props:指定校验的列,不传则默认校验所有列
如果不传参数,则校验整行表单。
表格单列编辑(校验)
通过在单个 column 中配置 editable: true 来开启单列编辑功能。
表格单元格编辑
在单行编辑的方法里传入 props 参数,来指定要编辑的单元格。
当在 _closeCellEdit 方法的第二个参数传入 true 时,表示重置当前行的数据到编辑前的状态(等于手动调用 _resetCellData 方法)。
如果涉及按钮的权限控制,请使用按钮配置 show 的函数式,搭配 _isCellEdit 方法判断当前哪些单元格处于编辑状态。
表格单元格编辑(点击)
超级组件的 editable 属性有 4 种类型:
- 当为
false时,表格无法整体编辑,默认值 - 当为
true时,开启表格整体编辑功能 - 当为
click时,通过点击单元格来开启编辑功能,鼠标悬停在单元格上时会有阴影提示 - 当为
dblclick时,通过双击单元格来开启编辑功能,鼠标悬停在单元格上时会有阴影提示
options 字典
默认 options 是读取单列 column.options 作为下拉选项,但是我们可以定义一个新的 options 字典,来覆盖单列 column.options。