mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-11 11:39:43 +08:00
docs(components): [table-v2] unified display style of parameters (#18937)
* docs(components): [table-v2] unified display style of parameters * Update docs/en-US/component/table-v2.md Co-authored-by: btea <2356281422@qq.com> * feat: update --------- Co-authored-by: btea <2356281422@qq.com>
This commit is contained in:
sea
GitHub
parent
9520f661f4
commit
e271f0cf85
@ -296,45 +296,45 @@ table-v2/manual-scroll
|
|||||||
## TableV2 Attributes
|
## TableV2 Attributes
|
||||||
|
|
||||||
| Name | Description | Type | Default |
|
| Name | Description | Type | Default |
|
||||||
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | --------- |
|
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | --------- |
|
||||||
| cache | Number of rows rendered in advance to boost the performance | Number | 2 |
|
| cache | Number of rows rendered in advance to boost the performance | `number` | 2 |
|
||||||
| estimated-row-height | The estimated row height for rendering dynamic height rows | Number | — |
|
| estimated-row-height | The estimated row height for rendering dynamic height rows | `number` | — |
|
||||||
| header-class | Customized class name passed to header wrapper | String/Function\<[HeaderClassGetter](#typings)\> | — |
|
| header-class | Customized class name passed to header wrapper | `string` / Function<[HeaderClassGetter](#typings)> | — |
|
||||||
| header-props | Customized props name passed to header component | Object/Function\<[HeaderPropsGetter](#typings)\> | — |
|
| header-props | Customized props name passed to header component | `object` / Function<[HeaderPropsGetter](#typings)> | — |
|
||||||
| header-cell-props | Customized props name passed to header cell component | Object/Function\<[HeaderCellPropsGetter](#typings)\> | — |
|
| header-cell-props | Customized props name passed to header cell component | `object` / Function<[HeaderCellPropsGetter](#typings)> | — |
|
||||||
| header-height | The height of the header is set by `height`. If given an array, it renders header rows equal to its length | Number/Array\<Number\> | 50 |
|
| header-height | The height of the header is set by `height`. If given an array, it renders header rows equal to its length | `number`/ `number[]` | 50 |
|
||||||
| footer-height | The height of the footer element, when provided, will be part to the calculation of the table's height. | Number | 0 |
|
| footer-height | The height of the footer element, when provided, will be part to the calculation of the table's height. | `number` | 0 |
|
||||||
| row-class | Customized class name passed to row wrapper | String/Function\<[RowClassGetter](#typings)\> | — |
|
| row-class | Customized class name passed to row wrapper | `string` / Function<[RowClassGetter](#typings)> | — |
|
||||||
| row-key | The key of each row, if not provided, will be the index of the row | String/Symbol/Number | id |
|
| row-key | The key of each row, if not provided, will be the index of the row | `string` / `Symbol` / `number` | id |
|
||||||
| row-props | Customized props name passed to row component | Object/Function\<[RowPropsGetter](#typings)\> | — |
|
| row-props | Customized props name passed to row component | `object` / Function<[RowPropsGetter](#typings)> | — |
|
||||||
| row-height | The height of each row, used for calculating the total height of the table | Number | 50 |
|
| row-height | The height of each row, used for calculating the total height of the table | `number` | 50 |
|
||||||
| cell-props | extra props passed to each cell (except header cells) | Object/Function\<[CellPropsGetter](#typings)\> | — |
|
| cell-props | extra props passed to each cell (except header cells) | `object` / Function<[CellPropsGetter](#typings)> | — |
|
||||||
| columns | An array of column definitions. | Array\<[Column](#column-attribute)\> | — |
|
| columns | An array of column definitions. | [Column[]](#column-attribute) | — |
|
||||||
| data | An array of data to be rendered in the table. | Array\<[Data](#typings)\> | [] |
|
| data | An array of data to be rendered in the table. | [Data[]](#typings) | [] |
|
||||||
| data-getter | A method to customize data fetch from the data source. | Function | — |
|
| data-getter | A method to customize data fetch from the data source. | Function<[DataGetter\<T\>](#typings)> | — |
|
||||||
| fixed-data | Data for rendering rows above the main content and below the header | Array\<[Data](#typings)\> | — |
|
| fixed-data | Data for rendering rows above the main content and below the header | `object`\<[Data](#typings)\> | — |
|
||||||
| expand-column-key | The column key indicates which row is expandable | String | — |
|
| expand-column-key | The column key indicates which row is expandable | `string` | — |
|
||||||
| expanded-row-keys | An array of keys for expanded rows, can be used with `v-model` | Array\<[KeyType](#typings)\> | — |
|
| expanded-row-keys | An array of keys for expanded rows, can be used with `v-model` | [KeyType[]](#typings) | — |
|
||||||
| default-expanded-row-keys | An array of keys for default expanded rows, **NON REACTIVE** | Array\<[KeyType](#typings)\> | — |
|
| default-expanded-row-keys | An array of keys for default expanded rows, **NON REACTIVE** | [KeyType[]](#typings) | — |
|
||||||
| class | Class name for the virtual table, will be applied to all three tables (left, right, main) | String/Array/Object | — |
|
| class | Class name for the virtual table, will be applied to all three tables (left, right, main) | `string` / `array` / `object` | — |
|
||||||
| fixed | Flag indicates the table column's width to be fixed or flexible. | Boolean | false |
|
| fixed | Flag indicates the table column's width to be fixed or flexible. | `boolean` | false |
|
||||||
| width ^(required) | Width of the table | Number | — |
|
| width ^(required) | Width of the table | `number` | — |
|
||||||
| height ^(required) | Height of the table | Number | — |
|
| height ^(required) | Height of the table | `number` | — |
|
||||||
| max-height | Maximum height of the table | Number | — |
|
| max-height | Maximum height of the table | `number` | — |
|
||||||
| h-scrollbar-size | Indicates the horizontal scrollbar's size for the table, used to prevent the horizontal and vertical scrollbar to collapse | Number | 6 |
|
| h-scrollbar-size | Indicates the horizontal scrollbar's size for the table, used to prevent the horizontal and vertical scrollbar to collapse | `number` | 6 |
|
||||||
| v-scrollbar-size | Indicates the vertical scrollbar's size for the table, used to prevent the horizontal and vertical scrollbar to collapse | Number | 6 |
|
| v-scrollbar-size | Indicates the vertical scrollbar's size for the table, used to prevent the horizontal and vertical scrollbar to collapse | `number` | 6 |
|
||||||
| scrollbar-always-on | If true, the scrollbar will always be shown instead of when mouse is placed above the table | Boolean | false |
|
| scrollbar-always-on | If true, the scrollbar will always be shown instead of when mouse is placed above the table | `boolean` | false |
|
||||||
| sort-by | Sort indicator | Object\<[SortBy](#typings)\> | {} |
|
| sort-by | Sort indicator | `object`\<[SortBy](#typings)\> | {} |
|
||||||
| sort-state | Multiple sort indicator | Object\<[SortState](#typings)\> | undefined |
|
| sort-state | Multiple sort indicator | `object`\<[SortState](#typings)\> | undefined |
|
||||||
|
|
||||||
## TableV2 Slots
|
## TableV2 Slots
|
||||||
|
|
||||||
| Name | Params |
|
| Name | Params |
|
||||||
| ----------- | ------------------------------- |
|
| ----------- | ------------------------------------------- |
|
||||||
| cell | [CellSlotProps](#typings) |
|
| cell | `object`\<[CellSlotProps](#typings)\> |
|
||||||
| header | [HeaderSlotProps](#typings) |
|
| header | `object`\<[HeaderSlotProps](#typings)\> |
|
||||||
| header-cell | [HeaderCellSlotProps](#typings) |
|
| header-cell | `object`\<[HeaderCellSlotProps](#typings)\> |
|
||||||
| row | [RowSlotProps](#typings) |
|
| row | `object`\<[RowSlotProps](#typings)\> |
|
||||||
| footer | — |
|
| footer | — |
|
||||||
| empty | — |
|
| empty | — |
|
||||||
| overlay | — |
|
| overlay | — |
|
||||||
@ -342,23 +342,23 @@ table-v2/manual-scroll
|
|||||||
## TableV2 Events
|
## TableV2 Events
|
||||||
|
|
||||||
| Name | Description | Parameters |
|
| Name | Description | Parameters |
|
||||||
| -------------------- | --------------------------------------------------------------------- | ---------------------------------------- |
|
| -------------------- | --------------------------------------------------------------------- | ------------------------------------------ |
|
||||||
| column-sort | Invoked when column sorted | Object\<ColumnSortParam\> |
|
| column-sort | Invoked when column sorted | `object`\<[ColumnSortParam](#typings)\> |
|
||||||
| expanded-rows-change | Invoked when expanded rows changed | `Array<KeyType>` |
|
| expanded-rows-change | Invoked when expanded rows changed | [KeyType[]](#typings) |
|
||||||
| end-reached | Invoked when the end of the table is reached | — |
|
| end-reached | Invoked when the end of the table is reached | — |
|
||||||
| scroll | Invoked after scrolling | Object\<[ScrollParams](#typings)\> |
|
| scroll | Invoked after scrolling | `object`\<[ScrollParams](#typings)\> |
|
||||||
| rows-rendered | Invoked when rows are rendered | Object\<[RowsRenderedParams](#typings)\> |
|
| rows-rendered | Invoked when rows are rendered | `object`\<[RowsRenderedParams](#typings)\> |
|
||||||
| row-expand | Invoked when expand/collapse the tree node by clicking the arrow icon | Object\<[RowExpandParams](#typings)\> |
|
| row-expand | Invoked when expand/collapse the tree node by clicking the arrow icon | `object`\<[RowExpandParams](#typings)\> |
|
||||||
| row-event-handlers | A collection of handlers attached to each row | Object\<[RowEventHandlers](#typings)\> |
|
| row-event-handlers | A collection of handlers attached to each row | `object`\<[RowEventHandlers](#typings)\> |
|
||||||
|
|
||||||
## TableV2 Methods
|
## TableV2 Methods
|
||||||
|
|
||||||
| Event Name | Description | Parameters |
|
| Event Name | Description | Parameters |
|
||||||
| ------------ | ---------------------------------------------------- | -------------------------------------------------------------------------- |
|
| ------------ | ---------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
||||||
| scrollTo | Scroll to a given position | `{ scrollLeft?: number, scrollTop?: number}` |
|
| scrollTo | Scroll to a given position | ^[Function]`(param: {scrollLeft?: number, scrollTop?: number}) => void` |
|
||||||
| scrollToLeft | Scroll to a given horizontal position | `scrollLeft: number` |
|
| scrollToLeft | Scroll to a given horizontal position | ^[Function]`(scrollLeft: number) => void` |
|
||||||
| scrollToTop | Scroll to a given vertical position | `scrollTop: number` |
|
| scrollToTop | Scroll to a given vertical position | ^[Function]`(scrollTop: number) => void` |
|
||||||
| scrollToRow | scroll to a given row with specified scroll strategy | `row: number, strategy?: "auto" \|"center" \| "end" \| "start" \| "smart"` |
|
| scrollToRow | scroll to a given row with specified scroll strategy | ^[Function]`(row: number, strategy?: 'center' \| 'end' \| 'start' \| 'smart') => void` |
|
||||||
|
|
||||||
:::tip
|
:::tip
|
||||||
|
|
||||||
@ -369,24 +369,24 @@ Note that these are `JavaScript` Objects, so you **CANNOT USE** kebab-case for t
|
|||||||
## Column Attribute
|
## Column Attribute
|
||||||
|
|
||||||
| Name | Description | Type | Default |
|
| Name | Description | Type | Default |
|
||||||
| ------------------ | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
|
| ------------------ | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
|
||||||
| align | Alignment of the table cell content | [Alignment](https://github.com/element-plus/element-plus/blob/b92b22932758f0ddea98810ae248f6ca62f77e25/packages/components/table-v2/src/constants.ts#L6) | left |
|
| align | Alignment of the table cell content | [Alignment](https://github.com/element-plus/element-plus/blob/b92b22932758f0ddea98810ae248f6ca62f77e25/packages/components/table-v2/src/constants.ts#L6) | left |
|
||||||
| class | Class name for the column | String | — |
|
| class | Class name for the column | `string` | — |
|
||||||
| key | Unique identification | [KeyType](#typings) | — |
|
| key | Unique identification | [KeyType](#typings) | — |
|
||||||
| dataKey | Unique identification of data | [KeyType](#typings) | — |
|
| dataKey | Unique identification of data | [KeyType](#typings) | — |
|
||||||
| fixed | Fixed direction of the column | Boolean/[FixedDir](https://github.com/element-plus/element-plus/blob/b92b22932758f0ddea98810ae248f6ca62f77e25/packages/components/table-v2/src/constants.ts#L11) | false |
|
| fixed | Fixed direction of the column | `boolean` / [FixedDir](https://github.com/element-plus/element-plus/blob/b92b22932758f0ddea98810ae248f6ca62f77e25/packages/components/table-v2/src/constants.ts#L11) | false |
|
||||||
| flexGrow | CSSProperties flex grow, Only useful when this is not a fixed table | Number | 0 |
|
| flexGrow | CSSProperties flex grow, Only useful when this is not a fixed table | `number` | 0 |
|
||||||
| flexShrink | CSSProperties flex shrink, Only useful when this is not a fixed table | Number | 1 |
|
| flexShrink | CSSProperties flex shrink, Only useful when this is not a fixed table | `number` | 1 |
|
||||||
| headerClass | Used for customizing header column class | String | — |
|
| headerClass | Used for customizing header column class | `string` | — |
|
||||||
| hidden | Whether the column is invisible | Boolean | — |
|
| hidden | Whether the column is invisible | `boolean` | — |
|
||||||
| style | Customized style for column cell, will be merged with grid cell | CSSProperties | — |
|
| style | Customized style for column cell, will be merged with grid cell | ^[object]`CSSProperties` | — |
|
||||||
| sortable | Indicates whether the column is sortable | Boolean | — |
|
| sortable | Indicates whether the column is sortable | `boolean` | — |
|
||||||
| title | The default text rendered in header cell | String | — |
|
| title | The default text rendered in header cell | `string` | — |
|
||||||
| maxWidth | Maximum width for the column | Number | — |
|
| maxWidth | Maximum width for the column | `number` | — |
|
||||||
| minWidth | Minimum width for the column | Number | — |
|
| minWidth | Minimum width for the column | `number` | — |
|
||||||
| width ^(required) | Width for the column | Number | — |
|
| width ^(required) | Width for the column | `number` | — |
|
||||||
| cellRenderer | Customized Cell renderer | VueComponent/(props: [CellRenderProps](#typings)) => VNode | — |
|
| cellRenderer | Customized Cell renderer | `VueComponent` / (props: [CellRenderProps](#typings)) => VNode | — |
|
||||||
| headerCellRenderer | Customized Header renderer | VueComponent/(props: [HeaderRenderProps](#typings)) => VNode | — |
|
| headerCellRenderer | Customized Header renderer | `VueComponent` / (props: [HeaderRenderProps](#typings)) => VNode | — |
|
||||||
|
|
||||||
## Typings{#typings}
|
## Typings{#typings}
|
||||||
|
|
||||||
@ -433,6 +433,14 @@ type CellPropsGetter = (param: {
|
|||||||
rowIndex: number
|
rowIndex: number
|
||||||
}) => void
|
}) => void
|
||||||
|
|
||||||
|
type DataGetterParams<T> = {
|
||||||
|
columns: Column<T>[]
|
||||||
|
column: Column<T>
|
||||||
|
columnIndex: number
|
||||||
|
} & RowCommonParams
|
||||||
|
|
||||||
|
type DataGetter<T> = (params: DataGetterParams<T>) => T
|
||||||
|
|
||||||
type CellRenderProps<T> = {
|
type CellRenderProps<T> = {
|
||||||
cellData: T
|
cellData: T
|
||||||
column: Column<T>
|
column: Column<T>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user