From 1884b1d7c85b2d8cc00690bb14054bb86d84a111 Mon Sep 17 00:00:00 2001 From: zz <2418184580@qq.com> Date: Mon, 29 Aug 2022 11:23:35 +0800 Subject: [PATCH] refactor(utils): refine `iconPropType` (#9515) --- docs/en-US/component/breadcrumb.md | 8 +-- docs/en-US/component/button.md | 34 +++++------ docs/en-US/component/date-picker.md | 4 +- docs/en-US/component/datetime-picker.md | 4 +- docs/en-US/component/dropdown.md | 12 ++-- docs/en-US/component/input.md | 4 +- docs/en-US/component/link.md | 14 ++--- docs/en-US/component/menu.md | 26 ++++---- docs/en-US/component/message-box.md | 2 +- docs/en-US/component/notification.md | 32 +++++----- docs/en-US/component/page-header.md | 10 ++-- docs/en-US/component/pagination.md | 40 ++++++------- docs/en-US/component/popconfirm.md | 26 ++++---- docs/en-US/component/select-v2.md | 62 +++++++++---------- docs/en-US/component/select.md | 72 +++++++++++------------ docs/en-US/component/steps.md | 12 ++-- docs/en-US/component/switch.md | 40 ++++++------- docs/en-US/component/time-picker.md | 4 +- docs/en-US/component/time-select.md | 36 ++++++------ docs/en-US/component/timeline.md | 22 +++---- docs/en-US/component/tree-v2.md | 32 +++++----- docs/en-US/component/tree.md | 2 +- packages/components/tree/src/tree.type.ts | 2 +- packages/utils/vue/icon.ts | 4 +- 24 files changed, 252 insertions(+), 252 deletions(-) diff --git a/docs/en-US/component/breadcrumb.md b/docs/en-US/component/breadcrumb.md index e486f644bf..5131899030 100644 --- a/docs/en-US/component/breadcrumb.md +++ b/docs/en-US/component/breadcrumb.md @@ -25,10 +25,10 @@ breadcrumb/icon ## Breadcrumb Attributes -| Attribute | Description | Type | Accepted Values | Default | -| -------------- | -------------------------------- | -------------------------------------- | --------------- | ------- | -| separator | separator character | string | — | / | -| separator-icon | icon component of icon separator | `string \| Component \| (() => VNode)` | — | - | +| Attribute | Description | Type | Accepted Values | Default | +| -------------- | -------------------------------- | --------------------- | --------------- | ------- | +| separator | separator character | string | — | / | +| separator-icon | icon component of icon separator | `string \| Component` | — | - | ## Breadcrumb Slots diff --git a/docs/en-US/component/button.md b/docs/en-US/component/button.md index 754f92ef85..05cc5c8952 100644 --- a/docs/en-US/component/button.md +++ b/docs/en-US/component/button.md @@ -125,23 +125,23 @@ button/custom ## Button Attributes -| Attribute | Description | Type | Accepted Values | Default | -| ----------------------------------- | --------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------- | ------- | -| size | button size | string | large / default /small | — | -| type | button type | string | primary / success / warning / danger / info / text | — | -| 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 \| (() => VNode)` | — | Loading | -| disabled | disable the button | boolean | — | false | -| icon | icon component | `string \| Component \| (() => VNode)` | — | — | -| autofocus | same as native button's `autofocus` | boolean | — | false | -| native-type | same as native button's `type` | string | button / submit / reset | button | -| auto-insert-space | automatically insert a space between two chinese characters | boolean | | — | +| Attribute | Description | Type | Accepted Values | Default | +| ----------------------------------- | --------------------------------------------------------------- | --------------------- | ------------------------------------------------------------- | ------- | +| size | button size | string | large / default /small | — | +| type | button type | string | primary / success / warning / danger / info / text | — | +| 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` | string | button / submit / reset | button | +| auto-insert-space | automatically insert a space between two chinese characters | boolean | | — | ## Button Slots diff --git a/docs/en-US/component/date-picker.md b/docs/en-US/component/date-picker.md index 76f061d75d..6d8570dcf4 100644 --- a/docs/en-US/component/date-picker.md +++ b/docs/en-US/component/date-picker.md @@ -160,8 +160,8 @@ Note, date time locale (month name, first day of the week ...) are also configur | id | same as `id` in native input | string / array(string) | String `id="my-date"` or array `:id="['my-range-start', 'my-range-end']"` for date range | - | | name | same as `name` in native input | string | — | — | | unlink-panels | unlink two date-panels in range-picker | boolean | — | false | -| prefix-icon | custom prefix icon component | `string \| Component \| (() => VNode)` | — | Date | -| clear-icon | custom clear icon component | `string \| Component \| (() => VNode)` | — | CircleClose | +| prefix-icon | custom prefix icon component | `string \| Component` | — | Date | +| clear-icon | custom clear icon component | `string \| Component` | — | CircleClose | | validate-event | whether to trigger form validation | boolean | - | true | | disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — | | shortcuts | an object array to set shortcut options | object[{ text: string, value: date / function }] | — | — | diff --git a/docs/en-US/component/datetime-picker.md b/docs/en-US/component/datetime-picker.md index c49ce98fb8..558957ccc1 100644 --- a/docs/en-US/component/datetime-picker.md +++ b/docs/en-US/component/datetime-picker.md @@ -81,8 +81,8 @@ datetime-picker/default-time | id | same as `id` in native input | string / array(string) | String `id="my-datetime"` or array `:id="['my-range-start', 'my-range-end']"` for date range | - | | name | same as `name` in native input | string | — | — | | unlink-panels | unllink two date-panels in range-picker | boolean | — | false | -| prefix-icon | Custom prefix icon component | `string \| Component \| (() => VNode)` | — | Date | -| clear-icon | Custom clear icon component | `string \| Component \| (() => VNode)` | — | CircleClose | +| prefix-icon | Custom prefix icon component | `string \| Component` | — | Date | +| clear-icon | Custom clear icon component | `string \| Component` | — | CircleClose | | shortcuts | an object array to set shortcut options | object[{ text: string, value: date / function }] | — | — | | disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — | | cellClassName | set custom className | Function(Date) | — | — | diff --git a/docs/en-US/component/dropdown.md b/docs/en-US/component/dropdown.md index f70371c0a4..4cf2d12825 100644 --- a/docs/en-US/component/dropdown.md +++ b/docs/en-US/component/dropdown.md @@ -126,12 +126,12 @@ dropdown/sizes ## Dropdown-Item Attributes -| Attribute | Description | Type | Accepted Values | Default | -| --------- | ----------------------------------------------------------- | -------------------------------------- | --------------- | ------- | -| command | a command to be dispatched to Dropdown's `command` callback | string/number/object | — | — | -| disabled | whether the item is disabled | boolean | — | false | -| divided | whether a divider is displayed | boolean | — | false | -| icon | custom icon | `string \| Component \| (() => VNode)` | — | — | +| Attribute | Description | Type | Accepted Values | Default | +| --------- | ----------------------------------------------------------- | --------------------- | --------------- | ------- | +| command | a command to be dispatched to Dropdown's `command` callback | string/number/object | — | — | +| disabled | whether the item is disabled | boolean | — | false | +| divided | whether a divider is displayed | boolean | — | false | +| icon | custom icon | `string \| Component` | — | — | ## Dropdown-Item Slots diff --git a/docs/en-US/component/input.md b/docs/en-US/component/input.md index 5343ee1059..8d4e4d0d70 100644 --- a/docs/en-US/component/input.md +++ b/docs/en-US/component/input.md @@ -131,8 +131,8 @@ input/length-limiting | show-password | whether to show toggleable password input | boolean | — | false | | disabled | whether Input is disabled | boolean | — | false | | size | size of Input, works when `type` is not 'textarea' | string | large / default / small | — | -| prefix-icon | prefix icon component | `string \| Component \| (() => VNode)` | — | — | -| suffix-icon | suffix icon component | `string \| Component \| (() => VNode)` | — | — | +| prefix-icon | prefix icon component | `string \| Component` | — | — | +| suffix-icon | suffix icon component | `string \| Component` | — | — | | rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 | | autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. `{ minRows: 2, maxRows: 6 }` | boolean / object | — | false | | autocomplete | same as `autocomplete` in native input | string | — | off | diff --git a/docs/en-US/component/link.md b/docs/en-US/component/link.md index c7a67ecfcd..cdfa7a7f48 100644 --- a/docs/en-US/component/link.md +++ b/docs/en-US/component/link.md @@ -55,13 +55,13 @@ link/with-icon ## Attributes -| Attribute | Description | Type | Accepted Values | Default | -| --------- | ----------------------------------- | -------------------------------------- | ----------------------------------------------------- | ------- | -| type | type | string | primary / success / warning / danger / info / default | default | -| underline | whether the component has underline | boolean | — | true | -| disabled | whether the component is disabled | boolean | — | false | -| href | same as native hyperlink's `href` | string | — | - | -| icon | icon component | `string \| Component \| (() => VNode)` | — | - | +| Attribute | Description | Type | Accepted Values | Default | +| --------- | ----------------------------------- | --------------------- | ----------------------------------------------------- | ------- | +| type | type | string | primary / success / warning / danger / info / default | default | +| underline | whether the component has underline | boolean | — | true | +| disabled | whether the component is disabled | boolean | — | false | +| href | same as native hyperlink's `href` | string | — | - | +| icon | icon component | `string \| Component` | — | - | ## Slots diff --git a/docs/en-US/component/menu.md b/docs/en-US/component/menu.md index b4c4694962..4042c5370b 100644 --- a/docs/en-US/component/menu.md +++ b/docs/en-US/component/menu.md @@ -85,19 +85,19 @@ menu/collapse ## SubMenu Attributes -| Attribute | Description | Type | Accepted Values | Default | -| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | --------------- | ----------------------------------------------- | -| index | unique identification | string | — | — | -| popper-class | custom class name for the popup menu | string | — | — | -| show-timeout | timeout before showing a sub-menu | number | — | 300 | -| hide-timeout | timeout before hiding a sub-menu | number | — | 300 | -| disabled | whether the sub-menu is disabled | boolean | — | false | -| popper-append-to-body(deprecated) | whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop | boolean | — | level one SubMenu: true / other SubMenus: false | -| popper-offset | offset of the popper | number | — | 6 | -| expand-close-icon | Icon when menu are expanded and submenu are closed, `expand-close-icon` and `expand-open-icon` need to be passed together to take effect | `string \| Component \| (() => VNode)` | — | — | -| expand-open-icon | Icon when menu are expanded and submenu are opened, `expand-open-icon` and `expand-close-icon` need to be passed together to take effect | `string \| Component \| (() => VNode)` | — | — | -| collapse-close-icon | Icon when menu are collapsed and submenu are closed, `collapse-close-icon` and `collapse-open-icon` need to be passed together to take effect | `string \| Component \| (() => VNode)` | — | — | -| collapse-open-icon | Icon when menu are collapsed and submenu are opened, `collapse-open-icon` and `collapse-close-icon` need to be passed together to take effect | `string \| Component \| (() => VNode)` | — | — | +| Attribute | Description | Type | Accepted Values | Default | +| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | --------------- | ----------------------------------------------- | +| index | unique identification | string | — | — | +| popper-class | custom class name for the popup menu | string | — | — | +| show-timeout | timeout before showing a sub-menu | number | — | 300 | +| hide-timeout | timeout before hiding a sub-menu | number | — | 300 | +| disabled | whether the sub-menu is disabled | boolean | — | false | +| popper-append-to-body(deprecated) | whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop | boolean | — | level one SubMenu: true / other SubMenus: false | +| popper-offset | offset of the popper | number | — | 6 | +| expand-close-icon | Icon when menu are expanded and submenu are closed, `expand-close-icon` and `expand-open-icon` need to be passed together to take effect | `string \| Component` | — | — | +| expand-open-icon | Icon when menu are expanded and submenu are opened, `expand-open-icon` and `expand-close-icon` need to be passed together to take effect | `string \| Component` | — | — | +| collapse-close-icon | Icon when menu are collapsed and submenu are closed, `collapse-close-icon` and `collapse-open-icon` need to be passed together to take effect | `string \| Component` | — | — | +| collapse-open-icon | Icon when menu are collapsed and submenu are opened, `collapse-open-icon` and `collapse-close-icon` need to be passed together to take effect | `string \| Component` | — | — | ## SubMenu Slots diff --git a/docs/en-US/component/message-box.md b/docs/en-US/component/message-box.md index d80bed8df1..ff653be1c7 100644 --- a/docs/en-US/component/message-box.md +++ b/docs/en-US/component/message-box.md @@ -159,7 +159,7 @@ The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageB | message | content of the MessageBox | string | — | — | | dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false | | type | message type, used for icon display | string | success / info / warning / error | — | -| icon | custom icon component, overrides `type` | `string \| Component \| (() => VNode)` | — | — | +| icon | custom icon component, overrides `type` | `string \| Component` | — | — | | custom-class | custom class name for MessageBox | string | — | — | | custom-style | custom inline style for MessageBox | CSSProperties | — | — | | callback | MessageBox closing callback if you don't prefer Promise | function(action, instance), where `action` can be 'confirm', 'cancel' or 'close', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — | diff --git a/docs/en-US/component/notification.md b/docs/en-US/component/notification.md index 18c53a9f10..6db6b39dcf 100644 --- a/docs/en-US/component/notification.md +++ b/docs/en-US/component/notification.md @@ -106,22 +106,22 @@ ElNotification({}, appContext) ## Options -| Attribute | Description | Type | Accepted Values | Default | -| ------------------------ | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------- | ------------------------------------------- | ------------- | -| title | title | string | — | — | -| message | description text | string/Vue.VNode | — | — | -| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false | -| type | notification type | string | success/warning/info/error | — | -| icon | custom icon component. It will be overridden by `type` | `string \| Component \| (() => VNode)` | — | — | -| customClass | custom class name for Notification | string | — | — | -| duration | duration before close. It will not automatically close if set 0 | number | — | 4500 | -| position | custom position | string | top-right/top-left/bottom-right/bottom-left | top-right | -| showClose | whether to show a close button | boolean | — | true | -| onClose | callback function when closed | function | — | — | -| onClick | callback function when notification clicked | function | — | — | -| offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 | -| appendTo | set the root element for the notification | string / HTMLElement | - | document.body | -| zIndex | initial zIndex | number | - | 0 | +| Attribute | Description | Type | Accepted Values | Default | +| ------------------------ | ------------------------------------------------------------------------------------------------------------------ | --------------------- | ------------------------------------------- | ------------- | +| title | title | string | — | — | +| message | description text | string/Vue.VNode | — | — | +| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false | +| type | notification type | string | success/warning/info/error | — | +| icon | custom icon component. It will be overridden by `type` | `string \| Component` | — | — | +| customClass | custom class name for Notification | string | — | — | +| duration | duration before close. It will not automatically close if set 0 | number | — | 4500 | +| position | custom position | string | top-right/top-left/bottom-right/bottom-left | top-right | +| showClose | whether to show a close button | boolean | — | true | +| onClose | callback function when closed | function | — | — | +| onClick | callback function when notification clicked | function | — | — | +| offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 | +| appendTo | set the root element for the notification | string / HTMLElement | - | document.body | +| zIndex | initial zIndex | number | - | 0 | ## Methods diff --git a/docs/en-US/component/page-header.md b/docs/en-US/component/page-header.md index 7e78c90991..f7c827f2a9 100644 --- a/docs/en-US/component/page-header.md +++ b/docs/en-US/component/page-header.md @@ -100,11 +100,11 @@ The component is consisted of these parts ## Attributes -| Attribute | Description | Type | Accepted Values | Default | -| --------- | -------------- | -------------------------------------- | --------------- | ------- | -| icon | icon component | `string \| Component \| (() => VNode)` | — | Back | -| title | main title | string | — | Back | -| content | content | string | — | — | +| Attribute | Description | Type | Accepted Values | Default | +| --------- | -------------- | --------------------- | --------------- | ------- | +| icon | icon component | `string \| Component` | — | Back | +| title | main title | string | — | Back | +| content | content | string | — | — | ## Events diff --git a/docs/en-US/component/pagination.md b/docs/en-US/component/pagination.md index 2e58495259..2d77abcf0f 100644 --- a/docs/en-US/component/pagination.md +++ b/docs/en-US/component/pagination.md @@ -63,26 +63,26 @@ pagination/more-elements ## Attributes -| Attribute | Description | Type | Accepted Values | Default | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------ | -------------------------------------- | -| small | whether to use small pagination | boolean | — | false | -| background | whether the buttons have a background color | boolean | — | false | -| page-size | item count of each page, supports the v-model bidirectional binding | number | — | 10 | -| default-page-size | default initial value of page size | number | - | - | -| total | total item count | number | — | — | -| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — | -| pager-count | number of pagers. Pagination collapses when the total page count exceeds this value | number | odd number between 5 and 21 | 7 | -| current-page | current page number, supports the v-model bidirectional binding | number | — | 1 | -| default-current-page | default initial value of current-page | number | - | - | -| layout | layout of Pagination, elements separated with a comma | string | `sizes` / `prev` / `pager` / `next` / `jumper` / `->` / `total` / `slot` | 'prev, pager, next, jumper, ->, total' | -| page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] | -| popper-class | custom class name for the page size Select's dropdown | string | — | — | -| prev-text | text for the prev button | string | — | — | -| prev-icon | icon for the prev button, higher priority of `prev-text` | `string \| Component \| (() => VNode)` | — | ArrowLeft | -| next-text | text for the next button | string | — | — | -| next-icon | icon for the next button, higher priority of `next-text` | `string \| Component \| (() => VNode)` | — | ArrowRight | -| disabled | whether Pagination is disabled | boolean | — | false | -| hide-on-single-page | whether to hide when there's only one page | boolean | — | - | +| Attribute | Description | Type | Accepted Values | Default | +| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------ | -------------------------------------- | +| small | whether to use small pagination | boolean | — | false | +| background | whether the buttons have a background color | boolean | — | false | +| page-size | item count of each page, supports the v-model bidirectional binding | number | — | 10 | +| default-page-size | default initial value of page size | number | - | - | +| total | total item count | number | — | — | +| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — | +| pager-count | number of pagers. Pagination collapses when the total page count exceeds this value | number | odd number between 5 and 21 | 7 | +| current-page | current page number, supports the v-model bidirectional binding | number | — | 1 | +| default-current-page | default initial value of current-page | number | - | - | +| layout | layout of Pagination, elements separated with a comma | string | `sizes` / `prev` / `pager` / `next` / `jumper` / `->` / `total` / `slot` | 'prev, pager, next, jumper, ->, total' | +| page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] | +| popper-class | custom class name for the page size Select's dropdown | string | — | — | +| prev-text | text for the prev button | string | — | — | +| prev-icon | icon for the prev button, higher priority of `prev-text` | `string \| Component` | — | ArrowLeft | +| next-text | text for the next button | string | — | — | +| next-icon | icon for the next button, higher priority of `next-text` | `string \| Component` | — | ArrowRight | +| disabled | whether Pagination is disabled | boolean | — | false | +| hide-on-single-page | whether to hide when there's only one page | boolean | — | - | :::warning diff --git a/docs/en-US/component/popconfirm.md b/docs/en-US/component/popconfirm.md index e746c9291f..83f5dd6d98 100644 --- a/docs/en-US/component/popconfirm.md +++ b/docs/en-US/component/popconfirm.md @@ -39,19 +39,19 @@ popconfirm/trigger-event ## Attributes -| Attribute | Description | Type | Accepted Values | Default | -| ------------------- | ----------------------------------------------------------------------------------- | -------------------------------------- | -------------------------------------------------- | --------------- | -| title | Title | String | — | — | -| confirm-button-text | Confirm button text | String | — | — | -| cancel-button-text | Cancel button text | String | — | — | -| confirm-button-type | Confirm button type | String | primary / success / warning / danger / info / text | primary | -| cancel-button-type | Cancel button type | String | primary / success / warning / danger / info / text | text | -| icon | Icon Component | `string \| Component \| (() => VNode)` | — | QuestionFilled | -| icon-color | Icon color | String | — | #f90 | -| hide-icon | is hide Icon | Boolean | — | false | -| teleported | whether popconfirm is teleported to the body | boolean | true / false | true | -| persistent | when popconfirm inactive and `persistent` is `false` , popconfirm will be destroyed | boolean | — | false | -| width | popconfirm width | string/number | - | Min width 150px | +| Attribute | Description | Type | Accepted Values | Default | +| ------------------- | ----------------------------------------------------------------------------------- | --------------------- | -------------------------------------------------- | --------------- | +| title | Title | String | — | — | +| confirm-button-text | Confirm button text | String | — | — | +| cancel-button-text | Cancel button text | String | — | — | +| confirm-button-type | Confirm button type | String | primary / success / warning / danger / info / text | primary | +| cancel-button-type | Cancel button type | String | primary / success / warning / danger / info / text | text | +| icon | Icon Component | `string \| Component` | — | QuestionFilled | +| icon-color | Icon color | String | — | #f90 | +| hide-icon | is hide Icon | Boolean | — | false | +| teleported | whether popconfirm is teleported to the body | boolean | true / false | true | +| persistent | when popconfirm inactive and `persistent` is `false` , popconfirm will be destroyed | boolean | — | false | +| width | popconfirm width | string/number | - | Min width 150px | ## Slots diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md index 2d95d8ed3c..1f42de8197 100644 --- a/docs/en-US/component/select-v2.md +++ b/docs/en-US/component/select-v2.md @@ -127,37 +127,37 @@ select-v2/remote-search ## SelectV2 Attributes -| Attribute | Description | Type | Accepted Values | Default | -| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------------- | ------------- | -| model-value / v-model | biding value | string / number / boolean / object | — | — | -| multiple | is multiple | boolean | — | false | -| disabled | is disabled | boolean | — | false | -| value-key | unique identity key name for value, required when value is an object | string | — | value | -| size | input box size | string | large/default/small | default | -| clearable | whether select can be cleared | boolean | — | false | -| clear-icon | custom clear icon | `string \| Component \| (() => VNode)` | — | CircleClose | -| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | 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 | autocomplete of select input | string | — | off | -| placeholder | the autocomplete attribute of select input | string | — | Please select | -| filterable | is filterable | boolean | — | false | -| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false | -| reserve-keyword | whether reserve the keyword after select filtered option. | boolean | — | true | -| 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-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 | - | false | -| 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 | -| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | object | - | - | -| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false | -| height | The height of the dropdown panel, 34px for each item | number | - | 170 | -| scrollbar-always-on | Controls whether the scrollbar is always displayed | boolean | - | false | -| remote | whether search data from server | boolean | — | false | -| remote-method | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | function(keyword: string) | — | — | -| validate-event | whether to trigger form validation | boolean | - | true | +| Attribute | Description | Type | Accepted Values | Default | +| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------- | ------------- | +| model-value / v-model | biding value | string / number / boolean / object | — | — | +| multiple | is multiple | boolean | — | false | +| disabled | is disabled | boolean | — | false | +| value-key | unique identity key name for value, required when value is an object | string | — | value | +| size | input box size | string | large/default/small | default | +| clearable | whether select can be cleared | boolean | — | false | +| clear-icon | custom clear icon | `string \| Component` | — | CircleClose | +| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | 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 | autocomplete of select input | string | — | off | +| placeholder | the autocomplete attribute of select input | string | — | Please select | +| filterable | is filterable | boolean | — | false | +| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false | +| reserve-keyword | whether reserve the keyword after select filtered option. | boolean | — | true | +| 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-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 | - | false | +| 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 | +| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | object | - | - | +| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false | +| height | The height of the dropdown panel, 34px for each item | number | - | 170 | +| scrollbar-always-on | Controls whether the scrollbar is always displayed | boolean | - | false | +| remote | whether search data from server | boolean | — | false | +| remote-method | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | function(keyword: string) | — | — | +| validate-event | whether to trigger form validation | boolean | - | true |