Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(comp:table): use menus instead of options #709

Merged
merged 1 commit into from
Jan 7, 2022
Merged

feat(comp:table): use menus instead of options #709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 19 additions & 10 deletions packages/components/table/docs/Index.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,9 @@ export type TableColumn<T = any, V = any> =
| `dataKey` | 数据在数据项中对应的路径 | `string \| string[]` | - | - | 支持通过数组查询嵌套路径 |
| `ellipsis` | 超过宽度将自动省略 | `boolean` | `false` | - | 不支持和排序筛选一起使用 |
| `key` | 表格列 `key` 的取值 | `string \| number` | - | - | 默认为 `dataKey` |
| `slots` | 自定义渲染 | `TableColumnBaseSlots` | - | - | 值的类型为 `string` 时，对应插槽名 |
| `sortable` | 是否可排序, 参见[TableColumnSortable](#TableColumnSortable) | `TableColumnSortable` | - | - | - |
| `title` | 列头的文本 | `string` | - | - | - |
| `slots` | 自定义渲染 | `TableColumnBaseSlots` | - | - | 值的类型为 `string` 时，对应插槽名 |

```ts
export interface TableColumnBaseSlots<T = any, V = any> {
Expand Down Expand Up @@ -121,23 +121,16 @@ export interface TableColumnExpandableSlots<T = any, V = any> {
| `type` | 列类型 | `'selectable'` | - | - | `type` 设置为 `selectable`,即为选择列 |
| `disabled` | 设置是否允许行选择 | `(record: T, rowIndex: number) => boolean` | - | - | - |
| `multiple` | 是否支持多选 | `boolean` | `true` | - | - |
| `options` | 自定义列头选择项 | `boolean \| TableSelectableSelection[]` | `false` | - | 为 `false` 时，不显示，为 `true` 时，显示默认的选择项 |
| `menus` | 自定义列头下拉菜单 | `('all' \| 'invert' \| 'none' \| 'pageInvert' \| MenuData)[]` | - | - | - |
| `trigger` | 不通过点击选择框，触发行选择的方式 | `'click' \| 'doubleClick'` | - | - | - |
| `onChange` | 选中状态发生变化时触发 | `(selectedRowKeys: (string \| number)[], selectedRecords: T[]) => void` | - | - | - |
| `onMenuClick` | 点击下拉菜单时触发 | `(options: MenuClickOptions, currentPageRowKeys: VKey[]) => void` | - | - | 如果点击时预设的值, 则不会触发该回调（例如：`all`, 那么触发的是 `onSelectAll`） |
| `onSelect` | 点击选择框，或通过 `trigger` 触发 | `(selected: boolean, record: T) => void` | - | - | - |
| `onSelectAll` | 点击全选所有时触发 | `(selectedRowKeys: (string \| number)[]) => void` | - | - | - |
| `onSelectInvert` | 点击反选所有时触发 | `(selectedRowKeys: (string \| number)[]) => void` | - | - | - |
| `onSelectNone` | 点击清空所有时触发 | `() => void` | - | - | - |
| `onSelectPageInvert` | 点击反选当页所有时触发 | `() => void` | - | - | - |

```ts
export interface TableColumnSelectableOption {
key: string | number
text: string
onClick: (selectedRowKeys: (string | number)[]) => void
}
```

##### TableColumnSortable

| 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
Expand Down Expand Up @@ -187,3 +180,19 @@ export type TablePaginationPosition = 'topStart' | 'top' | 'topEnd' | 'bottomSta
| 名称 | 说明 | 参数类型 | 备注 |
| --- | --- | --- | --- |
| `scrollTo` | 滚动到指定位置 | `(option?: number \| VirtualScrollToOptions) => void` | 仅 `virtual` 模式下可用 |

### IxTableColumn

在 `template` 中描述 `columns` 的语法糖。

```html
<template>
<IxTable :dataSource="data">
<IxTableColumn title="Name" dataKey="name">
<template #cell="{ value }">
<a>{{ value }}</a>
</template>
</IxTableColumn>
</IxTable>
</template>
```
5 changes: 3 additions & 2 deletions packages/components/table/src/token.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import type { SelectableContext } from './composables/useSelectable'
import type { SortableContext } from './composables/useSortable'
import type { StickyContext } from './composables/useSticky'
import type { TagsContext } from './composables/useTags'
import type { Key, TableProps } from './types'
import type { TableProps } from './types'
import type { VKey } from '@idux/cdk/utils'
import type { TableConfig } from '@idux/components/config'
import type { TableLocale } from '@idux/components/i18n'
import type { ComputedRef, InjectionKey, Ref, Slots } from 'vue'
Expand Down Expand Up @@ -46,7 +47,7 @@ export const TABLE_TOKEN: InjectionKey<TableContext> = Symbol('TABLE_TOKEN')

export interface TableBodyContext {
mainTableWidth: Ref<number>
changeColumnWidth: (key: Key, width: number | false) => void
changeColumnWidth: (key: VKey, width: number | false) => void
}

export const tableBodyToken: InjectionKey<TableBodyContext> = Symbol('tableBodyToken')