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: "请选择商品分类",
        clearable: true,
    },
}

多选下拉框

const rule = {
    type: "select",
    field: "tags",
    title: "商品标签",
    value: ["104","105"],
    options: [
        {"value": "104", "label": "热销"},
        {"value": "105", "label": "新品"},
        {"value": "106", "label": "推荐"},
    ],
    props: {
        multiple: true,
        collapseTags: true,
        collapseTagsTooltip: true,
        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: {
        filterable: true,
        placeholder: "请输入或选择商品",
        clearable: true,
    },
}

远程搜索

const rule = {
    type: "select",
    field: "user",
    title: "选择用户",
    props: {
        filterable: true,
        remote: true,
        remoteMethod: async (query) => {
            if (query) {
                // 调用远程搜索接口
                const res = await searchUsers(query);
                return res.data.map(item => ({
                    value: item.id,
                    label: item.name
                }));
            }
            return [];
        },
        placeholder: "请输入用户名搜索",
        loading: false,
    },
}

限制多选数量

const rule = {
    type: "select",
    field: "categories",
    title: "商品分类",
    value: ["104"],
    options: [
        {"value": "104", "label": "生态蔬菜"},
        {"value": "105", "label": "新鲜水果"},
        {"value": "106", "label": "海鲜水产"},
    ],
    props: {
        multiple: true,
        multipleLimit: 3,
        placeholder: "最多选择3个分类",
    },
}

Events 事件示例

监听选择变化和焦点事件

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

选择后联动更新其他字段

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

多选模式下移除标签

const rule = {
    type: "select",
    field: "tags",
    title: "商品标签",
    value: ["1", "2"],
    options: [
        {"value": "1", "label": "热销"},
        {"value": "2", "label": "新品"},
        {"value": "3", "label": "推荐"},
    ],
    props: {
        multiple: true,
        collapseTags: true,
    },
    on: {
        'remove-tag': (value) => {
            console.log('移除标签:', value);
        },
    },
}

Slots 插槽示例

自定义空数据提示

const rule = {
    type: "select",
    field: "category",
    title: "商品分类",
    options: [],
    props: {
        filterable: true,
        placeholder: "请输入搜索",
    },
    children: [
        {
            type: 'div',
            slot: 'empty',
            children: ['暂无数据，请尝试其他关键词']
        }
    ]
}

完整配置项:Element_Select

value :Number | String | Array

Options

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

Props

属性名	说明	类型	Default
multiple	是否多选	`boolean`	false
disabled	是否禁用	`boolean`	false
valueKey	作为 value 唯一标识的键名，绑定值为对象类型时必填	`string`	value
size	输入框尺寸	`enum`	—
clearable	是否可以清空选项	`boolean`	false
collapseTags	多选时是否将选中值按文字的形式展示	`boolean`	false
collapseTagsTooltip	当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。要使用此属性，`collapse-tags`属性必须设定为 true	`boolean`	false
multipleLimit	`multiple` 属性设置为 `true` 时，代表多选场景下用户最多可以选择的项目数，为 0 则不限制	`number`	0
name	Select 输入框的原生 name 属性	`string`	—
effect	tooltip 主题，内置了 `dark` / `light` 两种	`enum` / `string`	light
autocomplete	Select 输入框的原生 autocomplete 属性	`string`	off
placeholder	占位符，默认为“Select”	`string`	—
filterable	Select 组件是否可筛选	`boolean`	false
allowCreate	是否允许用户创建新条目，只有当 `filterable` 设置为 true 时才会生效。	`boolean`	false
filterMethod	自定义筛选方法	`Function`	—
remote	其中的选项是否从服务器远程加载	`boolean`	false
remoteMethod	自定义远程搜索方法	`Function`	—
remoteShowSuffix	远程搜索方法显示后缀图标	`boolean`	false
loading	是否正在从远程获取数据	`boolean`	false
loadingText	从服务器加载数据时显示的文本，默认为“Loading”	`string`	—
noMatchText	搜索条件无匹配时显示的文字，也可以使用 `empty` 插槽设置，默认是 “No matching data'”	`string`	—
noDataText	无选项时显示的文字，也可以使用 `empty` 插槽设置自定义内容，默认是 “No data”	`string`	—
popperClass	选择器下拉菜单的自定义类名	`string`	''
reserveKeyword	当 `multiple` 和 `filterable`被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词	`boolean`	true
defaultFirstOption	是否在输入框按下回车时，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用	`boolean`	false
teleported	是否使用 teleport。设置成 `true`则会被追加到 `append-to` 的位置	`boolean`	true
appendTo	下拉框挂载到哪个 DOM 元素	`CSSSelector` / `HTMLElement`	—
persistent	当下拉选择器未被激活并且`persistent`设置为`false`，选择器会被删除。	`boolean`	true
automaticDropdown	对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单	`boolean`	false
clearIcon	自定义清除图标	`string` / `object`	CircleClose
fitInputWidth	下拉框的宽度是否与输入框相同	`boolean`	false
suffixIcon	自定义后缀图标组件	`string` / `object`	ArrowDown
tagType	标签类型	`enum`	info
tagEffect	标签效果	`enum`	light
validateEvent	是否触发表单验证	`boolean`	true
offset	下拉面板偏移量	`number`	12
showArrow	下拉菜单的内容是否有箭头	`boolean`	true
placement	下拉框出现的位置	`enum`	bottom-start
fallbackPlacements	dropdown 可用的 positions 请查看popper.js 文档	`array`	['bottom-start', 'top-start', 'right', 'left']
maxCollapseTags	需要显示的 Tag 的最大数量只有当 `collapse-tags` 设置为 true 时才会生效。	`number`	1
popperOptions	popper.js 参数	`object`refer to popper.js doc	{}
ariaLabel	等价于原生 input `aria-label` 属性	`string`	—
emptyValues	组件的空值配置参考config-provider	`array`	—
valueOnClear	清空选项的值参考 config-provider	`string` / `number` / `boolean` / `Function`	—
tabindex	input 的 tabindex	`string` / `number`	—

Events

事件名	说明	Type
change	选中值发生变化时触发	`Function`
visible-change	下拉框出现/隐藏时触发	`Function`
remove-tag	多选模式下移除tag时触发	`Function`
clear	可清空的单选模式下用户点击清空按钮时触发	`Function`
blur	当 input 失去焦点时触发	`Function`
focus	当 input 获得焦点时触发	`Function`
popup-scroll 2.9.4	下拉滚动时触发	`Function`

Slots

插槽名	说明	子标签
default	option 组件列表	Option Group / Option
header 2.4.3	下拉列表顶部的内容	—
footer 2.4.3	下拉列表底部的内容	—
prefix	Select 组件头部内容	—
empty	无选项时的列表	—
tag 2.5.0	select 组件自定义标签内容	—
loading 2.5.2	select 组件自定义 loading内容	—
label 2.7.4	select 组件自定义标签内容	—

Select 下拉选择框 ​

规则 ​

基础示例 ​

Props 配置示例 ​

单选下拉框 ​

多选下拉框 ​

可搜索下拉框 ​

远程搜索 ​

限制多选数量 ​

Events 事件示例 ​

监听选择变化和焦点事件 ​

选择后联动更新其他字段 ​

多选模式下移除标签 ​

Slots 插槽示例 ​

自定义空数据提示 ​

Options ​

Props ​

Events ​

Slots ​

Select 下拉选择框

规则

基础示例

Props 配置示例

单选下拉框

多选下拉框

可搜索下拉框

远程搜索

限制多选数量

Events 事件示例

监听选择变化和焦点事件

选择后联动更新其他字段

多选模式下移除标签

Slots 插槽示例

自定义空数据提示

Options

Props

Events

Slots