Closed danranVm closed 3 years ago
v-model:expandedRowKeys
key
(string \| number)[]
v-model:selectedRowKeys
borderless
boolean
false
columns
[TableColumn](#TableColumn)[]
dataSource
object[]
empty
string \| EmptyProps \| #empty
extra
[TableExtra](#TableExtra)
headless
pagination
TablePagination \| null
null
rowClassName
(record, index: number) => string
rowKey
string \| record => string \| number
id
scroll
[TableScrollable](#TableScrollable)
size
'large' \| 'medium' \| 'small'
medium
spin
boolean \| SpinProps
tableLayout
'auto' \| 'fixed'
column.ellipsis
fixed
tags
TableTags
表格列的配置描述,T 为 dataSource 的数据类型。
T
export type TableColumn<T = unknown> = TableColumnBase<T> | TableColumnExpandable<T> | TableColumnSelectable<T>
列配置的公用属性。
additional
object
class
style
align
'start' \| 'right' \| 'end'
'start'
colSpan
(record: T, index: number) => number
0
'start' \| 'end'
responsive
BreakpointKey[]
rowSpan
titleColSpan
width
string \| number
普通列配置的属性,继承 TableColumnCommon 。
TableColumnCommon
children
TableColumnBase[]
customRender
string \| TableColumnRenderFn<any, T>
string
customTitle
string \| TableColumnTitleFn
dataKey
string \| string[]
editable
ellipsis
sortable
[TableColumnSortable](#TableColumnSortable)
title
export interface TableColumnRenderOption<V = any, T = unknown> { value: V record: T index: number } export type TableColumnRenderFn<V = any, T = unknown> = (options: TableColumnRenderOption<V, T>) => VNodeTypes export type TableColumnTitleFn = (options: { title?: string }) => VNodeTypes
可展开列配置的属性,继承 TableColumnCommon
type
'expandable'
expandable
customExpand
string \| TableColumnExpandableExpandFn<T>
customIcon
string \| TableColumnExpandableIconFn<T>
enabled
(record:T, index: number) => boolean
icon
[string, string]
['plus', 'minus']
indent
number
12
trigger
'click' \| 'doubleClick'
onChange
(expendedRowKeys: (string | number)[]) => void
onExpand
(expanded: boolean, record: T) => void
export type TableColumnExpandableExpandFn<T = unknown> = (options: { record: T; index: number }) => VNodeTypes export type TableColumnExpandableIconFn<T = unknown> = (options: { expanded: boolean record: T onExpand: () => void }) => VNodeTypes
可选择列配置的属性,继承 TableColumnCommon
'selectable'
selectable
(record: T, index: number) => boolean
multiple
true
options
boolean \| TableSelectableSelection[]
(selectedRowKeys: (string | number)[]) => void
onSelect
(selected: boolean, record: T) => void
onSelectAll
onSelectInvert
onSelectNone
() => void
export interface TableColumnSelectableOption { key: string | number text: string onClick: (selectedRowKeys: (string | number)[]) => void }
directions
Array<'ascend' \| 'descend' \| null>
['ascend', 'descend', null]
order
'ascend' \| 'descend' \| null
showTooltip
tooltip
sorter
(curr: T, next: T) => number
Array.sort
dropdown
(options: TableExtraDropdownOptions) => VNode \| #extraDropdown="TableExtraDropdownOptions"
dropdownVisible
string \| #extraIcon
'ellipsis'
TableExtraOption[]
onDropDownVisibleChange
(visible) => void
export interface TablePagination extends PaginationProps { position: TablePaginationPosition } export type TablePaginationPosition = 'topStart' | 'top' | 'topEnd' | 'bottomStart' | 'bottom' | 'bottomEnd'
toTopOnChange
x
string \| number \| boolean
max-content
y
footer
header
summary
@coolyuantao 根据我们总结的需求,结合 antd 的 API,做了初步的 设计,使用方式跟 antd 差不多,可以看 https://ant.design/components/table-cn/
调整了部分 API, 移除了 filterable
re #408 #412
What problem does this feature solve?
What does the proposed API look like?
API
ix-table
TableProps
v-model:expandedRowKeys
key
数组(string \| number)[]
v-model:selectedRowKeys
key
数组(string \| number)[]
borderless
boolean
false
columns
[TableColumn](#TableColumn)[]
dataSource
object[]
empty
string \| EmptyProps \| #empty
extra
[TableExtra](#TableExtra)
headless
boolean
false
pagination
TablePagination \| null
null
时表示不显示分页rowClassName
(record, index: number) => string
rowKey
key
的取值string \| record => string \| number
id
scroll
[TableScrollable](#TableScrollable)
size
'large' \| 'medium' \| 'small'
medium
spin
boolean \| SpinProps
tableLayout
'auto' \| 'fixed'
column.ellipsis
时,默认值为fixed
tags
TableTags
TableColumn
表格列的配置描述,
T
为dataSource
的数据类型。TableColumnCommon
列配置的公用属性。
additional
object
class
,style
或者其他属性align
'start' \| 'right' \| 'end'
'start'
colSpan
colSpan
(record: T, index: number) => number
0
时,不渲染, 通常用于列合并fixed
'start' \| 'end'
responsive
BreakpointKey[]
rowSpan
rowSpan
(record: T, index: number) => number
0
时,不渲染, 通常用于行合并titleColSpan
colSpan
0
时,不渲染width
string \| number
TableColumnBase
普通列配置的属性,继承
TableColumnCommon
。children
TableColumnBase[]
customRender
string \| TableColumnRenderFn<any, T>
string
时,对应插槽名customTitle
string \| TableColumnTitleFn
string
时,对应插槽名dataKey
string \| string[]
editable
boolean
false
ellipsis
boolean
false
key
key
的取值string \| number
dataKey
sortable
[TableColumnSortable](#TableColumnSortable)
title
string
TableColumnExpandable
可展开列配置的属性,继承
TableColumnCommon
type
'expandable'
type
设置为expandable
,即为展开列customExpand
string \| TableColumnExpandableExpandFn<T>
string
时,对应插槽名customIcon
string \| TableColumnExpandableIconFn<T>
string
时,对应插槽名enabled
(record:T, index: number) => boolean
icon
[string, string]
['plus', 'minus']
indent
number
12
trigger
'click' \| 'doubleClick'
onChange
(expendedRowKeys: (string | number)[]) => void
onExpand
trigger
触发(expanded: boolean, record: T) => void
TableColumnSelectable
可选择列配置的属性,继承
TableColumnCommon
type
'selectable'
type
设置为selectable
,即为选择列enabled
(record: T, index: number) => boolean
multiple
boolean
true
options
boolean \| TableSelectableSelection[]
false
false
时,不显示,为true
时,显示默认的选择项trigger
type
,触发行选择的方式'click' \| 'doubleClick'
onChange
(selectedRowKeys: (string | number)[]) => void
onSelect
trigger
触发(selected: boolean, record: T) => void
onSelectAll
(selectedRowKeys: (string | number)[]) => void
onSelectInvert
(selectedRowKeys: (string | number)[]) => void
onSelectNone
() => void
TableColumnSortable
directions
Array<'ascend' \| 'descend' \| null>
['ascend', 'descend', null]
order
'ascend' \| 'descend' \| null
showTooltip
tooltip
提示boolean
true
sorter
(curr: T, next: T) => number
Array.sort
TableExtra
dropdown
(options: TableExtraDropdownOptions) => VNode \| #extraDropdown="TableExtraDropdownOptions"
dropdownVisible
boolean
false
icon
string \| #extraIcon
'ellipsis'
options
TableExtraOption[]
onDropDownVisibleChange
(visible) => void
TablePagination
TableScroll
toTopOnChange
boolean
false
x
string \| number \| boolean
max-content
和true
y
string \| number
TableSlots
footer
header
summary