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 Select 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: "Select product category",
        clearable: true,
    },
}

Multiple Select 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: {
        multiple: true,
        collapseTags: true,
        collapseTagsTooltip: true,
        placeholder: "Select tags",
    },
}

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: {
        filterable: true,
        placeholder: "Enter or select product",
        clearable: true,
    },
}

Remote Search

const rule = {
    type: "select",
    field: "user",
    title: "Select User",
    props: {
        filterable: true,
        remote: true,
        remoteMethod: async (query) => {
            if (query) {
                // Call remote search API
                const res = await searchUsers(query);
                return res.data.map(item => ({
                    value: item.id,
                    label: item.name
                }));
            }
            return [];
        },
        placeholder: "Enter username to search",
        loading: false,
    },
}

Limit Multiple Selection Count

const rule = {
    type: "select",
    field: "categories",
    title: "Product Category",
    value: ["104"],
    options: [
        {"value": "104", "label": "Organic Vegetables"},
        {"value": "105", "label": "Fresh Fruits"},
        {"value": "106", "label": "Seafood"},
    ],
    props: {
        multiple: true,
        multipleLimit: 3,
        placeholder: "Select up to 3 categories",
    },
}

Events Examples

Listen to Changes and Focus Events

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: {
        change: (value) => {
            console.log('Selection value changed:', value);
        },
        blur: (event) => {
            console.log('Lost focus:', event);
        },
        focus: (event) => {
            console.log('Gained focus:', event);
        },
        clear: () => {
            console.log('Selection cleared');
        },
        'visible-change': (visible) => {
            console.log('Dropdown visibility:', visible);
        },
    },
}

Linkage Update Other Fields

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: {
            change: ($inject, value) => {
                // Load subcategories based on selected category
                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,
        },
    },
]

Remove Tag in Multiple Selection Mode

const rule = {
    type: "select",
    field: "tags",
    title: "Product Tags",
    value: ["1", "2"],
    options: [
        {"value": "1", "label": "Hot Sale"},
        {"value": "2", "label": "New Product"},
        {"value": "3", "label": "Recommended"},
    ],
    props: {
        multiple: true,
        collapseTags: true,
    },
    on: {
        'remove-tag': (value) => {
            console.log('Tag removed:', value);
        },
    },
}

Slots Examples

Custom Empty Data Hint

const rule = {
    type: "select",
    field: "category",
    title: "Product Category",
    options: [],
    props: {
        filterable: true,
        placeholder: "Enter to search",
    },
    children: [
        {
            type: 'div',
            slot: 'empty',
            children: ['No data available, please try other keywords']
        }
    ]
}

Complete configuration items: Element_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

Property Name	Description	Type	Default
multiple	Whether multiple selection	boolean	false
disabled	Whether disabled	boolean	false
valueKey	Key name as unique identifier for value, required when binding value is object type	string	value
size	Input size	enum	—
clearable	Whether options can be cleared	boolean	false
collapseTags	Whether to display selected values as text in multiple selection mode	boolean	false
collapseTagsTooltip	Whether to display all selected tags when hovering over collapsed tag text. This property requires collapse-tags to be set to true	boolean	false
multipleLimit	When multiple is set to true, represents the maximum number of items users can select in multiple selection scenario, 0 means unlimited	number	0
name	Native name attribute of Select input	string	—
effect	Tooltip theme, built-in dark / light	enum / string	light
autocomplete	Native autocomplete attribute of Select input	string	off
placeholder	Placeholder, default is "Select"	string	—
filterable	Whether Select component is filterable	boolean	false
allowCreate	Whether to allow users to create new entries, only effective when filterable is set to true	boolean	false
filterMethod	Custom filter method	Function	—
remote	Whether options are loaded remotely from server	boolean	false
remoteMethod	Custom remote search method	Function	—
remoteShowSuffix	Show suffix icon for remote search method	boolean	false
loading	Whether data is being fetched from remote	boolean	false
loadingText	Text displayed when loading data from server, default is "Loading"	string	—
noMatchText	Text displayed when search condition has no match, can also use empty slot to set, default is "No matching data"	string	—
noDataText	Text displayed when there are no options, can also use empty slot to set custom content, default is "No data"	string	—
popperClass	Custom class name for selector dropdown menu	string	''
reserveKeyword	When multiple and filterable are set to true, whether to keep current search keyword after selecting an option	boolean	true
defaultFirstOption	Whether to select first matching item when pressing Enter in input box. Requires filterable or remote to be used	boolean	false
teleported	Whether to use teleport. If set to true, it will be appended to append-to location	boolean	true
appendTo	Which DOM element the dropdown is mounted to	CSSSelector / HTMLElement	—
persistent	When dropdown selector is not activated and persistent is set to false, selector will be removed	boolean	true
automaticDropdown	For non-searchable Select, auto-popup option menu when input gains focus	boolean	false
clearIcon	Custom clear icon	string / object	CircleClose
fitInputWidth	Whether dropdown width is the same as input box	boolean	false
suffixIcon	Custom suffix icon component	string / object	ArrowDown
tagType	Tag type	enum	info
tagEffect	Tag effect	enum	light
validateEvent	Whether to trigger form validation	boolean	true
offset	Dropdown panel offset	number	12
showArrow	Whether dropdown menu content has arrow	boolean	true
placement	Position where dropdown appears	enum	bottom-start
fallbackPlacements	Available positions for dropdown, please refer to popper.js documentation	array	['bottom-start', 'top-start', 'right', 'left']
maxCollapseTags	Maximum number of Tags to display, only effective when collapse-tags is set to true	number	1
popperOptions	popper.js parameters	objectrefer to popper.js doc	{}
ariaLabel	Equivalent to native input aria-label attribute	string	—
emptyValues	Component empty value configuration refer to config-provider	array	—
valueOnClear	Value when clearing options refer to config-provider	string / number / boolean / Function	—
tabindex	Input tabindex	string / number	—

Events

Event Name	Description	Type
change	Triggered when selected value changes	Function
visible-change	Triggered when dropdown appears/hides	Function
remove-tag	Triggered when tag is removed in multiple selection mode	Function
clear	Triggered when user clicks clear button in clearable single selection mode	Function
blur	Triggered when input loses focus	Function
focus	Triggered when input gains focus	Function
popup-scroll 2.9.4	Triggered when dropdown scrolls	Function

Slots

Slot Name	Description	Child Tags
default	Option component list	Option Group / Option
header 2.4.3	Content at top of dropdown list	—
footer 2.4.3	Content at bottom of dropdown list	—
prefix	Select component header content	—
empty	List when there are no options	—
tag 2.5.0	Select component custom tag content	—
loading 2.5.2	Select component custom loading content	—
label 2.7.4	Select component custom label content	—