Select
Rules
Basic Example
js
const rule = {
type: "select",
field: "cate_id",
title: "Product Category",
value: ["104","105"],
options: [
{"value": "104", "label": "Organic Vegetables", "disabled": false},
{"value": "105", "label": "Fresh Fruits", "disabled": false},
],
props: {
multiple: true
},
}Props Configuration Examples
Single Select Dropdown
js
const rule = {
type: "select",
field: "category",
title: "Product Category",
value: "104",
options: [
{"value": "104", "label": "Organic Vegetables"},
{"value": "105", "label": "Fresh Fruits"},
{"value": "106", "label": "Seafood"},
],
props: {
placeholder: "Select product category",
clearable: true,
},
}Multiple Select Dropdown
js
const rule = {
type: "select",
field: "tags",
title: "Product Tags",
value: ["104","105"],
options: [
{"value": "104", "label": "Hot Sale"},
{"value": "105", "label": "New Product"},
{"value": "106", "label": "Recommended"},
],
props: {
multiple: true,
maxTagCount: 2,
placeholder: "Select tags",
},
}Searchable Dropdown
js
const rule = {
type: "select",
field: "product",
title: "Product Name",
options: [
{"value": "1", "label": "iPhone 15 Pro"},
{"value": "2", "label": "MacBook Pro"},
{"value": "3", "label": "iPad Air"},
],
props: {
filterable: true,
placeholder: "Enter or select product",
clearable: true,
},
}Remote Search
js
const rule = {
type: "select",
field: "user",
title: "Select User",
options: [],
props: {
filterable: true,
remote: true,
placeholder: "Enter username to search",
clearable: true,
loading: false,
},
inject: true,
on: {
search: ($inject, value) => {
if (value) {
// Call remote search API
searchUsers(value).then(res => {
// Update options
$inject.api.updateRule('user', {
options: res.data.map(item => ({
value: item.id,
label: item.name
}))
});
});
}
},
},
}Events Examples
Handle Selection Changes
js
const rule = {
type: "select",
field: "category",
title: "Product Category",
options: [
{"value": "104", "label": "Organic Vegetables"},
{"value": "105", "label": "Fresh Fruits"},
],
props: {
placeholder: "Select category",
clearable: true,
},
on: {
'update:value': (value, option) => {
console.log('Selection value changed:', value, option);
},
blur: () => {
console.log('Lost focus');
},
focus: () => {
console.log('Gained focus');
},
clear: () => {
console.log('Selection cleared');
},
},
}Linkage Update Other Fields After Selection
js
const rule = [
{
type: "select",
field: "category",
title: "Product Category",
options: [
{"value": "1", "label": "Electronics"},
{"value": "2", "label": "Clothing & Accessories"},
],
props: {
placeholder: "Select category",
},
inject: true,
on: {
'update:value': ($inject, value) => {
// Load subcategories based on selection
if (value === "1") {
$inject.api.updateRule('subcategory', {
options: [
{"value": "11", "label": "Mobile Phones"},
{"value": "12", "label": "Computers"},
]
});
} else if (value === "2") {
$inject.api.updateRule('subcategory', {
options: [
{"value": "21", "label": "Men's Clothing"},
{"value": "22", "label": "Women's Clothing"},
]
});
}
},
},
},
{
type: "select",
field: "subcategory",
title: "Subcategory",
options: [],
props: {
placeholder: "Select category first",
disabled: true,
},
},
]Complete configuration items: naive-ui_Select
value :Number | String | Array
Options
| Name | Type | Description |
|---|---|---|
| class | string | Custom class name for an option |
| disabled | boolean | Whether an option is disabled |
| label | string | ((option: SelectOption, selected: boolean) => VNodeChild) | Option label, note that if you use a render function, the default filter will filter this option |
| render | (info: { node: VNode, option: SelectOption, selected: boolean }) => VNodeChild | Render the entire option |
| style | string | object | Custom style for an option |
| value | string | number | Should be unique in options |
Props
| Name | Type | Default Value | Description | Version |
|---|---|---|---|---|
| consistent-menu-width | boolean | true | Whether menu width is consistent with select trigger, setting to false will disable virtual-scroll | |
| clearable | boolean | false | Whether it can be cleared | |
| clear-filter-after-select | boolean | true | Whether to keep current search keyword after selecting an option in filterable and multiple mode | 2.25.2 |
| disabled | boolean | false | Whether disabled | |
| fallback-option | false | (value: string | number) => SelectOption | value => ({ label: '' + value, value }) | Option that should correspond to a value when there is no corresponding option in the passed options. If set to false, no fallback option will be generated for values without corresponding options and they won't be displayed. Values not in options will be considered invalid and will be cleared by the component during operation | |
| filterable | boolean | false | Whether it can be filtered | |
| filter | (pattern: string, option: object) => boolean | A simple string search algorithm | Filter function | |
| input-props | HTMLInputAttributes | undefined | Properties of input element in trigger, only meaningful when filterable | |
| loading | boolean | false | Whether it is in loading state | |
| max-tag-count | number | 'responsive' | undefined | Maximum number of tags displayed in multiple selection, responsive will keep all tags in one line | |
| menu-props | HTMLAttributes | undefined | DOM attributes of menu | |
| multiple | boolean | false | Whether it is multiple selection | |
| options | Array<SelectOption | SelectGroupOption> | [] | Configure option content, see SelectOption Properties for details | |
| placeholder | string | '请选择' | Hint message | |
| placement | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start' | Menu popup position | 2.25.0 | |
| remote | boolean | false | Whether to asynchronously fetch options. Note that if set, filter and tag will not work on options. At this time you have full control over options | |
| render-label | (option: SelectOption | SelectGroupOption, selected: boolean) => VNodeChild | undefined | Option label render function | |
| render-option | (info: { node: VNode, option: SelectOption | SelectGroupOption, selected: boolean }) => VNodeChild | undefined | Option render function | |
| render-tag | (props: { option: SelectBaseOption, handleClose: () => void }) => VNodeChild | undefined | Control tag rendering | |
| reset-menu-on-options-change | boolean | true | Whether to reset menu state when options change, such as scroll state | 2.24.2 |
| show | boolean | undefined | Whether to show menu | |
| show-arrow | boolean | true | Whether to show arrow | |
| size | 'small' | 'medium' | 'large' | 'medium' | Component size | |
| tag | boolean | false | Whether new options can be created, needs to be used with filterable | |
| virtual-scroll | boolean | true | Whether to enable virtual scroll | |
| on-blur | () => void | undefined | Callback executed on blur | |
| on-clear | () => void | undefined | Callback executed on clear | |
| on-create | (label: string) => SelectOption | label => ({ label, value: label }) | How to create an option when inputting content. Note that filter will also work on this generated option. Also ensure that this option's value does not duplicate with other options | |
| on-focus | () => void | undefined | Callback executed on focus | |
| on-scroll | (e: ScrollEvent) => void | undefined | Callback executed on scroll | |
| on-search | (value: string) => void | undefined | Callback executed on search | |
| on-update:show | (show: boolean) => void | undefined | Callback for menu open state change | 2.24.2 |
| on-update:value | (value: Array | string | number | null, option: SelectBaseOption | null | SelectBaseOption[]) => void | undefined | Callback executed when value updates |