bixi/packages/core/editable-table/index.zh-CN.md

企业级中后台前端解决方案

---
type: Basic
title: Editable Table
subtitle: 可编辑表格
cols: 1
order: 8
---

```ts
import { BixiEditableTableModule } from '@bixi/core/editable-table';
```

## API

### 基本 API

#### editable-table
| 成员 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[cols]` | 列头配置| `IEditableCol[]` | - |
| `[(rows)]` | 行数据，可用双向绑定 | `IEditableRow[]` | `[]` |
| `[footer]` | 自定义 footer 按钮 | `TemplateRef<{}> | string | null ` | `-` |
| `[scroll]` | 配置 table 滚动高度  | `object` | `{y: '300px'}` |
| `[dragable]` | 是否可拖拽  | `boolean` | `false` |
| `[validate]` | 保存时的校验函数 | `(fcs: FormGroup, rows: IEditableRow[], row: IEditableRow | null) => { key: string; message: string }[]` | `-` |
| `(addRow)` | 新增行回调函数 | `EventEmitter<FormGroup>` | `-` |
| `(deleteRow)` | 删除行回调函数 | `EventEmitter<IEditableRow>` | `-` |
| `(dirtyRowsChange)` | 确认编辑结果数据回调 | `EventEmitter<IEditableRow[]>` | `-` |

#### 方法

| 成员 | 说明 | 类型 |
|----|----|----|-----|
| `reset` | `重置当前编辑状态` | `-` |

## 接口

### EEditableColType

```ts
enum EEditableColType {
  'text' = 'text',
  'select' = 'select',
  'template' = 'template'
}
```

### IEditableCol

```ts
interface IEditableCol {
  type?: EEditableColType; // 编辑类型
  options?: IEditableSelectOptions;
  name?: string;
  titleTipContent?: string | TemplateRef<{}>;
  titleTipIcon?: string;
  key: string;
  editable?: boolean;
  validators?: ValidatorFn[] | ValidatorFn;
  onChange?: (fg: FormGroup) => { [key: string]: NzSafeAny; };
}
```

## FAQ

### 支持 form 操作

当 `editable-table` 配合 form 使用时，editable-table 支持 `formControlName` 属性。具体使用方式查看示例。