# table-v2 (w-table-v2)

- **Import**: `WTableV2` from `win-design-next`
- **Tag**: `<w-table-v2>`
- **说明**: Virtualized Table 虚拟化表格
- **分类**: data-display
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/table-v2.md`

## API

## TableV2 API

### Attributes

| 属性名                    | 描述说明                                                                   | 类型                           | 默认值    |
| ------------------------- | -------------------------------------------------------------------------- | ------------------------------ | --------- |
| cache                     | 为了更好的渲染效果预先多加载的行数                                         | `number`                       | 2         |
| estimated-row-height      | 渲染动态的单元格的预估高度                                                 | `number`                       | —         |
| header-class              | header 部分的自定义 class 名                                               | `string` / Function            | —         |
| header-props              | header 部分的自定义 props 名                                               | `object` / Function            | —         |
| header-cell-props         | header cell 部分的自定义 props 名                                          | `object` / Function            | —         |
| header-height             | Header 的高度由`height`设置。 如果传入数组，它会使 header row 等于数组长度 | `number`/ `number[]`           | 50        |
| footer-height             | Footer 部分的高度，当传入值时，这部分将被计算入 table 的高度里             | `number`                       | 0         |
| row-class                 | row wrapper 部分的自定义 class 名                                          | `string` / Function            | —         |
| row-key                   | 每行的 key 值，如果不提供，将使用索引 index 代替                           | `string` / `Symbol` / `number` | id        |
| row-props                 | row component 部分的自定义 class 名                                        | `object` / Function            | —         |
| row-height                | 每行的高度, 用于计算表的总高度                                             | `number`                       | 50        |
| cell-props                | 每个单元格 cell 的自定义 props (除了 header cell 以外)                     | `object` / Function            | —         |
| columns                   | 列 column 的配置数组                                                       | [Column[]](#column-attribute)  | —         |
| data                      | 要在表中渲染的数据数组                                                     | [Data[]](#typings)             | []        |
| data-getter               | 一个自定义方法从数据源获取数据                                             | Function](#typings)>           | —         |
| fixed-data                | 渲染行在表格主内容上方和 header 下方区域的数据                             | `object`\                      | —         |
| expand-column-key         | 列的 key 来标记哪个行可以被展开                                            | `string`                       | —         |
| expanded-row-keys         | 存放行展开状态的 key 的数组，可以和 `v-model` 搭配使用                     | [KeyType[]](#typings)          | —         |
| default-expanded-row-keys | 默认展开的行的 key 的数组, **这个数据不是响应式的**                        | [KeyType[]](#typings)          | —         |
| class                     | 表格的类名称，将应用于表格的全部的三个部分 (左、右、主)                    | `string` / `array` / `object`  | —         |
| fixed                     | 单元格宽度是自适应还是固定                                                 | `boolean`                      | false     |
| width ^(required)         | 表格的宽度                                                                 | `number`                       | —         |
| height ^(required)        | 表格的高度                                                                 | `number`                       | —         |
| max-height                | 表格的最大高度                                                             | `number`                       | —         |
| indent-size               | 树形表的水平缩进                                                           | `number`                       | 12        |
| h-scrollbar-size          | 配置表格的水平滚动条大小，防止水平和垂直滚动条重叠。                       | `number`                       | 10        |
| scrollbar-size            | 配置表格的垂直滚动条大小，防止水平和垂直滚动条重叠。                       | `number`                       | 10        |
| scrollbar-always-on       | 如果开启，滚动条将一直显示，反之只会在鼠标经过时显示。                     | `boolean`                      | false     |
| sort-by                   | 排序方式                                                                   | `object`\                      | {}        |
| sort-state                | 多个排序                                                                   | `object`\                      | undefined |

### Slots

| 插槽名      | 参数       |
| ----------- | ---------- |
| cell        | `object`\  |
| header      | `object`\  |
| header-cell | `object`\  |
| row         | `object`\  |
| footer      | —          |
| empty       | —          |
| overlay     | —          |

### Events

| 事件名               | 描述                               | 参数                  |
| -------------------- | ---------------------------------- | --------------------- |
| column-sort          | 列排序时调用                       | `object`\             |
| expanded-rows-change | 行展开状态改变时触发               | [KeyType[]](#typings) |
| end-reached          | 到达表格末尾时触发                 | —                     |
| scroll               | 表格被用户滚动后触发               | `object`\             |
| rows-rendered        | 当行被渲染后触发                   | `object`\             |
| row-expand           | 点击箭头图标展开/折叠树节点时触发  | `object`\             |
| row-event-handlers   | 当每行添加了一系列事件处理器时触发 | `object`\             |

### Methods

| 事件名       | 描述                           | 参数                                                                                   |
| ------------ | ------------------------------ | -------------------------------------------------------------------------------------- |
| scrollTo     | 滚动到给定位置                 | ^[Function]`(param: {scrollLeft?: number, scrollTop?: number}) => void`                |
| scrollToLeft | 滚动到给定的水平位置           | ^[Function]`(scrollLeft: number) => void`                                              |
| scrollToTop  | 滚动到给定的垂直位置           | ^[Function]`(scrollTop: number) => void`                                               |
| scrollToRow  | 使用给定的滚动策略滚动至指定行 | ^[Function]`(row: number, strategy?: 'center' \| 'end' \| 'start' \| 'smart') => void` |
