@g3-cscec/meta-editable-table NPM

G3EditableTable

可编辑表格，基于G3BaseTable实现，扩展了以下能力

[] 可编辑行，通过Form组件实现，可自定义数据校验规则以及校验提示信息
- 逐行编辑
- 逐行编辑时，错误提示已tooltip的形式显示，不撑开表格高度
- 错误提示支持异步校验
- 弹出层编辑 - Modal弹窗
- 弹出层编辑 - Drawer抽屉
- 行内展开编辑，可延后
动态新增行，可选择新增至最上面、新增至最下面、或者新增至任意两行之间
增加行状态，old未变化, add新增行，edit编辑行，del删除行
动态删除行，要根据当前行状态来判断是直接删除还是修改行状态
增加行的排序，行的序号rowNum要提交给后端，所以不能是基础表格中的index+1

Props

继承自G3BaseTable的属性，并新增了以下属性：

{
  /**
   * 表格是否可编辑
   * @default true
   */
  editable?: boolean;
  /**
   * 是否展示基本的操作按钮，指的是删除、向上新增一行、向下新增一行
   * @default true
   */
  showBaseRowActions?: boolean;
  /**
   * 表格行是否可排序
   * @default false
   */
  enableRowSort?: boolean;
}

API

{
  addRow: (props: AddRowProps<RecordType>) => void;

  /**
   * 删除行, 提供根据 rowKey 和 rowIndex 两种删除方式
   * @property props.rowKey 删除行的rowKey字段
   * @property props.rowIndex 删除行的索引
   * @property props.callback 回调函数
   */
  delRow: (props: DelRowProps) => void;
  /**
   * 获取表格数据
   * @property options.status 行状态
   * 0, 代表old，即未变化
   * 1, 代表edit，即编辑
   * 2, 代表add，即新增
   * 3, 代表del，即删除
   */
  getTableData: (options?: { status: ROWSTATUS }) => RecordType[];
}