Skip to content

Select 下拉选择框

规则

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

参考:naive-ui_Select

value :Number | String | Array

Options

名称类型说明
classstring自定义一个选项的类名
disabledboolean是否禁用一个选项
labelstring | ((option: SelectOption, selected: boolean) => VNodeChild)选项的标签,注意如果你使用了渲染函数,默认的过滤器将会过滤该选项
render(info: { node: VNode, option: SelectOption, selected: boolean }) => VNodeChild渲染整个选项
stylestring | object自定义一个选项的样式
valuestring | number在选项中应该是唯一的

Props

名称类型默认值说明版本
consistent-menu-widthbooleantrue菜单宽度是否和选择触发器一致,设为 false 会使 virtual-scroll 失效
clearablebooleanfalse是否可清空
clear-filter-after-selectbooleantrue是否在可过滤和多选的情况下选中一个选项后保留当前的搜索关键词2.25.2
disabledbooleanfalse是否禁用
fallback-optionfalse | (value: string | number) => SelectOptionvalue => ({ label: '' + value, value })在传入的选项中没有对应当前值的选项时,这个值应该对应的选项。如果设为 false,不会为找不到对应选项的值生成回退选项也不会显示它,未在选项中的值会被视为不合法,操作过程中会被组件清除掉
filterablebooleanfalse是否可以过滤
filter(pattern: string, option: object) => boolean一个简单的字符串搜索算法过滤器函数
input-propsHTMLInputAttributesundefined触发器中 input 元素的属性,只在可过滤时有意义
loadingbooleanfalse是否为加载状态
max-tag-countnumber | 'responsive'undefined多选标签的最大显示数量,responsive 会将所有标签保持在一行
menu-propsHTMLAttributesundefined菜单的 DOM 属性
multiplebooleanfalse是否为多选
optionsArray<SelectOption | SelectGroupOption>[]配置选项内容,详情见 SelectOption Properties
placeholderstring'请选择'提示信息
placement'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start'菜单的弹出位置2.25.0
remotebooleanfalse是否要异步获取选项。注意如果设定了,那么 filtertag 都不会对 options 生效。这个时候你在全权控制 options
render-label(option: SelectOption | SelectGroupOption, selected: boolean) => VNodeChildundefined选项标签渲染函数
render-option(info: { node: VNode, option: SelectOption | SelectGroupOption, selected: boolean }) => VNodeChildundefined选项的渲染函数
render-tag(props: { option: SelectBaseOption, handleClose: () => void }) => VNodeChildundefined控制标签的渲染
reset-menu-on-options-changebooleantrue是否在选项变化时重置菜单状态,例如滚动状态2.24.2
showbooleanundefined是否展示菜单
show-arrowbooleantrue是否展示箭头
size'small' | 'medium' | 'large''medium'组件尺寸
tagbooleanfalse是否可以创建新的选项,需要和 filterable 一起使用
virtual-scrollbooleantrue是否启用虚拟滚动
on-blur() => voidundefinedblur 时执行的回调
on-clear() => voidundefinedclear 时执行的回调
on-create(label: string) => SelectOptionlabel => ({ label, value: label })在输入内容时如何创建一个选项。注意 filter 对这个生成的选项同样会生效。同时确保这个选项和其他选项的 value 不要有重复
on-focus() => voidundefinedfocus 时执行的回调
on-scroll(e: ScrollEvent) => voidundefined滚动时执行的回调
on-search(value: string) => voidundefined搜索时执行的回调
on-update:show(show: boolean) => voidundefined菜单打开状态变化的回调2.24.2
on-update:value(value: Array | string | number | null, option: SelectBaseOption | null | SelectBaseOption[]) => voidundefined值更新时执行的回调