组件/表单组件

ESelect 选择器

import EUI 1.0

示例与代码

选择器

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: Math.min(640, parent.width) spacing: 16 ESelect { multiple: true clearable: true filterable: true multipleLimit: 3 allowCreate: true textRole: "label" collapseTags: true valueRole: "value" popupFooter: Component { EText { padding: 8 text: qsTr("最多选择三项") } } tagDelegate: Component { ETag { closable: true size: EStyle.Small text: parent.label styleType: EStyle.Success onClosed: parent.remove() } } model: [{label: "Desktop", options: [{label: "Qt", value: "qt"}, {label: "QML", value: "qml"}]}, {label: "Web", options: [{label: "Vue", value: "vue"}, {label: "TypeScript", value: "ts"}]}] } ESelect { remote: true filterable: true textRole: "label" valueRole: "value" remoteMethod: function(query) { return Promise.resolve([{label: "Qt", value: "qt"}, {label: "QML", value: "qml"}, {label: "Vue", value: "vue"}] .filter(function(item) { return item.label.toLowerCase().indexOf(query.toLowerCase()) >= 0 })) } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

选择与清空

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESelect { clearable: true model: ["北京", "上海", "深圳"] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

选择与清空

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESelect { clearable: true model: exampleData.models.ManyOptions }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

allowCreatebool

允许把没有匹配结果的输入创建为新选项。

默认值false

clearablebool

显示清除操作；评分中允许再次点击当前分数清零。

默认值false

collapseTagsbool

折叠过多的已选标签。

默认值false

currentIndexint

当前选中或显示项的索引。

-1：未选择
0 起：条目索引

默认值-1

debounceint

等待、节流或自动关闭时间，单位为毫秒；0 表示不延迟或不启用定时关闭。

默认值300

editablebool

允许编辑输入或同时开启标签页新增和关闭操作。

默认值false

emptyValuesvar

判定为空值的数组；默认包含 undefined、null 和空字符串。

默认值继承 Provider，默认 [undefined, null, ""]

enabledbool

是否允许交互；false 时控件禁用。

默认值true

filterMethodvar

自定义过滤函数；参数和返回值遵循当前组件的过滤调用。

默认值null

filterablebool

是否允许输入关键词过滤。

默认值false

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

indentRolestring

数据对象中用于文字、取值、子节点或缩进的字段名。

默认值""

loadingbool

是否处于加载状态。

默认值false

loadingTextstring

加载状态提示文字。

默认值随当前语言变化

maxCollapseTagsint

折叠标签时直接显示的最大数量。

默认值1

modelvar

选择项数组；对象选项由 textRole、valueRole 指定文字与取值字段，支持 disabled 及 options 分组。

默认值[]

multiplebool

是否允许多选。

默认值false

multipleLimitint

多选数量上限。

0：不限制
正数：限制值

默认值0

noDataTextstring

没有数据时的提示文字。

默认值随当前语言变化

noMatchTextstring

过滤后没有匹配项时的提示文字。

默认值随当前语言变化

optionDelegateComponent

自定义选项的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

placeholderTextstring

空值时显示的占位文字。

默认值随当前语言变化

popupFooterComponent

自定义侧栏底部或弹层头尾的 Component 插槽。 委托上下文见本页示例。

默认值null

popupHeaderComponent

自定义侧栏底部或弹层头尾的 Component 插槽。 委托上下文见本页示例。

默认值null

querystring

当前过滤或搜索关键词。

默认值""

remotebool

使用远程搜索，跳过本地过滤。

默认值false

remoteMethodvar

远程查询函数，接收关键词并返回选项数组或 Promise。

默认值null

reserveKeywordbool

选择选项后保留输入关键词。

默认值true

sizeint

控件尺寸；默认继承最近的 EConfigProvider。

EStyle.Small
EStyle.Medium
EStyle.Large

默认值继承 Provider，默认 EStyle.Medium

tagDelegateComponent

自定义标签项的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

textRolestring

数据对象中用于文字、取值、子节点或缩进的字段名。

默认值""

validateEventbool

值变化时是否向所属表单派发校验请求。

默认值true

validationMessagestring

校验结果说明或外部错误文字。

默认值""

validationStateint

输入校验状态。

EValidationState.None
EValidationState.Success
EValidationState.Warning
EValidationState.Error

默认值EValidationState.None

valuevar

当前值；通过属性绑定读写，数组形式用于多选或范围选择。

默认值undefined

valueKeystring

选项取值字段或对象值的唯一标识字段。

默认值"value"

valueOnClearvar

清除后的值，也可传函数返回清除值；默认继承配置。

默认值继承 Provider，默认 undefined

valueRolestring

数据对象中用于文字、取值、子节点或缩进的字段名。

默认值""

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

advancedbool只读

选择器是否因多选、过滤或自定义委托而使用扩展模式。

默认值由运行时计算

emptybool只读

当前值是否被判定为空。

默认值由运行时计算

groupedbool只读

选择器模型是否包含选项分组。

默认值由运行时计算

hasValidationErrorbool只读

当前校验状态是否为 Error。

默认值由运行时计算

selectedValuesvar只读

选择器多选模式下的已选值数组。

默认值由运行时计算

sourceOptionsvar只读

经过数据规范化处理的建议或选择项列表。

默认值由运行时计算

visibleOptionsvar只读

选择器当前过滤后显示的选项。

默认值由运行时计算

信号

签名作用

cleared()

使用清空操作清除内容后触发。

changed(var value)

所选值变化时触发，value 为新的值。

removedTag(var value)

移除已选标签时触发，value 为被移除的选项值。

searchFailed(string message)

查询候选项失败时触发，message 为失败原因。

方法

签名作用

isSelected(key)

判断指定标识对应的选项是否已选中，返回布尔值。

clear()

清空组件当前内容或选择。

labelFor(key)

获取指定值对应的显示文字。

removeValue(key)

从多选结果中移除 key 对应的值。

requestRemote()

按当前搜索文字重新请求远程选项。

selectValue(key)

按 value 值选择选项。