Select 下拉选择框

规则

基础示例

const rule = {
    type: "select",
    field: "cate_id",
    title: "产品分类",
    value: ["104","105"],
    options: [
        {"value": "104", "label": "生态蔬菜", "disabled": false},
        {"value": "105", "label": "新鲜水果", "disabled": false},
     ],
    props: {
        multiple: true
    },
}

Props 配置示例

单选下拉框

const rule = {
    type: "select",
    field: "category",
    title: "商品分类",
    value: "104",
    options: [
        {"value": "104", "label": "生态蔬菜"},
        {"value": "105", "label": "新鲜水果"},
        {"value": "106", "label": "海鲜水产"},
    ],
    props: {
        placeholder: "请选择商品分类",
        allowClear: true,
    },
}

多选下拉框

const rule = {
    type: "select",
    field: "tags",
    title: "商品标签",
    value: ["104","105"],
    options: [
        {"value": "104", "label": "热销"},
        {"value": "105", "label": "新品"},
        {"value": "106", "label": "推荐"},
    ],
    props: {
        multiple: true,
        maxTagCount: 2,
        placeholder: "请选择标签",
    },
}

可搜索下拉框

const rule = {
    type: "select",
    field: "product",
    title: "商品名称",
    options: [
        {"value": "1", "label": "iPhone 15 Pro"},
        {"value": "2", "label": "MacBook Pro"},
        {"value": "3", "label": "iPad Air"},
    ],
    props: {
        allowSearch: true,
        placeholder: "请输入或选择商品",
        allowClear: true,
    },
}

远程搜索

const rule = {
    type: "select",
    field: "user",
    title: "选择用户",
    options: [],
    props: {
        allowSearch: true,
        placeholder: "请输入用户名搜索",
        allowClear: true,
        loading: false,
    },
    inject: true,
    on: {
        search: ($inject, value) => {
            if (value) {
                // 调用远程搜索接口
                searchUsers(value).then(res => {
                    // 更新选项
                    $inject.api.updateRule('user', {
                        options: res.data.map(item => ({
                            value: item.id,
                            label: item.name
                        }))
                    });
                });
            }
        },
    },
}

Events 事件示例

监听选择变化

const rule = {
    type: "select",
    field: "category",
    title: "商品分类",
    options: [
        {"value": "104", "label": "生态蔬菜"},
        {"value": "105", "label": "新鲜水果"},
    ],
    props: {
        placeholder: "请选择分类",
        allowClear: true,
    },
    on: {
        change: (value, option) => {
            console.log('选择值改变:', value, option);
        },
        clear: () => {
            console.log('清空选择');
        },
        search: (value) => {
            console.log('搜索值:', value);
        },
    },
}

选择后联动更新其他字段

const rule = [
    {
        type: "select",
        field: "category",
        title: "商品分类",
        options: [
            {"value": "1", "label": "电子产品"},
            {"value": "2", "label": "服装配饰"},
        ],
        props: {
            placeholder: "请选择分类",
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 根据分类加载对应的子分类
                if (value === "1") {
                    $inject.api.updateRule('subcategory', {
                        options: [
                            {"value": "11", "label": "手机"},
                            {"value": "12", "label": "电脑"},
                        ]
                    });
                } else if (value === "2") {
                    $inject.api.updateRule('subcategory', {
                        options: [
                            {"value": "21", "label": "男装"},
                            {"value": "22", "label": "女装"},
                        ]
                    });
                }
            },
        },
    },
    {
        type: "select",
        field: "subcategory",
        title: "子分类",
        options: [],
        props: {
            placeholder: "请先选择分类",
            disabled: true,
        },
    },
]

完整配置项:arco-design_Select

value :Number | String | Array

Options

参数名	描述	类型	默认值
value	选项值	OptionValue	-
label	选项内容	string	-
disabled	是否禁用	boolean	false
tagProps	选项对应的多选标签的属性	any	-
render	自定义渲染	RenderFunction	-

Props

参数名	描述	类型	默认值	版本
multiple	是否开启多选模式（多选模式默认开启搜索）	boolean	false
size	选择框的大小	'mini' | 'small' | 'medium' | 'large'	'medium'
placeholder	占位符	string	-
loading	是否为加载中状态	boolean	false
disabled	是否禁用	boolean	false
error	是否为错误状态	boolean	false
allow-clear	是否允许清空	boolean	false
allow-search	是否允许搜索	boolean | { retainInputValue?: boolean }	`false (single)	true (multiple)`
allow-create	是否允许创建	boolean	false
max-tag-count	多选模式下，最多显示的标签数量。0 表示不限制	number	0
popup-container	弹出框的挂载容器	string | HTMLElement	-
bordered	是否显示输入框的边框	boolean	true
popup-visible	是否显示下拉菜单	boolean	-
default-popup-visible	弹出框默认是否可见（非受控模式）	boolean	false
unmount-on-close	是否在下拉菜单关闭时销毁元素	boolean	false
filter-option	是否过滤选项	boolean | ((inputValue: string, optionInfo: OptionInfo) => boolean)	true
options	选项数据	Option[]	[]
virtual-list-props	传递虚拟列表属性，传入此参数以开启虚拟滚动 VirtualListProps	VirtualListProps	-
trigger-props	下拉菜单的触发器属性	TriggerProps	-
format-label	格式化显示内容	(data: OptionInfo) => string	-
fallback-option	自定义值中不存在的选项	boolean| ((value: string | number | Record<string, unknown>) => OptionData) | false	2.10.0
show-extra-options	是否在下拉菜单中显示额外选项	boolean	true	2.10.0
value-key	用于确定选项键值得属性名	string	'value'	2.18.0

Events

事件名	描述	参数
change	值发生改变时触发	-
input-value-change	输入框的值发生改变时触发	-
popup-visible-change	下拉框的显示状态改变时触发	-
clear	点击清除按钮时触发	-
remove	点击标签的删除按钮时触发	-
search	用户搜索时触发	-
dropdown-scroll	下拉菜单发生滚动时触发	-
dropdown-reach-bottom	下拉菜单滚动到底部时触发	-