diff --git a/docs/en-US/component/autocomplete.md b/docs/en-US/component/autocomplete.md index e4a05108d0..2c55312cce 100644 --- a/docs/en-US/component/autocomplete.md +++ b/docs/en-US/component/autocomplete.md @@ -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 | 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 diff --git a/docs/en-US/component/button.md b/docs/en-US/component/button.md index a9eb38df61..b62ac72954 100644 --- a/docs/en-US/component/button.md +++ b/docs/en-US/component/button.md @@ -29,9 +29,9 @@ button/disabled :::warning -`type="text"` has been **deprecated**, and **will be** removed in, 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, 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 +## 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 | determine whether it's a text button | ^[boolean] | false | -| bg | determine whether the text button background color is always on | ^[boolean] | false | -| link | 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 diff --git a/docs/en-US/component/checkbox.md b/docs/en-US/component/checkbox.md index 2dda99fe5a..2374d15777 100644 --- a/docs/en-US/component/checkbox.md +++ b/docs/en-US/component/checkbox.md @@ -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 | 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 diff --git a/docs/en-US/component/dialog.md b/docs/en-US/component/dialog.md index e8fcd93edb..fd66f43085 100644 --- a/docs/en-US/component/dialog.md +++ b/docs/en-US/component/dialog.md @@ -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 | 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, 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 | 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 diff --git a/docs/en-US/component/drawer.md b/docs/en-US/component/drawer.md index 66a0c51655..df9e74d281 100644 --- a/docs/en-US/component/drawer.md +++ b/docs/en-US/component/drawer.md @@ -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 | 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, 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 | 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 diff --git a/docs/en-US/component/image.md b/docs/en-US/component/image.md index b5e5d7ef5b..fecf8201d9 100644 --- a/docs/en-US/component/image.md +++ b/docs/en-US/component/image.md @@ -35,7 +35,7 @@ image/load-failed :::tip -Native `loading` has been supported since, 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` | 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 diff --git a/docs/en-US/component/input-number.md b/docs/en-US/component/input-number.md index 7223ce5a54..400fa5a94a 100644 --- a/docs/en-US/component/input-number.md +++ b/docs/en-US/component/input-number.md @@ -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 | 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 diff --git a/docs/en-US/component/input.md b/docs/en-US/component/input.md index c17eaf4304..912d6cba31 100644 --- a/docs/en-US/component/input.md +++ b/docs/en-US/component/input.md @@ -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 | 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[]` | {} | diff --git a/docs/en-US/component/radio.md b/docs/en-US/component/radio.md index 3cea7f4690..2f3cc9ea86 100644 --- a/docs/en-US/component/radio.md +++ b/docs/en-US/component/radio.md @@ -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 | 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] | — | diff --git a/docs/en-US/component/rate.md b/docs/en-US/component/rate.md index ddbc0a2c4b..5662b35f36 100644 --- a/docs/en-US/component/rate.md +++ b/docs/en-US/component/rate.md @@ -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 | same as `aria-label` in Rate | ^[string] | — | +| label ^(a11y) | same as `aria-label` in Rate | ^[string] | — | ### Events diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md index 6706b7758f..84cb194b98 100644 --- a/docs/en-US/component/select.md +++ b/docs/en-US/component/select.md @@ -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 | 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, please use override style scheme. +`suffix-transition` has been **deprecated**, and **will be** removed in ^(2.3.0), please use override style scheme. ::: diff --git a/docs/en-US/component/table-v2.md b/docs/en-US/component/table-v2.md index e9c191621b..da7b72b7ab 100644 --- a/docs/en-US/component/table-v2.md +++ b/docs/en-US/component/table-v2.md @@ -3,7 +3,7 @@ title: Virtualized Table lang: en-US --- -# Virtualized Table +# 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. diff --git a/docs/en-US/component/table.md b/docs/en-US/component/table.md index d2ac2ed8c4..74a22cc931 100644 --- a/docs/en-US/component/table.md +++ b/docs/en-US/component/table.md @@ -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 | the options for the overflow tooltip, [see the following tooltip component](tooltip.html#attributes) | ^[object]`Pick` | [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 | 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` | [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) | 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 diff --git a/docs/en-US/guide/dark-mode.md b/docs/en-US/guide/dark-mode.md index 635e35c236..667abbb510 100644 --- a/docs/en-US/guide/dark-mode.md +++ b/docs/en-US/guide/dark-mode.md @@ -3,7 +3,7 @@ title: Dark Mode lang: en-US --- -# Dark Mode +# Dark Mode ^(2.2.0) After a long time, Element Plus supports dark mode! diff --git a/docs/en-US/guide/namespace.md b/docs/en-US/guide/namespace.md index 9050c6a35b..7a29fea716 100644 --- a/docs/en-US/guide/namespace.md +++ b/docs/en-US/guide/namespace.md @@ -3,7 +3,7 @@ title: Custom Namespace lang: en-US --- -## Custom namespace +## Custom namespace ^(2.2.0) :::tip