Skip to content

表格编辑

超级表格传入 initNativeRowField: true 开启表格编辑功能,有如下编辑类型:

  • 表格整体编辑
  • 表格单行编辑
  • 表格单列编辑
  • 表格单元格编辑

优先级从低到高生效,如开启了表格整体编辑,但是表格单元格配置禁止编辑,则该单元格将不能编辑。

同时支持编辑表单校验。

提示

  • 表格数据建议是响应式,这样表格才会监听到数据的变化并进行更新
  • 如果传入 data 数据时,表单数据不会和表格数据同步更新,请使用 formChange 事件手动同步
  • 如果传入 api 来让超级表格内部代理数据时,则表单数据会自动更新表格数据

表格编辑是基于 ProForm 超级表单 进行拓展,每一个表格列配置项 column.editProps 等于 ProFormItem 的 Props。

通过 editProps.el 配置项,可以传入编辑表单的组件,通过 editProps.elProps 可以给编辑表单的组件传入 Props,更多 editProps 的功能可以先去了解 ProForm 超级表单 超级表单的配置。

警告

使用表格编辑功能必须传入 initNativeRowField: true 来初始化内置的增强属性/方法,其中包括表格编辑属性/方法等

initNativeRowFieldtrue 会给表格行 row 添加一些 _ 开头的属性和方法,这会遍历每一个数据,因此 耗费一定性能,所以默认关闭。

表格整体编辑

当往 ProTable 传入 editable: true 时,会开启表格整体编辑功能。

表格单行编辑

initNativeRowFieldtrue,Teek 给每一个 row 里提供了一些增强的属性和方法,方便开发者进行单行或者单元格相关操作。

属性

_editable

  • 类型:boolean
  • 描述:判断当前行是否处于编辑状态。

_editableCol

  • 类型:Record<string, boolean>
  • 描述:获取当前行的多个单元格编辑状态,它是一个对象,键是单元格 prop,值为当前单元格是否处于编辑状态。

_proFormInstance

  • 类型:Record<string, ProFormInstance>
  • 描述:获取当前行的多个单元格编超级表单实例,它是一个对象,键是单元格 prop,值为当前单元格超级表单实例。

_options

  • 类型:Record<string, ElOption[]>
  • 描述,存储当前行每个 columnoptions 实际值。

_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 个参数:

    1. props:指定单元格是否处于编辑态,支持传入数组
    2. mode:当 props 为数组时,mode 可以指定匹配规则,当为 and 时,所有 props 都处于编辑态时返回 true,当为 or 时,任意一个 props 处于编辑态时返回 true,默认为 and

_validateCellEdit

  • 类型:(callback?: FormValidateCallback, prop?: string) => FormValidationResult | undefined

  • 描述:校验编辑态表单方法,可选传入 2 个参数:

    1. callback:校验成功回调函数,等于 ElFormvalidate 方法第一个参数
    2. props:指定校验的列,不传则默认校验所有列

如果不传参数,则校验整行表单。

表格单列编辑(校验)

通过在单个 column 中配置 editable: true 来开启单列编辑功能。

表格单元格编辑

在单行编辑的方法里传入 props 参数,来指定要编辑的单元格。

当在 _closeCellEdit 方法的第二个参数传入 true 时,表示重置当前行的数据到编辑前的状态(等于手动调用 _resetCellData 方法)。

如果涉及按钮的权限控制,请使用按钮配置 show 的函数式,搭配 _isCellEdit 方法判断当前哪些单元格处于编辑状态。

表格单元格编辑(点击)

超级组件的 editable 属性有 4 种类型:

  • 当为 false 时,表格无法整体编辑,默认值
  • 当为 true 时,开启表格整体编辑功能
  • 当为 click 时,通过点击单元格来开启编辑功能,鼠标悬停在单元格上时会有阴影提示
  • 当为 dblclick 时,通过双击单元格来开启编辑功能,鼠标悬停在单元格上时会有阴影提示

options 字典

默认 options 是读取单列 column.options 作为下拉选项,但是我们可以定义一个新的 options 字典,来覆盖单列 column.options