# table-column (w-table-column)

- **Import**: `WTableColumn` from `win-design-next`
- **Tag**: `<w-table-column>`
- **说明**: WTableColumn
- **分类**: data-display
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/table.md`

## API

## Table-column API

### Table-column 属性

| 属性名                | 说明                                                                                                                                                                                   | Type                                                                                                                                                                        | 默认值                            |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| type                  | 对应列的类型。 如果设置了`selection`则显示多选框； 如果设置了` index` 则显示该行的索引（从 1 开始计算）； 如果设置了` expand` 则显示为一个可展开的按钮                                 | ^[enum]`'default' \| 'selection' \| 'index' \| 'expand'`                                                                                                                    | default                           |
| index                 | 如果设置了 `type=index`，可以通过传递 `index` 属性来自定义索引                                                                                                                         | ^[number] / ^[Function]`(index: number) => number`                                                                                                                          | —                                 |
| label                 | 显示的标题                                                                                                                                                                             | ^[string]                                                                                                                                                                   | —                                 |
| column-key            | column 的 key， column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件                                                                              | ^[string]                                                                                                                                                                   | —                                 |
| prop                  | 字段名称 对应列内容的字段名， 也可以使用 `property`属性                                                                                                                                | ^[string]                                                                                                                                                                   | —                                 |
| width                 | 对应列的宽度                                                                                                                                                                           | ^[string] / ^[number]                                                                                                                                                       | ''                                |
| min-width             | 对应列的最小宽度， 对应列的最小宽度， 与 `width` 的区别是 `width` 是固定的，`min-width` 会把剩余宽度按比例分配给设置了 `min-width` 的列                                                | ^[string] / ^[number]                                                                                                                                                       | ''                                |
| fixed                 | 列是否固定在左侧或者右侧。 `true` 表示固定在左侧                                                                                                                                       | ^[enum]`'left' \| 'right'` / ^[boolean]                                                                                                                                     | false                             |
| render-header         | 列标题 Label 区域渲染使用的 Function                                                                                                                                                   | ^[Function]`(data: { column: any, $index: number }) => void`                                                                                                                | —                                 |
| sortable              | 对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件                                                                                   | ^[boolean] / ^[string]                                                                                                                                                      | false                             |
| sort-method           | 指定数据按照哪个属性进行排序，仅当`sortable`设置为`true`的时候有效。 应该如同 Array.sort 那样返回一个 Number                                                                           | ^[Function]`(a: T, b: T) => number`                                                                                                                                         | —                                 |
| sort-by               | 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 | ^[Function]`(row: any, index: number) => string` / ^[string] / ^[object]`string[]`                                                                                          | —                                 |
| sort-orders           | 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。 需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序                                            | ^[object]`('ascending' \| 'descending' \| null)[]`                                                                                                                          | ['ascending', 'descending', null] |
| resizable             | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）                                                                                                               | ^[boolean]                                                                                                                                                                  | true                              |
| formatter             | 用来格式化内容                                                                                                                                                                         | ^[function]`(row: any, column: any, cellValue: any, index: number) => VNode \| string`                                                                                      | —                                 |
| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip                                                                                                                                                         | ^[boolean] / [`object`](#table-attributes)                                                                                                                                  | undefined                         |
| align                 | 对齐方式                                                                                                                                                                               | ^[enum]`'left' \| 'center' \| 'right'`                                                                                                                                      | left                              |
| header-align          | 表头对齐方式， 若不设置该项，则使用表格的对齐方式                                                                                                                                      | ^[enum]`'left' \| 'center' \| 'right'`                                                                                                                                      | left                              |
| class-name            | 列的 className                                                                                                                                                                         | ^[string]                                                                                                                                                                   | —                                 |
| label-class-name      | 当前列标题的自定义类名                                                                                                                                                                 | ^[string]                                                                                                                                                                   | —                                 |
| selectable            | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选                                                                                 | ^[Function]`(row: any, index: number) => boolean`                                                                                                                           | —                                 |
| reserve-selection     | 数据刷新后是否保留选项，仅对 ` type=selection` 的列有效， 请注意， 需指定 `row-key` 来让这个功能生效。                                                                                 | ^[boolean]                                                                                                                                                                  | false                             |
| filters               | 数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。                                                                       | ^[array]`Array`                                                                                                                                                             | —                                 |
| filter-placement      | 过滤弹出框的定位                                                                                                                                                                       | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | —                                 |
| filter-class-name     | 过滤弹出框的 className                                                                                                                                                                 | ^[string]                                                                                                                                                                   | —                                 |
| filter-multiple       | 数据过滤的选项是否多选                                                                                                                                                                 | ^[boolean]                                                                                                                                                                  | true                              |
| filter-method         | 数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。                                                                                          | ^[function]`(value: any, row: any, column: any) => void`                                                                                                                    | —                                 |
| filtered-value        | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。                                                                                                                 | ^[object]`string[]`                                                                                                                                                         | —                                 |
| tooltip-formatter     | 使用 `show-overflow-tooltip` 时自定义 tooltip 内容                                                                                                                                     | ^[Function]`(data: { row: any, column: any, cellValue: any }) => VNode \| string`                                                                                           | —                                 |

### Table-column 插槽

| 插槽名      | 说明               | 类型                                                 |
| ----------- | ------------------ | ---------------------------------------------------- |
| default     | 自定义列的内容     | ^[object]`{ row: any, column: any, $index: number }` |
| header      | 自定义表头的内容， | ^[object]`{ column: any, $index: number }`           |
| filter-icon | 自定义 filter 图标 | ^[object]`{ filterOpened: boolean }`                 |
