mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-27 02:01:15 +08:00
feat(components): [scrollbar] add tabindex to scrollbar wrap content (#14320)
* feat(components): [scrollbar] add tabindex to scrollbar wrap content * refactor(components): [scrollbar] set default tabindex to undefined * refactor(components): [table] change bodyTabindex to scrollbarTabindex * refactor(components): [scrollbar] remove unnecessary props * docs(components): add version tags
This commit is contained in:
Karolis_Stoncius_Sneakybox
GitHub
parent
0acf8cc004
commit
1d26af3066
@ -60,6 +60,7 @@ scrollbar/manual-scroll
|
||||
| role ^(2.4.0) ^(a11y) | role of view | ^[string] | — |
|
||||
| aria-label ^(2.4.0) ^(a11y) | aria-label of view | ^[string] | — |
|
||||
| aria-orientation ^(2.4.0) ^(a11y) | aria-orientation of view | ^[enum]`'horizontal' \| 'vertical'` | — |
|
||||
| tabindex ^(2.8.3) | tabindex of wrap container | ^[number] / ^[string] | — |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -245,46 +245,47 @@ table/table-layout
|
||||
|
||||
### Table Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
|
||||
| data | table data | ^[object]`any[]` | [] |
|
||||
| height | table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | ^[string] / ^[number] | — |
|
||||
| max-height | table's max-height. The legal value is a number or the height in px | ^[string] / ^[number] | — |
|
||||
| stripe | whether Table is striped | ^[boolean] | false |
|
||||
| border | whether Table has vertical border | ^[boolean] | false |
|
||||
| size | size of Table | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — |
|
||||
| fit | whether width of column automatically fits its container | ^[boolean] | true |
|
||||
| show-header | whether Table header is visible | ^[boolean] | true |
|
||||
| highlight-current-row | whether current row is highlighted | ^[boolean] | false |
|
||||
| current-row-key | key of current row, a set only prop | ^[string] / ^[number] | — |
|
||||
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | ^[Function]`(data: { row: any, rowIndex: number }) => string` / ^[string] | — |
|
||||
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | ^[Function]`(data: { row: any, rowIndex: number }) => CSSProperties` / ^[object]`CSSProperties` | — |
|
||||
| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | ^[Function]`(data: { row: any, column: any, rowIndex: number, columnIndex: number }) => string` / ^[string] | — |
|
||||
| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | ^[Function]`(data: { row: any, column: any, rowIndex: number, columnIndex: number }) => CSSProperties` / ^[object]`CSSProperties` | — |
|
||||
| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | ^[Function]`(data: { row: any, rowIndex: number }) => string` / ^[string] | — |
|
||||
| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | ^[Function]`(data: { row: any, rowIndex: number }) => CSSProperties` / ^[object]`CSSProperties` | — |
|
||||
| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | ^[Function]`(data: { row: any, column: any, rowIndex: number, columnIndex: number }) => string` / ^[string] | — |
|
||||
| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | ^[Function]`(data: { row: any, column: any, rowIndex: number, columnIndex: number }) => CSSProperties` / ^[object]`CSSProperties` | — |
|
||||
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used | ^[function]`(row: any) => string` / ^[string] | — |
|
||||
| empty-text | displayed text when data is empty. You can customize this area with `#empty` | ^[string] | No Data |
|
||||
| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | ^[boolean] | false |
|
||||
| expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | ^[Array]`string[]` | — |
|
||||
| default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | ^[object]`Sort` | if `prop` is set, and `order` is not set, then `order` is default to ascending |
|
||||
| tooltip-effect | the `effect` of the overflow tooltip | ^[enum]`'dark' \| 'light'` | dark |
|
||||
| tooltip-options ^(2.2.28) | the options for the overflow tooltip, [see the following tooltip component](tooltip.html#attributes) | ^[object]`Pick<ElTooltipProps, 'effect' \| 'enterable' \| 'hideAfter' \| 'offset' \| 'placement' \| 'popperClass' \| 'popperOptions' \| 'showAfter' \| 'showArrow'>` | ^[object]`{ enterable: true, placement: 'top', showArrow: true, hideAfter: 200, popperOptions: { strategy: 'fixed' } }` |
|
||||
| show-summary | whether to display a summary row | ^[boolean] | false |
|
||||
| sum-text | displayed text for the first column of summary row | ^[string] | Sum |
|
||||
| summary-method | custom summary method | ^[Function]`(data: { columns: any[], data: any[] }) => (VNode \| string)[]` | — |
|
||||
| span-method | method that returns rowspan and colspan | ^[Function]`(data: { row: any, column: any, rowIndex: number, columnIndex: number }) => number[] \| { rowspan: number, colspan: number } \| void` | — |
|
||||
| select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected | ^[boolean] | true |
|
||||
| indent | horizontal indentation of tree data | ^[number] | 16 |
|
||||
| lazy | whether to lazy loading data | ^[boolean] | false |
|
||||
| load | method for loading child row data, only works when `lazy` is true | ^[Function]`(row: any, treeNode: TreeNode, resolve: (data: any[]) => void) => void` | — |
|
||||
| tree-props | configuration for rendering nested data | ^[object]`{ hasChildren?: string, children?: string, checkStrictly?: boolean }` | ^[object]`{ hasChildren: 'hasChildren', children: 'children', checkStrictly: false }` |
|
||||
| table-layout | sets the algorithm used to lay out table cells, rows, and columns | ^[enum]`'fixed' \| 'auto'` | fixed |
|
||||
| scrollbar-always-on | always show scrollbar | ^[boolean] | false |
|
||||
| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell.It will affect all the table columns, refer to table [tooltip-options](#table-attributes) | ^[boolean] / [`object`](#table-attributes) ^(2.3.7) | — |
|
||||
| flexible ^(2.2.1) | ensure main axis minimum-size doesn't follow the content | ^[boolean] | false |
|
||||
| Name | Description | Type | Default |
|
||||
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
|
||||
| data | table data | ^[object]`any[]` | [] |
|
||||
| height | table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | ^[string] / ^[number] | — |
|
||||
| max-height | table's max-height. The legal value is a number or the height in px | ^[string] / ^[number] | — |
|
||||
| stripe | whether Table is striped | ^[boolean] | false |
|
||||
| border | whether Table has vertical border | ^[boolean] | false |
|
||||
| size | size of Table | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — |
|
||||
| fit | whether width of column automatically fits its container | ^[boolean] | true |
|
||||
| show-header | whether Table header is visible | ^[boolean] | true |
|
||||
| highlight-current-row | whether current row is highlighted | ^[boolean] | false |
|
||||
| current-row-key | key of current row, a set only prop | ^[string] / ^[number] | — |
|
||||
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | ^[Function]`(data: { row: any, rowIndex: number }) => string` / ^[string] | — |
|
||||
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | ^[Function]`(data: { row: any, rowIndex: number }) => CSSProperties` / ^[object]`CSSProperties` | — |
|
||||
| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | ^[Function]`(data: { row: any, column: any, rowIndex: number, columnIndex: number }) => string` / ^[string] | — |
|
||||
| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | ^[Function]`(data: { row: any, column: any, rowIndex: number, columnIndex: number }) => CSSProperties` / ^[object]`CSSProperties` | — |
|
||||
| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | ^[Function]`(data: { row: any, rowIndex: number }) => string` / ^[string] | — |
|
||||
| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | ^[Function]`(data: { row: any, rowIndex: number }) => CSSProperties` / ^[object]`CSSProperties` | — |
|
||||
| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | ^[Function]`(data: { row: any, column: any, rowIndex: number, columnIndex: number }) => string` / ^[string] | — |
|
||||
| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | ^[Function]`(data: { row: any, column: any, rowIndex: number, columnIndex: number }) => CSSProperties` / ^[object]`CSSProperties` | — |
|
||||
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used | ^[function]`(row: any) => string` / ^[string] | — |
|
||||
| empty-text | displayed text when data is empty. You can customize this area with `#empty` | ^[string] | No Data |
|
||||
| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | ^[boolean] | false |
|
||||
| expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | ^[Array]`string[]` | — |
|
||||
| default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | ^[object]`Sort` | if `prop` is set, and `order` is not set, then `order` is default to ascending |
|
||||
| tooltip-effect | the `effect` of the overflow tooltip | ^[enum]`'dark' \| 'light'` | dark |
|
||||
| tooltip-options ^(2.2.28) | the options for the overflow tooltip, [see the following tooltip component](tooltip.html#attributes) | ^[object]`Pick<ElTooltipProps, 'effect' \| 'enterable' \| 'hideAfter' \| 'offset' \| 'placement' \| 'popperClass' \| 'popperOptions' \| 'showAfter' \| 'showArrow'>` | ^[object]`{ enterable: true, placement: 'top', showArrow: true, hideAfter: 200, popperOptions: { strategy: 'fixed' } }` |
|
||||
| show-summary | whether to display a summary row | ^[boolean] | false |
|
||||
| sum-text | displayed text for the first column of summary row | ^[string] | Sum |
|
||||
| summary-method | custom summary method | ^[Function]`(data: { columns: any[], data: any[] }) => (VNode \| string)[]` | — |
|
||||
| span-method | method that returns rowspan and colspan | ^[Function]`(data: { row: any, column: any, rowIndex: number, columnIndex: number }) => number[] \| { rowspan: number, colspan: number } \| void` | — |
|
||||
| select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected | ^[boolean] | true |
|
||||
| indent | horizontal indentation of tree data | ^[number] | 16 |
|
||||
| lazy | whether to lazy loading data | ^[boolean] | false |
|
||||
| load | method for loading child row data, only works when `lazy` is true | ^[Function]`(row: any, treeNode: TreeNode, resolve: (data: any[]) => void) => void` | — |
|
||||
| tree-props | configuration for rendering nested data | ^[object]`{ hasChildren?: string, children?: string, checkStrictly?: boolean }` | ^[object]`{ hasChildren: 'hasChildren', children: 'children', checkStrictly: false }` |
|
||||
| table-layout | sets the algorithm used to lay out table cells, rows, and columns | ^[enum]`'fixed' \| 'auto'` | fixed |
|
||||
| scrollbar-always-on | always show scrollbar | ^[boolean] | false |
|
||||
| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell.It will affect all the table columns, refer to table [tooltip-options](#table-attributes) | ^[boolean] / [`object`](#table-attributes) ^(2.3.7) | — |
|
||||
| flexible ^(2.2.1) | ensure main axis minimum-size doesn't follow the content | ^[boolean] | false |
|
||||
| scrollbar-tabindex ^(2.8.3) | body scrollbar's wrap container tabindex | ^[string] / ^[number] | — |
|
||||
|
||||
### Table Events
|
||||
|
||||
|
||||
@ -75,6 +75,13 @@ export const scrollbarProps = buildProps({
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
/**
|
||||
* @description Wrap tabindex
|
||||
*/
|
||||
tabindex: {
|
||||
type: [String, Number],
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @description id of view
|
||||
*/
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
ref="wrapRef"
|
||||
:class="wrapKls"
|
||||
:style="wrapStyle"
|
||||
:tabindex="tabindex"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<component
|
||||
|
||||
@ -63,6 +63,7 @@
|
||||
:view-style="scrollbarViewStyle"
|
||||
:wrap-style="scrollbarStyle"
|
||||
:always="scrollbarAlwaysOn"
|
||||
:tabindex="scrollbarTabindex"
|
||||
>
|
||||
<table
|
||||
ref="tableBody"
|
||||
|
||||
@ -149,6 +149,7 @@ interface TableProps<T> {
|
||||
scrollbarAlwaysOn?: boolean
|
||||
flexible?: boolean
|
||||
showOverflowTooltip?: boolean | TableOverflowTooltipOptions
|
||||
scrollbarTabindex?: number | string
|
||||
}
|
||||
|
||||
interface Sort {
|
||||
@ -388,6 +389,10 @@ export default {
|
||||
showOverflowTooltip: [Boolean, Object] as PropType<
|
||||
TableProps<DefaultRow>['showOverflowTooltip']
|
||||
>,
|
||||
scrollbarTabindex: {
|
||||
type: [Number, String],
|
||||
default: undefined,
|
||||
},
|
||||
}
|
||||
export type {
|
||||
SummaryMethod,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user