mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-11-29 17:58:08 +08:00
feat(components): add the ability to append table filter panel, select and pagination size dropdowns to any element (#14318)
* feat(components): [pagination] append size dropdown to element * feat(components): [select] append select dropdown to element * feat(components): [table] append table filter panel to element * refactor(components): [pagination] shorten prop names * fix(components): [select] appendTo prop * docs(components): add pagination docs append-size-to version tag * docs(components): remove append-size-to default value in docs * refactor(components): remove default appendTo values * docs: version bump * refactor(components): remove default appendFilterPanelTo value
This commit is contained in:
Karolis_Stoncius_Sneakybox
GitHub
parent
208756a632
commit
03fa5d6839
@ -79,6 +79,7 @@ pagination/more-elements
|
||||
| default-current-page | default initial value of current-page, not setting is the same as setting 1 | ^[number] | — |
|
||||
| layout | layout of Pagination, elements separated with a comma | ^[string]`string (consists of sizes, prev, pager, next, jumper, ->, total, slot)` | prev, pager, next, jumper, ->, total |
|
||||
| page-sizes | options of item count per page | ^[object]`number[]` | [10, 20, 30, 40, 50, 100] |
|
||||
| append-size-to ^(2.8.4) | which element the size dropdown appends to | ^[string] | — |
|
||||
| popper-class | custom class name for the page size Select's dropdown | ^[string] | '' |
|
||||
| prev-text | text for the prev button | ^[string] | '' |
|
||||
| prev-icon | icon for the prev button, has a lower priority than `prev-text` | ^[string] / ^[Component] | ArrowLeft |
|
||||
|
||||
@ -214,6 +214,7 @@ select/custom-label
|
||||
| reserve-keyword | when `multiple` and `filterable` is true, whether to reserve current keyword after selecting an option | ^[boolean] | true |
|
||||
| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | ^[boolean] | false |
|
||||
| teleported | whether select dropdown is teleported to the body | ^[boolean] | true |
|
||||
| append-to ^(2.8.4) | which element the select dropdown appends to | ^[string] | — |
|
||||
| persistent | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed | ^[boolean] | true |
|
||||
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | ^[boolean] | false |
|
||||
| clear-icon | custom clear icon component | ^[string] / ^[object]`Component` | CircleClose |
|
||||
|
||||
@ -247,47 +247,48 @@ 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 |
|
||||
| scrollbar-tabindex ^(2.8.3) | body scrollbar's wrap container tabindex | ^[string] / ^[number] | — |
|
||||
| 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' } }` |
|
||||
| append-filter-panel-to ^(2.8.3) | which element the filter panels appends to | ^[string] | — |
|
||||
| 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.4) | body scrollbar's wrap container tabindex | ^[string] / ^[number] | — |
|
||||
|
||||
### Table Events
|
||||
|
||||
|
||||
@ -21,6 +21,7 @@ export const paginationSizesProps = buildProps({
|
||||
type: String,
|
||||
values: componentSizes,
|
||||
},
|
||||
appendSizeTo: String,
|
||||
} as const)
|
||||
|
||||
export type PaginationSizesProps = ExtractPropTypes<typeof paginationSizesProps>
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
:size="size"
|
||||
:teleported="teleported"
|
||||
:validate-event="false"
|
||||
:append-to="appendSizeTo"
|
||||
@change="handleChange"
|
||||
>
|
||||
<el-option
|
||||
|
||||
@ -168,6 +168,10 @@ export const paginationProps = buildProps({
|
||||
* @description whether to hide when there's only one page
|
||||
*/
|
||||
hideOnSinglePage: Boolean,
|
||||
/**
|
||||
* @description which element the size dropdown appends to.
|
||||
*/
|
||||
appendSizeTo: String,
|
||||
} as const)
|
||||
export type PaginationProps = ExtractPropTypes<typeof paginationProps>
|
||||
|
||||
@ -410,6 +414,7 @@ export default defineComponent({
|
||||
disabled: props.disabled,
|
||||
teleported: props.teleported,
|
||||
size: _size.value,
|
||||
appendSizeTo: props.appendSizeTo,
|
||||
}),
|
||||
slot: slots?.default?.() ?? null,
|
||||
total: h(Total, { total: isAbsent(props.total) ? 0 : props.total }),
|
||||
|
||||
@ -224,6 +224,10 @@ export const SelectProps = buildProps({
|
||||
type: definePropType<Placement[]>(Array),
|
||||
default: ['bottom-start', 'top-start', 'right', 'left'],
|
||||
},
|
||||
/**
|
||||
* @description which element the selection dropdown appends to
|
||||
*/
|
||||
appendTo: String,
|
||||
...useEmptyValuesProps,
|
||||
...useAriaProps(['ariaLabel']),
|
||||
})
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
:stop-popper-mouse-event="false"
|
||||
:gpu-acceleration="false"
|
||||
:persistent="persistent"
|
||||
:append-to="appendTo"
|
||||
@before-show="handleMenuEnter"
|
||||
@hide="states.isBeforeHide = false"
|
||||
>
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
pure
|
||||
:popper-class="filterClassName"
|
||||
persistent
|
||||
:append-to="appendTo"
|
||||
>
|
||||
<template #content>
|
||||
<div v-if="multiple">
|
||||
@ -133,6 +134,9 @@ export default defineComponent({
|
||||
upDataColumn: {
|
||||
type: Function,
|
||||
},
|
||||
appendTo: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const instance = getCurrentInstance()
|
||||
|
||||
@ -57,6 +57,9 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
},
|
||||
appendFilterPanelTo: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const instance = getCurrentInstance() as TableHeader
|
||||
@ -229,6 +232,7 @@ export default defineComponent({
|
||||
{
|
||||
store,
|
||||
placement: column.filterPlacement || 'bottom-start',
|
||||
appendTo: $parent.appendFilterPanelTo,
|
||||
column,
|
||||
upDataColumn: (key, value) => {
|
||||
column[key] = value
|
||||
|
||||
@ -53,6 +53,7 @@
|
||||
:border="border"
|
||||
:default-sort="defaultSort"
|
||||
:store="store"
|
||||
:append-filter-panel-to="appendFilterPanelTo"
|
||||
@set-drag-visible="setDragVisible"
|
||||
/>
|
||||
</table>
|
||||
@ -87,6 +88,7 @@
|
||||
:border="border"
|
||||
:default-sort="defaultSort"
|
||||
:store="store"
|
||||
:append-filter-panel-to="appendFilterPanelTo"
|
||||
@set-drag-visible="setDragVisible"
|
||||
/>
|
||||
<table-body
|
||||
|
||||
@ -149,6 +149,7 @@ interface TableProps<T> {
|
||||
scrollbarAlwaysOn?: boolean
|
||||
flexible?: boolean
|
||||
showOverflowTooltip?: boolean | TableOverflowTooltipOptions
|
||||
appendFilterPanelTo?: string
|
||||
scrollbarTabindex?: number | string
|
||||
}
|
||||
|
||||
@ -389,6 +390,7 @@ export default {
|
||||
showOverflowTooltip: [Boolean, Object] as PropType<
|
||||
TableProps<DefaultRow>['showOverflowTooltip']
|
||||
>,
|
||||
appendFilterPanelTo: String,
|
||||
scrollbarTabindex: {
|
||||
type: [Number, String],
|
||||
default: undefined,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user