CommonSelect
Public selector supporting select, selectV2, and treeSelect.
Basic Usage
Component Types
Multiple Selection
Multiple Selection with Delimiter
Get Request Data
Below we simulate a request Internally, the default API wrapper is used. If you want to customize it, you can override it by wrapping with hooks asyncCache
Request Result Field Mapping
If the request result is not in value-label format, use labelField and valueField to get
Result Format Conversion
For example, if the interface gives string data but we store numbers in the business, they may not match. Use valueType
If the request format is inconsistent or value/label needs to be concatenated
Use parseData. You can register this globally. If it doesn't meet requirements during development, override it in config
Dictionary
First, you need to globally register the dictionary data acquisition method for this project in main.ts and inject the getDictOptions parameter. The function returns a Promise. Let's simulate it below
Request Parameters/Filter Options
In the API case, parameters are added to the passed function, and changes in query return data will trigger a new request with new parameters
Wait for All Query Parameters to Have Values Before Getting Data
Auto Selection
Automatically select when there is only one data item. Only valid for API and dict
Append Options
Append options. Internal deduplication will be performed
Sorting
CommonSelect Attributes (Props)
| Attribute | Description | Type | Default |
|---|---|---|---|
api | Request API interface method | Function | - |
dict | Dictionary name, used to get options from dictionary | string | string[] | - |
query | Request parameter configuration method | Function | - |
valueField | Value field mapping field name | string | - |
labelField | Text field mapping field name | string | - |
parseData | Method to transform request results | Function | - |
autoSelectFirst | Whether to automatically select when there is only one data item | boolean | false |
multiple | Whether it is multiple selection | boolean | false |
needAllQueryParams | Whether to pass all query parameters | boolean | false |
appendOptions | Appended option list or method | Record<any, any>[] | Function | - |
valueType | Value type, supports 'string', 'String', 'int', 'Int' | 'string' | 'String' | 'int' | 'Int' | - |
options | Bound option list | Record<any, any>[] | - |
ignoreByLabel | Ignored label list | string[] | - |
componentType | Component type, supports 'ElSelectV2', 'ElSelect', 'ElTreeSelect' | 'ElSelectV2' | 'ElSelect' | 'ElTreeSelect' | 'ElSelect' |
joinSplit | Concatenation delimiter when merging results in multiple selection | string | None |
orderBy | Sort field name | string | - |
orderType | Sort order, supports 'asc' or 'desc' | 'asc' | 'desc' | - |
getDictOptions | Method to get dictionary options | Function | - |