# EditableTable

## 属性

### EditableTable 属性

| 属性名             | 类型    | 默认值 | 是否必须 | 说明             |
| ------------------ | ------- | ------ | -------- | ---------------- |
| columnConfig       | Array   | []     | 是       | 列配置数组       |
| dataList           | Array   | []     | 是       | 当前页数据列表   |
| total              | Number  | 0      | 是       | 总条数           |
| loading            | Boolean | false  | 否       | 是否正在加载     |
| hasIndexColumn     | Boolean | false  | 否       | 是否展示索引     |
| hasExpandRow       | Boolean | false  | 否       | 是否展示展开行   |
| hasSelectionColumn | Boolean | false  | 否       | 是否展示选择列   |
| rowDragAble        | Boolean | false  | 否       | 是否支持拖拽     |
| defaultOperations  | Array   | []     | 否       | 默认操作         |
| colorList          | Array   | []     | 否       | 行背景色颜色列表 |
| leftFixedCount     | Number  | 0      | 否       | 左侧固定列数量   |
| dragSemiRange      | Number  | 15     | 否       | 性能优化配置     |

#### columnConfig

所有和列相关的操作都在这里配置。具体和功能相关的配置可参考后续功能相关的文档，这里只说明两个必选的参数：prop 和 label。

prop: 该列在列表中的唯一标识，和 dataList 数组项中的属性相对应
label: 该列的表头展示名称

同时，columnConfig 列表项也能接收 el-table-column 组件所能传递的任何属性，如 width，min-width 等，这些属性会直接透传给对应的 el-table-column 组件。详见[el-table-column](https://element.eleme.io/#/en-US/component/table#table-column-attributes)

#### dataList

列表要显示的数据列表。其中每一项都必须包含 prop 属性，和 columnConfig 中的 prop 属性相对应。

其次，dataList 数据项还包含几个特别的属性：

- colorId: Number 类型，表示当前行的背景色 id，和 colorList 中的 id 对应
- isPinned: Boolean 类型，表示当前行是否置顶

#### defaultOperations

如果这个配置不为空数组，则会在列表最右侧显示操作列。当前支持三种操作:删除(delete)、编辑(edit)、置顶(top)。默认值为空数组，表示不显示操作列。

eg:

1. defaultOperations: ['delete', 'edit', 'top'] // 显示删除、编辑、置顶
2. defaultOperations: ['delete'] // 只显示删除操作

#### colorList

行背景色弹窗配置列表。ts 类型表示如下：

```ts
type IColorList = {
  name: string; // 颜色名称
  textColor: string; // 颜色弹窗中文本颜色，避免文字颜色与背景颜色相同时，无法看清文字
  sampleColor: string; // 颜色弹窗中样例的颜色
  bgColor: string; // 选中颜色后，行背景色
  id: number; // 颜色id
  default?: boolean; // 是否是默认色，默认色需要显示颜色图标
}[];
```

这里之所以有 sampleColor 和 bgColor，是因为样例样色和实际设置的背景色不一样。通常背景色是通过样例色添加透明度后得到的，但是在设置行背景色时，如果背景透明，会导致其他显示问题，所以这里使用不透明的实际背景色。

#### dragSemiRange

性能优化配置，拖拽元素的拖拽范围。默认值为 15，表示拖拽范围为当前拖拽元素的上下 15 个元素。

因为在拖拽过程中，需要对所有行进行遍历，设置属性，当列表过大时，性能较差，所以这里限制拖拽范围在当前拖拽元素的上下 15 个元素内，拖拽时只需要处理最多 30 个元素，性能会更好。

## Usage

### 自定义列

如果某一列数据需要特殊展示，可以在 columnConfig 中配置 slotName，该值为该列的插槽名称。slotName 不为空，则使用用户提供的插槽内容来渲染对应的列。

```ts
columnConfig: [
  {
    prop: "name",
    label: "姓名",
    slotName: "name",
  },
  {
    prop: "statusName",
    label: "状态",
    slotName: "statusName",
  },
];
```

```xml
<EditableTable :columnConfig="columnConfig" :dataList="dataList">
  <template v-slot:statusName="scope">
    自定义内容，{{ scope.row }}为该行数据
  </template>
</EditableTable>
```

以上例子，`name`对应的列使用默认渲染，而 statusName 则使用自定义的插槽内容进行渲染。

### 列排序

列排序是指，根据某一列的排序规则，对当前列表页的行数据进行排序。

开启列排序，只需要在 columnConfig 中设置 sortable 为 true，并且设置`sort-method`方法即可。

`sort-method`的使用方法和`el-table`的`sort-method`完全一致。

### 列筛选

列筛选是指，根据某一列的筛选规则，对当前列表页的行数据进行筛选，保留符合条件的行数据。

开启列筛选，需要在 columnConfig 中设置 filters 和 filter-method 方法，这两个属性均来自[el-table](https://element.eleme.io/#/en-US/component/table#table-column-attributes)。

### 列搜索

列搜索是指，根据用户的输入，对当前列表页的行数据进行搜索，保留符合条件的行数据。

开启列搜索，需要在 columnConfig 中设置 searchable 为 true。

如果不提供 searchMethod 方法，则会检查当前列对应的数据是否包含搜索关键字，如果包含，则保留。

如果提供了 searchMethod 方法，在触发搜索时会将该行数据传入该方法，返回 true 则保留该行，否则过滤该行。

### 列统计

列统计是指，根据某一列的统计规则，对当前列数据进行统计，统计结果会在表格底部显示。

开启列统计，需要在 columnConfig 中设置 summary 为 true，同时需要在 columnConfig 中设置 summaryMethod 方法，该方法接收一个由当前列数据组成的数组，返回一个字符串或数字类型的统计结果。

```ts
// price列统计所有价格的和
columnConfig: [
  {
    prop: "price",
    label: "价格",
    summary: true,
    summaryMethod: (data: number[]) => {
      return data.reduce((a, b) => a + b, 0);
    },
  },
];
```

### 单元格 hover 态展示