Select

Rules

Basic Example

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 Selection Dropdown

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: "Please select product category",
        allowClear: true,
    },
}

Multiple Selection Dropdown

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: {
        mode: "multiple",
        placeholder: "Please select tags",
        maxTagCount: 2,
    },
}

Searchable Dropdown

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: {
        showSearch: true,
        placeholder: "Please enter or select product",
        allowClear: true,
        filterOption: (input, option) => {
            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        },
    },
}

Remote Search

const rule = {
    type: "select",
    field: "user",
    title: "Select User",
    options: [],
    props: {
        showSearch: true,
        placeholder: "Please enter username to search",
        allowClear: true,
        filterOption: false,
        onSearch: async (value) => {
            if (value) {
                // Call remote search API
                const res = await searchUsers(value);
                // Update options
                // Need to update options through other methods
            }
        },
    },
}

Events Examples

Listen to Selection Changes

const rule = {
    type: "select",
    field: "category",
    title: "Product Category",
    options: [
        {"value": "104", "label": "Organic Vegetables"},
        {"value": "105", "label": "Fresh Fruits"},
    ],
    props: {
        placeholder: "Please select category",
        allowClear: true,
    },
    on: {
        change: (value) => {
            console.log('Selection value changed:', value);
        },
        blur: () => {
            console.log('Lost focus');
        },
        focus: () => {
            console.log('Gained focus');
        },
    },
}

Linkage Update Other Fields After Selection

const rule = [
    {
        type: "select",
        field: "category",
        title: "Product Category",
        options: [
            {"value": "1", "label": "Electronics"},
            {"value": "2", "label": "Clothing & Accessories"},
        ],
        props: {
            placeholder: "Please select category",
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Based on the selected category, load corresponding subcategories
                if (value === "1") {
                    $inject.api.updateRule('subcategory', {
                        options: [
                            {"value": "11", "label": "Phone"},
                            {"value": "12", "label": "Computer"},
                        ]
                    });
                } 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: "Please select category first",
            disabled: true,
        },
    },
]

Reference: Ant-design-vue_Select

value :Number | String | Array

Options

Field Name	Description	Field Type	Required	Default Value
value	Parameter value	String,Number	true	-
label	Field alias	String	true	-
disabled	Set to disabled state	Boolean	false	false

Props

Parameter	Description	Type	Default
allowClear	Support clear	boolean	false
autoClearSearchValue	Whether to clear search box after selecting item, only effective when mode is multiple or tags.	boolean	true
autofocus	Default focus	boolean	false
bordered	Whether to have border	boolean	true
clearIcon	Custom clear icon for multiple selection	VNode | slot	-
defaultActiveFirstOption	Whether to highlight first option by default	boolean	true
defaultOpen	Whether to expand dropdown menu by default	boolean	-
disabled	Whether disabled	boolean	false
popupClassName	className attribute of dropdown menu	string	-
dropdownMatchSelectWidth	Dropdown menu and selector have the same width. By default, min-width will be set, which will be ignored when the value is less than the selector width. false will disable virtual scrolling	boolean | number	true
dropdownMenuStyle	Custom style for dropdown menu	object	-
dropdownRender	Custom dropdown content	({menuNode: VNode, props}) => VNode | v-slot	-
dropdownStyle	style attribute of dropdown menu	object	-
fieldNames	Custom fields for node label, value, options	object	{ label: label, value: value, options: options }
filterOption	Whether to filter based on input items. When it is a function, it will receive inputValue and option as parameters. When option meets the filter condition, it should return true, otherwise return false.	boolean | function(inputValue, option)
filterSort	Sort function for filtered result items when searching, similar to compareFunction in Array.sort	(optionA: Option, optionB: Option) => number	-
firstActiveValue	Default highlighted option	string | string[]	-
getPopupContainer	Parent node for menu rendering. Default renders to body. If you encounter menu scroll positioning issues, try changing to scroll area and position relative to it.	function(triggerNode)	() => document.body
labelInValue	Whether to wrap each option's label into value, will change Select's value type from string to {key: string, label: vNodes, originLabel: any} format, originLabel (3.1) maintains original type, if node is constructed through a-select-option children, this value is a function (i.e., default slot of a-select-option)	boolean	false
listHeight	Set popup scroll height	number	256
maxTagCount	Maximum number of tags to display	number	-
maxTagPlaceholder	Content displayed when tags are hidden	slot | function(omittedValues)	-
maxTagTextLength	Maximum displayed tag text length	number	-
menuItemSelectedIcon	Custom icon for currently selected item	VNode | slot	-
mode	Set Select mode to multiple selection or tags	'multiple' | 'tags' | 'combobox'	-
notFoundContent	Content displayed when dropdown list is empty	string|slot	Not Found
open	Whether to expand dropdown menu	boolean	-
option	Custom node through option slot	v-slot:option="{value, label, [disabled, key, title]}"	-
optionFilterProp	Option property to filter when searching, does not support children	string	value
optionLabelProp	Property value of Option backfilled to selector, default is Option's child element. For example, when child element needs highlight effect, this value can be set to value.	string	children |
options	options data, if set then no need to manually construct selectOption nodes	Array<{value, label, [disabled, key, title]}>	[]
placeholder	Default text of selector	string|slot	-
placement	Position where selector pops up	bottomLeft bottomRight topLeft topRight	bottomLeft
removeIcon	Custom clear icon for multiple selection	VNode | slot	-
searchValue	Control search text	string	-
showArrow	Whether to show dropdown arrow	boolean	true for single selection, false for multiple selection
showSearch	Configure whether searchable	boolean	false for single selection, true for multiple selection
size	Selector size, options: large small	string	default
status	Set validation status	'error' | 'warning'	-
suffixIcon	Custom suffix icon for selector	VNode | slot	-
tagRender	Custom tag content render, only effective when mode is multiple or tags	slot | (props) => any	-
tokenSeparators	Separators for automatic word segmentation, only effective when mode="tags"	string[]	-
virtual	Set false to disable virtual scrolling	boolean	true

Events

Event Name	Description	Callback Parameters
blur	Callback when losing focus	function
change	Called when option is selected, or input value changes (in combobox mode)	function(value, option:Option | Array<Option>)
deselect	Called when deselected, parameter is selected item's value (or key), only effective in multiple or tags mode	function(value，option:Option)
dropdownVisibleChange	Callback when dropdown menu expands	function(open)
focus	Callback when gaining focus	function
inputKeyDown	Callback when key is pressed	function
mouseenter	Callback when mouse enters	function
mouseleave	Callback when mouse leaves	function
popupScroll	Callback when dropdown list scrolls	function
search	Callback when text box value changes	function(value: string)
select	Called when selected, parameter is selected item's value (or key)	function(value, option:Option)