mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
docs(style): use new display tag (#11648)
* docs(style): use new display tag * docs(components): use new tag
This commit is contained in:
Xc
@@ -47,26 +47,26 @@ autocomplete/remote-search
|
||||
|
||||
### Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------ |
|
||||
| model-value / v-model | binding value | ^[string] | — |
|
||||
| placeholder | the placeholder of Autocomplete | ^[string] | — |
|
||||
| clearable | whether to show clear button | ^[boolean] | false |
|
||||
| disabled | whether Autocomplete is disabled | ^[boolean] | false |
|
||||
| value-key | key name of the input suggestion object for display | ^[string] | value |
|
||||
| debounce | debounce delay when typing, in milliseconds | ^[number] | 300 |
|
||||
| placement | placement of the popup menu | ^[enum]`'top' \| 'top- start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'` | bottom-start |
|
||||
| fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | ^[Function]`(queryString: string, callback: callbackfn) => void` | — |
|
||||
| trigger-on-focus | whether show suggestions when input focus | ^[boolean] | true |
|
||||
| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | ^[boolean] | false |
|
||||
| name | same as `name` in native input | ^[string] | — |
|
||||
| label | label text | ^[string] | — |
|
||||
| hide-loading | whether to hide the loading icon in remote search | ^[boolean] | false |
|
||||
| popper-class | custom class name for autocomplete's dropdown | ^[string] | — |
|
||||
| popper-append-to-body<DeprecatedTag /> | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | ^[boolean] | false |
|
||||
| teleported | whether select dropdown is teleported to the body | ^[boolean] | true |
|
||||
| highlight-first-item | whether to highlight first item in remote search suggestions by default | ^[boolean] | false |
|
||||
| fit-input-width | whether the width of the dropdown is the same as the input | ^[boolean] | false |
|
||||
| Name | Description | Type | Default |
|
||||
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------ |
|
||||
| model-value / v-model | binding value | ^[string] | — |
|
||||
| placeholder | the placeholder of Autocomplete | ^[string] | — |
|
||||
| clearable | whether to show clear button | ^[boolean] | false |
|
||||
| disabled | whether Autocomplete is disabled | ^[boolean] | false |
|
||||
| value-key | key name of the input suggestion object for display | ^[string] | value |
|
||||
| debounce | debounce delay when typing, in milliseconds | ^[number] | 300 |
|
||||
| placement | placement of the popup menu | ^[enum]`'top' \| 'top- start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'` | bottom-start |
|
||||
| fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | ^[Function]`(queryString: string, callback: callbackfn) => void` | — |
|
||||
| trigger-on-focus | whether show suggestions when input focus | ^[boolean] | true |
|
||||
| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | ^[boolean] | false |
|
||||
| name | same as `name` in native input | ^[string] | — |
|
||||
| label | label text | ^[string] | — |
|
||||
| hide-loading | whether to hide the loading icon in remote search | ^[boolean] | false |
|
||||
| popper-class | custom class name for autocomplete's dropdown | ^[string] | — |
|
||||
| popper-append-to-body ^(deprecated) | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | ^[boolean] | false |
|
||||
| teleported | whether select dropdown is teleported to the body | ^[boolean] | true |
|
||||
| highlight-first-item | whether to highlight first item in remote search suggestions by default | ^[boolean] | false |
|
||||
| fit-input-width | whether the width of the dropdown is the same as the input | ^[boolean] | false |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@@ -29,9 +29,9 @@ button/disabled
|
||||
|
||||
:::warning
|
||||
|
||||
`type="text"` has been **deprecated**, and **will be** removed in<VersionTag version="3.0.0" />, consider switching to new API.
|
||||
`type="text"` has been **deprecated**, and **will be** removed in ^(3.0.0), consider switching to new API.
|
||||
|
||||
New API `link` has been added in<VersionTag version="2.2.1" />, you can use `type` API to set the theme of your link button
|
||||
New API `link` has been added in ^(2.2.1), you can use `type` API to set the theme of your link button
|
||||
|
||||
:::
|
||||
|
||||
@@ -111,7 +111,7 @@ button/size
|
||||
|
||||
:::
|
||||
|
||||
## Custom Color<VersionTag version="beta" />
|
||||
## Custom Color ^(beta)
|
||||
|
||||
You can custom button color.
|
||||
|
||||
@@ -127,25 +127,25 @@ button/custom
|
||||
|
||||
### Button Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| ---------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------- |
|
||||
| size | button size | ^[enum]`'large'\| 'default'\| 'small'` | — |
|
||||
| type | button type | ^[enum]`'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'\| 'text'(delete)` | — |
|
||||
| plain | determine whether it's a plain button | ^[boolean] | false |
|
||||
| text<VersionTag version="2.2.0" /> | determine whether it's a text button | ^[boolean] | false |
|
||||
| bg<VersionTag version="2.2.0" /> | determine whether the text button background color is always on | ^[boolean] | false |
|
||||
| link<VersionTag version="2.2.1" /> | determine whether it's a link button | ^[boolean] | false |
|
||||
| round | determine whether it's a round button | ^[boolean] | false |
|
||||
| circle | determine whether it's a circle button | ^[boolean] | false |
|
||||
| loading | determine whether it's loading | ^[boolean] | false |
|
||||
| loading-icon | customize loading icon component | ^[string] / ^[Component] | Loading |
|
||||
| disabled | disable the button | ^[boolean] | false |
|
||||
| icon | icon component | ^[string] / ^[Component] | — |
|
||||
| autofocus | same as native button's `autofocus` | ^[boolean] | false |
|
||||
| native-type | same as native button's `type` | ^[enum]`'button'\| 'submit'\| 'reset'` | button |
|
||||
| auto-insert-space | automatically insert a space between two chinese characters | ^[boolean] | — |
|
||||
| color | custom button color, automatically calculate `hover` and `active` color | ^[string] | — |
|
||||
| dark | dark mode, which automatically converts `color` to dark mode colors | ^[boolean] | false |
|
||||
| Name | Description | Type | Default |
|
||||
| ----------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------- |
|
||||
| size | button size | ^[enum]`'large'\| 'default'\| 'small'` | — |
|
||||
| type | button type | ^[enum]`'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'\| 'text'(delete)` | — |
|
||||
| plain | determine whether it's a plain button | ^[boolean] | false |
|
||||
| text ^(2.2.0) | determine whether it's a text button | ^[boolean] | false |
|
||||
| bg ^(2.2.0) | determine whether the text button background color is always on | ^[boolean] | false |
|
||||
| link ^(2.2.1) | determine whether it's a link button | ^[boolean] | false |
|
||||
| round | determine whether it's a round button | ^[boolean] | false |
|
||||
| circle | determine whether it's a circle button | ^[boolean] | false |
|
||||
| loading | determine whether it's loading | ^[boolean] | false |
|
||||
| loading-icon | customize loading icon component | ^[string] / ^[Component] | Loading |
|
||||
| disabled | disable the button | ^[boolean] | false |
|
||||
| icon | icon component | ^[string] / ^[Component] | — |
|
||||
| autofocus | same as native button's `autofocus` | ^[boolean] | false |
|
||||
| native-type | same as native button's `type` | ^[enum]`'button'\| 'submit'\| 'reset'` | button |
|
||||
| auto-insert-space | automatically insert a space between two chinese characters | ^[boolean] | — |
|
||||
| color | custom button color, automatically calculate `hover` and `active` color | ^[string] | — |
|
||||
| dark | dark mode, which automatically converts `color` to dark mode colors | ^[boolean] | false |
|
||||
|
||||
### Button Slots
|
||||
|
||||
|
||||
@@ -94,7 +94,7 @@ checkbox/with-border
|
||||
| validate-event | whether to trigger form validation | ^[boolean] | true |
|
||||
| tabindex | input tabindex | ^[string] / ^[number] | — |
|
||||
| id | input id | ^[string] | — |
|
||||
| controls <A11yTag /> | same as [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls), takes effect when `indeterminate` is `true` | ^[boolean] | — |
|
||||
| controls ^(a11y) | same as [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls), takes effect when `indeterminate` is `true` | ^[boolean] | — |
|
||||
|
||||
### Checkbox Events
|
||||
|
||||
|
||||
@@ -113,42 +113,42 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
|
||||
|
||||
## Attributes
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| ----------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------- | --------------- | ------- |
|
||||
| model-value / v-model | visibility of Dialog | boolean | — | — |
|
||||
| title | title of Dialog. Can also be passed with a named slot (see the following table) | string | — | — |
|
||||
| width | width of Dialog | string / number | — | 50% |
|
||||
| fullscreen | whether the Dialog takes up full screen | boolean | — | false |
|
||||
| top | value for `margin-top` of Dialog CSS | string | — | 15vh |
|
||||
| modal | whether a mask is displayed | boolean | — | true |
|
||||
| append-to-body | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean | — | false |
|
||||
| lock-scroll | whether scroll of body is disabled while Dialog is displayed | boolean | — | true |
|
||||
| custom-class<DeprecatedTag /> | custom class names for Dialog | string | — | — |
|
||||
| open-delay | Time(milliseconds) before open | number | — | 0 |
|
||||
| close-delay | Time(milliseconds) before close | number | — | 0 |
|
||||
| close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean | — | true |
|
||||
| close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean | — | true |
|
||||
| show-close | whether to show a close button | boolean | — | true |
|
||||
| before-close | callback before Dialog closes, and it will prevent Dialog from closing | Function(done) (done is used to close the Dialog) | — | — |
|
||||
| draggable | enable dragging feature for Dialog | boolean | — | false |
|
||||
| center | whether to align the header and footer in center | boolean | — | false |
|
||||
| align-center | whether to align the dialog both horizontally and vertically | boolean | — | false |
|
||||
| destroy-on-close | Destroy elements in Dialog when closed | boolean | — | false |
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| -------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------- | --------------- | ------- |
|
||||
| model-value / v-model | visibility of Dialog | boolean | — | — |
|
||||
| title | title of Dialog. Can also be passed with a named slot (see the following table) | string | — | — |
|
||||
| width | width of Dialog | string / number | — | 50% |
|
||||
| fullscreen | whether the Dialog takes up full screen | boolean | — | false |
|
||||
| top | value for `margin-top` of Dialog CSS | string | — | 15vh |
|
||||
| modal | whether a mask is displayed | boolean | — | true |
|
||||
| append-to-body | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean | — | false |
|
||||
| lock-scroll | whether scroll of body is disabled while Dialog is displayed | boolean | — | true |
|
||||
| custom-class ^(deprecated) | custom class names for Dialog | string | — | — |
|
||||
| open-delay | Time(milliseconds) before open | number | — | 0 |
|
||||
| close-delay | Time(milliseconds) before close | number | — | 0 |
|
||||
| close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean | — | true |
|
||||
| close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean | — | true |
|
||||
| show-close | whether to show a close button | boolean | — | true |
|
||||
| before-close | callback before Dialog closes, and it will prevent Dialog from closing | Function(done) (done is used to close the Dialog) | — | — |
|
||||
| draggable | enable dragging feature for Dialog | boolean | — | false |
|
||||
| center | whether to align the header and footer in center | boolean | — | false |
|
||||
| align-center | whether to align the dialog both horizontally and vertically | boolean | — | false |
|
||||
| destroy-on-close | Destroy elements in Dialog when closed | boolean | — | false |
|
||||
|
||||
:::warning
|
||||
|
||||
`custom-class` has been **deprecated**, and **will be** removed in<VersionTag version="2.3.0" />, please use `class`.
|
||||
`custom-class` has been **deprecated**, and **will be** removed in ^(2.3.0), please use `class`.
|
||||
|
||||
:::
|
||||
|
||||
## Slots
|
||||
|
||||
| Name | Description |
|
||||
| ---------------------- | ----------------------------------------------------------------------------------------------------- |
|
||||
| — | content of Dialog |
|
||||
| header | content of the Dialog header; Replacing this removes the title, but does not remove the close button. |
|
||||
| title<DeprecatedTag /> | Works the same as the header slot. Use that instead. |
|
||||
| footer | content of the Dialog footer |
|
||||
| Name | Description |
|
||||
| ------------------- | ----------------------------------------------------------------------------------------------------- |
|
||||
| — | content of Dialog |
|
||||
| header | content of the Dialog header; Replacing this removes the title, but does not remove the close button. |
|
||||
| title ^(deprecated) | Works the same as the header slot. Use that instead. |
|
||||
| footer | content of the Dialog footer |
|
||||
|
||||
## Events
|
||||
|
||||
|
||||
@@ -83,41 +83,41 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
|
||||
|
||||
## Drawer Attributes
|
||||
|
||||
| Name | Description | Type | Acceptable Values | Default |
|
||||
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ------- |
|
||||
| model-value / v-model | Should Drawer be displayed | boolean | — | false |
|
||||
| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true** | boolean | — | false |
|
||||
| lock-scroll | whether scroll of body is disabled while Drawer is displayed | boolean | — | true |
|
||||
| before-close | If set, closing procedure will be halted | function(done) (done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure) | — | — |
|
||||
| close-on-click-modal | whether the Drawer can be closed by clicking the mask | boolean | — | true |
|
||||
| close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |
|
||||
| open-delay | Time(milliseconds) before open | number | — | 0 |
|
||||
| close-delay | Time(milliseconds) before close | number | — | 0 |
|
||||
| custom-class<DeprecatedTag /> | Extra class names for Drawer | string | — | — |
|
||||
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
|
||||
| modal | Should show shadowing layer | boolean | — | true |
|
||||
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / btt | rtl |
|
||||
| show-close | Should show close button at the top right of Drawer | boolean | — | true |
|
||||
| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |
|
||||
| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
|
||||
| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
|
||||
| modal-class | Extra class names for shadowing layer | string | - | - |
|
||||
| z-index | set z-index | number | - | - |
|
||||
| Name | Description | Type | Acceptable Values | Default |
|
||||
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ------- |
|
||||
| model-value / v-model | Should Drawer be displayed | boolean | — | false |
|
||||
| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true** | boolean | — | false |
|
||||
| lock-scroll | whether scroll of body is disabled while Drawer is displayed | boolean | — | true |
|
||||
| before-close | If set, closing procedure will be halted | function(done) (done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure) | — | — |
|
||||
| close-on-click-modal | whether the Drawer can be closed by clicking the mask | boolean | — | true |
|
||||
| close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |
|
||||
| open-delay | Time(milliseconds) before open | number | — | 0 |
|
||||
| close-delay | Time(milliseconds) before close | number | — | 0 |
|
||||
| custom-class ^(deprecated) | Extra class names for Drawer | string | — | — |
|
||||
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
|
||||
| modal | Should show shadowing layer | boolean | — | true |
|
||||
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / btt | rtl |
|
||||
| show-close | Should show close button at the top right of Drawer | boolean | — | true |
|
||||
| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |
|
||||
| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
|
||||
| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
|
||||
| modal-class | Extra class names for shadowing layer | string | - | - |
|
||||
| z-index | set z-index | number | - | - |
|
||||
|
||||
:::warning
|
||||
|
||||
`custom-class` has been **deprecated**, and **will be** removed in<VersionTag version="2.3.0" />, please use `class`.
|
||||
`custom-class` has been **deprecated**, and **will be** removed in ^(2.3.0), please use `class`.
|
||||
|
||||
:::
|
||||
|
||||
## Drawer Slots
|
||||
|
||||
| Name | Description |
|
||||
| ---------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| — | Drawer's Content |
|
||||
| header | Drawer header section; Replacing this removes the title, but does not remove the close button. |
|
||||
| title<DeprecatedTag /> | Works the same as the header slot. Use that instead. |
|
||||
| footer | Drawer footer Section |
|
||||
| Name | Description |
|
||||
| ------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| — | Drawer's Content |
|
||||
| header | Drawer header section; Replacing this removes the title, but does not remove the close button. |
|
||||
| title ^(deprecated) | Works the same as the header slot. Use that instead. |
|
||||
| footer | Drawer footer Section |
|
||||
|
||||
## Drawer Methods
|
||||
|
||||
|
||||
@@ -35,7 +35,7 @@ image/load-failed
|
||||
|
||||
:::tip
|
||||
|
||||
Native `loading` has been supported since<VersionTag version="2.2.3" />, you can use `loading = "lazy"` to replace `lazy = true`.
|
||||
Native `loading` has been supported since ^(2.2.3), you can use `loading = "lazy"` to replace `lazy = true`.
|
||||
|
||||
If the current browser supports native lazy loading, the native lazy loading will be used first, otherwise will be implemented through scroll.
|
||||
|
||||
@@ -59,21 +59,21 @@ image/image-preview
|
||||
|
||||
### Image Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------- |
|
||||
| `src` | image source, same as native. | `string` | — |
|
||||
| `fit` | indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | — |
|
||||
| `hide-on-click-modal` | when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode. | `boolean` | `false` |
|
||||
| `loading`<VersionTag version="2.2.3" /> | Indicates how the browser should load the image, same as [native](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading) | `'eager' \| 'lazy'` | — |
|
||||
| `lazy` | whether to use lazy load. | `boolean` | `false` |
|
||||
| `scroll-container` | the container to add scroll listener when using lazy load. | `string \| HTMLElement` | the nearest parent container whose overflow property is auto or scroll. |
|
||||
| `alt` | native attribute `alt`. | `string` | — |
|
||||
| `referrer-policy` | native attribute `referrerPolicy`. | `string` | — |
|
||||
| `preview-src-list` | allow big image preview. | `string[]` | — |
|
||||
| `z-index` | set image preview z-index. | `number` | — |
|
||||
| `initial-index` | initial preview image index, less than the length of `url-list`. | `number` | `0` |
|
||||
| `close-on-press-escape` | whether the image-viewer can be closed by pressing ESC | `boolean` | `true` |
|
||||
| `preview-teleported` | whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`. | `boolean` | `false` |
|
||||
| Name | Description | Type | Default |
|
||||
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------- |
|
||||
| `src` | image source, same as native. | `string` | — |
|
||||
| `fit` | indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | — |
|
||||
| `hide-on-click-modal` | when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode. | `boolean` | `false` |
|
||||
| `loading` ^(2.2.3) | Indicates how the browser should load the image, same as [native](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading) | `'eager' \| 'lazy'` | — |
|
||||
| `lazy` | whether to use lazy load. | `boolean` | `false` |
|
||||
| `scroll-container` | the container to add scroll listener when using lazy load. | `string \| HTMLElement` | the nearest parent container whose overflow property is auto or scroll. |
|
||||
| `alt` | native attribute `alt`. | `string` | — |
|
||||
| `referrer-policy` | native attribute `referrerPolicy`. | `string` | — |
|
||||
| `preview-src-list` | allow big image preview. | `string[]` | — |
|
||||
| `z-index` | set image preview z-index. | `number` | — |
|
||||
| `initial-index` | initial preview image index, less than the length of `url-list`. | `number` | `0` |
|
||||
| `close-on-press-escape` | whether the image-viewer can be closed by pressing ESC | `boolean` | `true` |
|
||||
| `preview-teleported` | whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`. | `boolean` | `false` |
|
||||
|
||||
### Image Events
|
||||
|
||||
|
||||
@@ -83,25 +83,25 @@ input-number/controlled
|
||||
|
||||
### Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| -------------------------------------------- | ------------------------------------------------ | --------------------------------------------- | --------- |
|
||||
| model-value / v-model | binding value | ^[number] | — |
|
||||
| min | the minimum allowed value | ^[number] | -Infinity |
|
||||
| max | the maximum allowed value | ^[number] | Infinity |
|
||||
| step | incremental step | ^[number] | 1 |
|
||||
| step-strictly | whether input value can only be multiple of step | ^[boolean] | false |
|
||||
| precision | precision of input value | ^[number] | — |
|
||||
| size | size of the component | ^[enum]`'large' \| 'default' \| 'small'` | default |
|
||||
| readonly | same as `readonly` in native input | ^[boolean] | false |
|
||||
| disabled | whether the component is disabled | ^[boolean] | false |
|
||||
| controls | whether to enable the control buttons | ^[boolean] | true |
|
||||
| controls-position | position of the control buttons | ^[enum]`'' \| 'right'` | — |
|
||||
| name | same as `name` in native input | ^[string] | — |
|
||||
| label | same as `label` in native input | ^[string] | — |
|
||||
| placeholder | same as `placeholder` in native input | ^[string] | — |
|
||||
| id | same as `id` in native input | ^[string] | — |
|
||||
| value-on-clear<VersionTag version="2.2.0" /> | value should be set when input box is cleared | ^[number] / ^[null] / ^[enum]`'min' \| 'max'` | — |
|
||||
| validate-event | whether to trigger form validation | ^[boolean] | true |
|
||||
| Name | Description | Type | Default |
|
||||
| ----------------------- | ------------------------------------------------ | --------------------------------------------- | --------- |
|
||||
| model-value / v-model | binding value | ^[number] | — |
|
||||
| min | the minimum allowed value | ^[number] | -Infinity |
|
||||
| max | the maximum allowed value | ^[number] | Infinity |
|
||||
| step | incremental step | ^[number] | 1 |
|
||||
| step-strictly | whether input value can only be multiple of step | ^[boolean] | false |
|
||||
| precision | precision of input value | ^[number] | — |
|
||||
| size | size of the component | ^[enum]`'large' \| 'default' \| 'small'` | default |
|
||||
| readonly | same as `readonly` in native input | ^[boolean] | false |
|
||||
| disabled | whether the component is disabled | ^[boolean] | false |
|
||||
| controls | whether to enable the control buttons | ^[boolean] | true |
|
||||
| controls-position | position of the control buttons | ^[enum]`'' \| 'right'` | — |
|
||||
| name | same as `name` in native input | ^[string] | — |
|
||||
| label | same as `label` in native input | ^[string] | — |
|
||||
| placeholder | same as `placeholder` in native input | ^[string] | — |
|
||||
| id | same as `id` in native input | ^[string] | — |
|
||||
| value-on-clear ^(2.2.0) | value should be set when input box is cleared | ^[number] / ^[null] / ^[enum]`'min' \| 'max'` | — |
|
||||
| validate-event | whether to trigger form validation | ^[boolean] | true |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@@ -146,7 +146,7 @@ input/length-limiting
|
||||
| resize | control the resizability | ^[enum]`'none' \| 'both' \| 'horizontal' \| 'vertical'` | — |
|
||||
| autofocus | same as `autofocus` in native input | ^[boolean] | false |
|
||||
| form | same as `form` in native input | `string` | — |
|
||||
| label<A11yTag /> | same as `aria-label` in native input | ^[string] | — |
|
||||
| label ^(a11y) | same as `aria-label` in native input | ^[string] | — |
|
||||
| tabindex | input tabindex | ^[string] / ^[number] | — |
|
||||
| validate-event | whether to trigger form validation | ^[boolean] | true |
|
||||
| input-style | the style of the input element or textarea element | ^[string] / ^[object]`CSSProperties \| CSSProperties[] \| string[]` | {} |
|
||||
|
||||
@@ -92,7 +92,7 @@ radio/with-borders
|
||||
| text-color | font color when button is active | ^[string] | #ffffff |
|
||||
| fill | border and background color when button is active | ^[string] | #409EFF |
|
||||
| validate-event | whether to trigger form validation | ^[boolean] | true |
|
||||
| label<A11yTag /> | same as `aria-label` in RadioGroup | ^[string] | — |
|
||||
| label ^(a11y) | same as `aria-label` in RadioGroup | ^[string] | — |
|
||||
| name | native `name` attribute | ^[string] | — |
|
||||
| id | native `id` attribute | ^[string] | — |
|
||||
|
||||
|
||||
@@ -109,7 +109,7 @@ Use `css/scss` language to change the global or local color. We set some global
|
||||
| score-template | score template | ^[string] | {value} |
|
||||
| clearable | whether value can be reset to `0` | ^[boolean] | false |
|
||||
| id | native `id` attribute | ^[string] | — |
|
||||
| label<A11yTag /> | same as `aria-label` in Rate | ^[string] | — |
|
||||
| label ^(a11y) | same as `aria-label` in Rate | ^[string] | — |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@@ -117,51 +117,50 @@ If the binding value of Select is an object, make sure to assign `value-key` as
|
||||
|
||||
## Select Attributes
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ---------------- |
|
||||
| model-value / v-model | binding value | array / string / number / boolean / object | — | — |
|
||||
| multiple | whether multiple-select is activated | boolean | true / false | false |
|
||||
| disabled | whether Select is disabled | boolean | true / false | false |
|
||||
| value-key | unique identity key name for value, required when value is an object | string | — | value |
|
||||
| size | size of Input | string | large/default/small | default |
|
||||
| clearable | whether select can be cleared | boolean | true / false | false |
|
||||
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | true / false | false |
|
||||
| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | true / false | false |
|
||||
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
|
||||
| name | the name attribute of select input | string | — | — |
|
||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
|
||||
| autocomplete | the autocomplete attribute of select input | string | — | off |
|
||||
| placeholder | placeholder | string | — | Select |
|
||||
| filterable | whether Select is filterable | boolean | true / false | false |
|
||||
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | true / false | false |
|
||||
| filter-method | custom filter method | function | — | — |
|
||||
| remote | whether options are loaded from server | boolean | true / false | false |
|
||||
| remote-method | custom remote search method | function | — | — |
|
||||
| remote-show-suffix | in remote search method show suffix icon | boolean | true / false | false |
|
||||
| loading | whether Select is loading data from server | boolean | true / false | false |
|
||||
| loading-text | displayed text while loading data from server | string | — | Loading |
|
||||
| no-match-text | displayed text when no data matches the filtering query, you can also use slot `empty` | string | — | No matching data |
|
||||
| no-data-text | displayed text when there is no options, you can also use slot `empty` | string | — | No data |
|
||||
| popper-class | custom class name for Select's dropdown | string | — | — |
|
||||
| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | object | — | — |
|
||||
| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | true / false | true |
|
||||
| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | true / false | false |
|
||||
| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | true / false | true |
|
||||
| teleported | whether select dropdown is teleported to the body | boolean | true / false | true |
|
||||
| persistent | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed | boolean | true / false | true |
|
||||
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | true / false | false |
|
||||
| clear-icon | Custom clear icon component | `string \| Component` | — | CircleClose |
|
||||
| fit-input-width | whether the width of the dropdown is the same as the input | boolean | true / false | false |
|
||||
| suffix-icon | Custom suffix icon component | `string \| Component` | — | ArrowDown |
|
||||
| suffix-transition<DeprecatedTag /> | animation when dropdown appears/disappears icon | boolean | true / false | true |
|
||||
| tag-type | tag type | string | success/info/warning/danger | info |
|
||||
| validate-event | whether to trigger form validation | boolean | true / false | true |
|
||||
| placement | position of dropdown | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom-start |
|
||||
| max-collapse-tags ^(2.3.0) | The max tags number to be shown. To use this, `collapse-tags` must be true | number | — | 1 |
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ---------------- |
|
||||
| model-value / v-model | binding value | array / string / number / boolean / object | — | — |
|
||||
| multiple | whether multiple-select is activated | boolean | true / false | false |
|
||||
| disabled | whether Select is disabled | boolean | true / false | false |
|
||||
| value-key | unique identity key name for value, required when value is an object | string | — | value |
|
||||
| size | size of Input | string | large/default/small | default |
|
||||
| clearable | whether select can be cleared | boolean | true / false | false |
|
||||
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | true / false | false |
|
||||
| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | true / false | false |
|
||||
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
|
||||
| name | the name attribute of select input | string | — | — |
|
||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
|
||||
| autocomplete | the autocomplete attribute of select input | string | — | off |
|
||||
| placeholder | placeholder | string | — | Select |
|
||||
| filterable | whether Select is filterable | boolean | true / false | false |
|
||||
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | true / false | false |
|
||||
| filter-method | custom filter method | function | — | — |
|
||||
| remote | whether options are loaded from server | boolean | true / false | false |
|
||||
| remote-method | custom remote search method | function | — | — |
|
||||
| remote-show-suffix | in remote search method show suffix icon | boolean | true / false | false |
|
||||
| loading | whether Select is loading data from server | boolean | true / false | false |
|
||||
| loading-text | displayed text while loading data from server | string | — | Loading |
|
||||
| no-match-text | displayed text when no data matches the filtering query, you can also use slot `empty` | string | — | No matching data |
|
||||
| no-data-text | displayed text when there is no options, you can also use slot `empty` | string | — | No data |
|
||||
| popper-class | custom class name for Select's dropdown | string | — | — |
|
||||
| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | true / false | true |
|
||||
| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | true / false | false |
|
||||
| popper-append-to-body ^(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | true / false | true |
|
||||
| teleported | whether select dropdown is teleported to the body | boolean | true / false | true |
|
||||
| persistent | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed | boolean | true / false | true |
|
||||
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | true / false | false |
|
||||
| clear-icon | Custom clear icon component | `string \| Component` | — | CircleClose |
|
||||
| fit-input-width | whether the width of the dropdown is the same as the input | boolean | true / false | false |
|
||||
| suffix-icon | Custom suffix icon component | `string \| Component` | — | ArrowDown |
|
||||
| suffix-transition ^(deprecated) | animation when dropdown appears/disappears icon | boolean | true / false | true |
|
||||
| tag-type | tag type | string | success/info/warning/danger | info |
|
||||
| validate-event | whether to trigger form validation | boolean | true / false | true |
|
||||
| placement | position of dropdown | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom-start |
|
||||
| max-collapse-tags ^(2.3.0) | The max tags number to be shown. To use this, `collapse-tags` must be true | number | — | 1 |
|
||||
|
||||
:::warning
|
||||
|
||||
`suffix-transition` has been **deprecated**, and **will be** removed in<VersionTag version="2.3.0" />, please use override style scheme.
|
||||
`suffix-transition` has been **deprecated**, and **will be** removed in ^(2.3.0), please use override style scheme.
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ title: Virtualized Table
|
||||
lang: en-US
|
||||
---
|
||||
|
||||
# Virtualized Table<VersionTag version="beta" />
|
||||
# Virtualized Table ^(beta)
|
||||
|
||||
Along with the evolutionary web development, table component has always been the most popular component in our web apps especially for dashboards, data analysis. For [Table V1](./table.md), with even just 1000 records of data, it can be very annoying when using it, because the poor performance.
|
||||
|
||||
|
||||
@@ -231,45 +231,45 @@ table/table-layout
|
||||
|
||||
## Table Attributes
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
|
||||
| data | Table data | array | — | — |
|
||||
| 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 | string | 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(\{ row, rowIndex \}) / string | — | — |
|
||||
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | function(\{ row, rowIndex \}) / object | — | — |
|
||||
| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | function(\{ row, column, rowIndex, columnIndex \}) / string | — | — |
|
||||
| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | function(\{ row, column, rowIndex, columnIndex \}) / object | — | — |
|
||||
| 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(\{ row, rowIndex }\) / 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(\{ row, rowIndex \}) / object | — | — |
|
||||
| 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(\{ row, column, rowIndex, columnIndex \}) / 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(\{ row, column, rowIndex, columnIndex \}) / object | — | — |
|
||||
| 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) / 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 | — | — |
|
||||
| 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 | (order: 'ascending' \| 'descending') | if `prop` is set, and `order` is not set, then `order` is default to ascending |
|
||||
| tooltip-effect | the `effect` of the overflow tooltip | string | dark / light | dark |
|
||||
| tooltip-options<VersionTag version="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'>` | [refer to tooltip](tooltip.html#attributes) | ^[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(\{ columns, data \}) | — | — |
|
||||
| span-method | method that returns rowspan and colspan | function(\{ row, column, rowIndex, columnIndex \}) | — | — |
|
||||
| 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 | — | — |
|
||||
| load | method for loading child row data, only works when `lazy` is true | function(row, treeNode, resolve) | — | — |
|
||||
| tree-props | configuration for rendering nested data | object | — | `{ hasChildren: 'hasChildren', children: 'children' }` |
|
||||
| table-layout | Sets the algorithm used to lay out table cells, rows, and columns | string | fixed / auto | fixed |
|
||||
| scrollbar-always-on | always show scrollbar | boolean | — | false |
|
||||
| flexible<VersionTag version="2.2.1" /> | ensure main axis minimum-size doesn't follow the content | boolean | — | false |
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
|
||||
| data | Table data | array | — | — |
|
||||
| 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 | string | 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(\{ row, rowIndex \}) / string | — | — |
|
||||
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | function(\{ row, rowIndex \}) / object | — | — |
|
||||
| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | function(\{ row, column, rowIndex, columnIndex \}) / string | — | — |
|
||||
| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | function(\{ row, column, rowIndex, columnIndex \}) / object | — | — |
|
||||
| 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(\{ row, rowIndex }\) / 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(\{ row, rowIndex \}) / object | — | — |
|
||||
| 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(\{ row, column, rowIndex, columnIndex \}) / 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(\{ row, column, rowIndex, columnIndex \}) / object | — | — |
|
||||
| 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) / 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 | — | — |
|
||||
| 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 | (order: 'ascending' \| 'descending') | if `prop` is set, and `order` is not set, then `order` is default to ascending |
|
||||
| tooltip-effect | the `effect` of the overflow tooltip | string | 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'>` | [refer to tooltip](tooltip.html#attributes) | ^[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(\{ columns, data \}) | — | — |
|
||||
| span-method | method that returns rowspan and colspan | function(\{ row, column, rowIndex, columnIndex \}) | — | — |
|
||||
| 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 | — | — |
|
||||
| load | method for loading child row data, only works when `lazy` is true | function(row, treeNode, resolve) | — | — |
|
||||
| tree-props | configuration for rendering nested data | object | — | `{ hasChildren: 'hasChildren', children: 'children' }` |
|
||||
| table-layout | Sets the algorithm used to lay out table cells, rows, and columns | string | fixed / auto | fixed |
|
||||
| scrollbar-always-on | always show scrollbar | boolean | — | false |
|
||||
| flexible ^(2.2.1) | ensure main axis minimum-size doesn't follow the content | boolean | — | false |
|
||||
|
||||
## Table Events
|
||||
|
||||
@@ -322,35 +322,35 @@ table/table-layout
|
||||
|
||||
## Table-column Attributes
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
|
||||
| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. | string | selection / index / expand | — |
|
||||
| index | customize indices for each row, works on columns with `type=index` | number / function(index) | — | — |
|
||||
| label | column label | string | — | — |
|
||||
| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | — | — |
|
||||
| prop | field name. You can also use its alias: `property` | string | — | — |
|
||||
| width | column width | string / number | — | — |
|
||||
| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string / number | — | — |
|
||||
| fixed | whether column is fixed at left / right. Will be fixed at left if `true` | string / boolean | true / 'left' / 'right' | — |
|
||||
| render-header | render function for table header of this column | function(\{ column, $index \}) | — | — |
|
||||
| sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean / string | custom | false |
|
||||
| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | function(a, b) | — | — |
|
||||
| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | function(row, index) / string / array | — | — |
|
||||
| sort-orders | the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array | array | (the elements in the array need to be one of the following: `ascending`, `descending` and `null` restores to the original order) | ['ascending', 'descending', null] |
|
||||
| resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | true |
|
||||
| formatter | function that formats cell content | function(row, column, cellValue, index) | — | — |
|
||||
| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean \| [`object`](#table-attributes)<VersionTag version="2.2.28" /> | Refer to table [tooltip-options](#table-attributes) | — |
|
||||
| align | alignment | string | left / center / right | left |
|
||||
| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | string | left / center / right | — |
|
||||
| class-name | class name of cells in the column | string | — | — |
|
||||
| label-class-name | class name of the label of this column | string | — | — |
|
||||
| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | function(row, index) | — | — |
|
||||
| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work | boolean | — | false |
|
||||
| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | `Array<{text: string, value: string}>` | — | — |
|
||||
| filter-placement | placement for the filter dropdown | string | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | — |
|
||||
| filter-multiple | whether data filtering supports multiple options | boolean | — | true |
|
||||
| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | function(value, row, column) | — | — |
|
||||
| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | array | — | — |
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
|
||||
| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. | string | selection / index / expand | — |
|
||||
| index | customize indices for each row, works on columns with `type=index` | number / function(index) | — | — |
|
||||
| label | column label | string | — | — |
|
||||
| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | — | — |
|
||||
| prop | field name. You can also use its alias: `property` | string | — | — |
|
||||
| width | column width | string / number | — | — |
|
||||
| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string / number | — | — |
|
||||
| fixed | whether column is fixed at left / right. Will be fixed at left if `true` | string / boolean | true / 'left' / 'right' | — |
|
||||
| render-header | render function for table header of this column | function(\{ column, $index \}) | — | — |
|
||||
| sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean / string | custom | false |
|
||||
| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | function(a, b) | — | — |
|
||||
| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | function(row, index) / string / array | — | — |
|
||||
| sort-orders | the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array | array | (the elements in the array need to be one of the following: `ascending`, `descending` and `null` restores to the original order) | ['ascending', 'descending', null] |
|
||||
| resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | true |
|
||||
| formatter | function that formats cell content | function(row, column, cellValue, index) | — | — |
|
||||
| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean \| [`object`](#table-attributes) ^(2.2.28) | Refer to table [tooltip-options](#table-attributes) | — |
|
||||
| align | alignment | string | left / center / right | left |
|
||||
| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | string | left / center / right | — |
|
||||
| class-name | class name of cells in the column | string | — | — |
|
||||
| label-class-name | class name of the label of this column | string | — | — |
|
||||
| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | function(row, index) | — | — |
|
||||
| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work | boolean | — | false |
|
||||
| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | `Array<{text: string, value: string}>` | — | — |
|
||||
| filter-placement | placement for the filter dropdown | string | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | — |
|
||||
| filter-multiple | whether data filtering supports multiple options | boolean | — | true |
|
||||
| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | function(value, row, column) | — | — |
|
||||
| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | array | — | — |
|
||||
|
||||
## Table-column Slots
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ title: Dark Mode
|
||||
lang: en-US
|
||||
---
|
||||
|
||||
# Dark Mode<VersionTag version="2.2.0" />
|
||||
# Dark Mode ^(2.2.0)
|
||||
|
||||
After a long time, Element Plus supports dark mode!
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ title: Custom Namespace
|
||||
lang: en-US
|
||||
---
|
||||
|
||||
## Custom namespace<VersionTag version="2.2.0" />
|
||||
## Custom namespace ^(2.2.0)
|
||||
|
||||
:::tip
|
||||
|
||||
|
||||
Reference in New Issue
Block a user