From 904a502e3fcddeb502e0ebcd909dab04414d6001 Mon Sep 17 00:00:00 2001 From: danranvm Date: Fri, 7 Jan 2022 12:28:07 +0800 Subject: [PATCH] feat(comp:table): use `menus` instead of `options` BREAKING CHANGE: `options` in `TableColumnSelectable` was deprecated, please use `menus` instead --- packages/components/table/docs/Index.zh.md | 29 ++++++++++++++-------- packages/components/table/src/token.ts | 5 ++-- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/packages/components/table/docs/Index.zh.md b/packages/components/table/docs/Index.zh.md index 06464daf1..294c4c424 100644 --- a/packages/components/table/docs/Index.zh.md +++ b/packages/components/table/docs/Index.zh.md @@ -71,9 +71,9 @@ export type TableColumn = | `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 { @@ -121,23 +121,16 @@ export interface TableColumnExpandableSlots { | `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 | 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 | @@ -187,3 +180,19 @@ export type TablePaginationPosition = 'topStart' | 'top' | 'topEnd' | 'bottomSta | 名称 | 说明 | 参数类型 | 备注 | | --- | --- | --- | --- | | `scrollTo` | 滚动到指定位置 | `(option?: number \| VirtualScrollToOptions) => void` | 仅 `virtual` 模式下可用 | + +### IxTableColumn + +在 `template` 中描述 `columns` 的语法糖。 + +```html + +``` diff --git a/packages/components/table/src/token.ts b/packages/components/table/src/token.ts index 0726adee2..174fc1d62 100644 --- a/packages/components/table/src/token.ts +++ b/packages/components/table/src/token.ts @@ -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' @@ -46,7 +47,7 @@ export const TABLE_TOKEN: InjectionKey = Symbol('TABLE_TOKEN') export interface TableBodyContext { mainTableWidth: Ref - changeColumnWidth: (key: Key, width: number | false) => void + changeColumnWidth: (key: VKey, width: number | false) => void } export const tableBodyToken: InjectionKey = Symbol('tableBodyToken')