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: {
        mode: "multiple",
        placeholder: "请选择标签",
        maxTagCount: 2,
    },
}

可搜索下拉框

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: {
        showSearch: true,
        placeholder: "请输入或选择商品",
        allowClear: true,
        filterOption: (input, option) => {
            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        },
    },
}

远程搜索

const rule = {
    type: "select",
    field: "user",
    title: "选择用户",
    options: [],
    props: {
        showSearch: true,
        placeholder: "请输入用户名搜索",
        allowClear: true,
        filterOption: false,
        onSearch: async (value) => {
            if (value) {
                // 调用远程搜索接口
                const res = await searchUsers(value);
                // 更新选项
                // 需要通过其他方式更新 options
            }
        },
    },
}

Events 事件示例

监听选择变化

const rule = {
    type: "select",
    field: "category",
    title: "商品分类",
    options: [
        {"value": "104", "label": "生态蔬菜"},
        {"value": "105", "label": "新鲜水果"},
    ],
    props: {
        placeholder: "请选择分类",
        allowClear: true,
    },
    on: {
        change: (value) => {
            console.log('选择值改变:', value);
        },
        blur: () => {
            console.log('失去焦点');
        },
        focus: () => {
            console.log('获得焦点');
        },
    },
}

选择后联动更新其他字段

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,
        },
    },
]

参考:Ant-design-vue_Select

value :Number | String | Array

Options

字段名	说明	字段类型	是否必填	默认值
value	参数值	String,Number	true	-
label	字段别名	String	true	-
disabled	设置为禁用状态	Boolean	false	false

Props

参数	说明	类型	默认值
allowClear	支持清除	boolean	false
autoClearSearchValue	是否在选中项后清空搜索框，只在 mode 为 multiple 或 tags 时有效。	boolean	true
autofocus	默认获取焦点	boolean	false
bordered	是否有边框	boolean	true
clearIcon	自定义的多选框清空图标	VNode | slot	-
defaultActiveFirstOption	是否默认高亮第一个选项。	boolean	true
defaultOpen	是否默认展开下拉菜单	boolean	-
disabled	是否禁用	boolean	false
popupClassName	下拉菜单的 className 属性	string	-
dropdownMatchSelectWidth	下拉菜单和选择器同宽。默认将设置 min-width，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动	boolean | number	true
dropdownMenuStyle	dropdown 菜单自定义样式	object	-
dropdownRender	自定义下拉框内容	({menuNode: VNode, props}) => VNode | v-slot	-
dropdownStyle	下拉菜单的 style 属性	object	-
fieldNames	自定义节点 label、value、options 的字段	object	{ label: label, value: value, options: options }
filterOption	是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。	boolean	function(inputValue, option)
filterSort	搜索时对筛选结果项的排序函数, 类似Array.sort里的 compareFunction	(optionA: Option, optionB: Option) => number	-
firstActiveValue	默认高亮的选项	string | string[]	-
getPopupContainer	菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。	function(triggerNode)	() => document.body
labelInValue	是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 {key: string, label: vNodes, originLabel: any} 的格式, originLabel（3.1） 保持原始类型，如果通过 a-select-option children 构造的节点，该值是是个函数（即 a-select-option 的默认插槽）	boolean	false
listHeight	设置弹窗滚动高度	number	256
maxTagCount	最多显示多少个 tag	number	-
maxTagPlaceholder	隐藏 tag 时显示的内容	slot | function(omittedValues)	-
maxTagTextLength	最大显示的 tag 文本长度	number	-
menuItemSelectedIcon	自定义当前选中的条目图标	VNode | slot	-
mode	设置 Select 的模式为多选或标签	'multiple' | 'tags' | 'combobox'	-
notFoundContent	当下拉列表为空时显示的内容	string|slot	Not Found
open	是否展开下拉菜单	boolean	-
option	通过 option 插槽，自定义节点	v-slot:option="{value, label, [disabled, key, title]}"	-
optionFilterProp	搜索时过滤对应的 option 属性，不支持 children	string	value
optionLabelProp	回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 value。	string	children
options	options 数据，如果设置则不需要手动构造 selectOption 节点	Array<{value, label, [disabled, key, title]}>	[]
placeholder	选择框默认文字	string|slot	-
placement	选择框弹出的位置	bottomLeft bottomRight topLeft topRight	bottomLeft
removeIcon	自定义的多选框清除图标	VNode | slot	-
searchValue	控制搜索文本	string	-
showArrow	是否显示下拉小箭头	boolean	单选为 true,多选为 false
showSearch	配置是否可搜索	boolean	单选为 false,多选为 true
size	选择框大小，可选 large small	string	default
status	设置校验状态	'error' | 'warning'	-
suffixIcon	自定义的选择框后缀图标	VNode | slot	-
tagRender	自定义 tag 内容 render，仅在 mode 为 multiple 或 tags 时生效	slot | (props) => any	-
tokenSeparators	自动分词的分隔符，仅在 mode="tags" 时生效	string[]	-
virtual	设置 false 时关闭虚拟滚动	boolean	true

Events

事件名称	说明	回调参数
blur	失去焦点的时回调	function
change	选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数	function(value, option:Option | Array<Option>)
deselect	取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效	function(value，option:Option)
dropdownVisibleChange	展开下拉菜单的回调	function(open)
focus	获得焦点时回调	function
inputKeyDown	键盘按下时回调	function
mouseenter	鼠标移入时回调	function
mouseleave	鼠标移出时回调	function
popupScroll	下拉列表滚动时的回调	function
search	文本框值变化时回调	function(value: string)
select	被选中时调用，参数为选中项的 value (或 key) 值	function(value, option:Option)