Meri Plus选择器 Select
当选项较多时，使用下拉菜单展示并选择内容。
基础用法
搜索功能
多选下拉
带分组的选择器
带确认的选择器
虚拟列表的选择器
虚拟列表+节点自定义渲染的选择器
可自定义下拉列表宽度
可自定义下拉列表内容
自定义触发器
创建新的选项
创建并选中未包含在初始选项中的条目
点击回车确认。多选的绑定值格式为[{id,name}]形式
API
Attributes
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| modelValue/v-model | string/string[] | -- | ''/[] | 绑定值, 单选是字符串, 多选是字符串数组 |
| options | Item[] | -- | [] | 下拉列表选项数组,如果要设置选项默认值, 则必须设置此选项, item 类型{id:string,name:string,disabled:boolean} |
| valueKey | string | -- | 'id' | 选项唯一标识, 用于匹配选项值, 如设置了 valueKey="value", 则匹配值为 options[i].value 而不是 options[i].id |
| labelKey | string | -- | 'name' | 选项显示的文本, 如设置了 labelKey="name", 则显示为 options[i].name |
| disabled | boolean | -- | false | 禁用整个组件 |
| prefix | string | -- | '' | 前置标签 |
| clearable | boolean | -- | false | 是否可以清空 |
| searchable | boolean | -- | false | 是否可以搜索 |
| panelSearchable | boolean | -- | false | 是否开启下拉面板里的搜索,此属性与 searchable 只能设置一个, 如果同时为 true,则此选项优先生效 |
| panelSearchPlaceholder | string | -- | -- | 下拉框中搜索框的 placeholder 属性, panelSearchable 为 true 时才可设置此属性 |
| autoClearSearch | boolean | -- | true | 失去焦点后自动清空筛选 |
| multiple | boolean | -- | false | 是否多选 |
| multipleLimit | number | -- | 0 | 多选限制数量,0 为不限制, |
| hasConfirm | boolean | -- | false | 当多选时, 是否需要确认取消按钮 |
| mode | string | 'multiple'|'tags' | 'multiple' | 仅开启多选有效,显示模式为标签或者'已选择 XX |
| placeholder | string | -- | '请选择'| '搜索或选择' | |
| placeholderColor | string | -- | --gray-400 | css 中支持颜色值的字符串,例如'red','#333' |
| size | number | string | 'small' | 'medium' | 'large' | 'auto' | "medium" | 设置触发器和下拉框的宽度 |
| maxWidth | number | -- | 360 | 设置触发器中选中值部分的最大宽度, 此属性需配合 size='auto'来使用 |
| menuSize | number | string | 'min'| 'small' | 'medium' | 'large' |'max'| 'auto' | "medium" | 单独设置下拉框的宽度 |
| maxScrollHeight | number | | -- | -- | 设置下拉菜单可滚动区域的最大高度 |
| maxTagCount | number | -- | 0 | 最多显示多少个 ,0 表示不限制, tag 剩余的显示+n |
| maxTagTextLength | number | 0 | 最大显示的 tag 文本长度 | |
| maxTagWidth | number | 0 | 最大 tag 宽度，例子:设置 100,则 tag 最大宽是 100px | |
| level | string | "Left",'Right' | -- | 设定下拉框的弹出方向(仅控制水平方向, 左对齐或者右对齐触发器) |
| virtual | boolean | -- | false | 是否开启虚拟列表 |
| isShowEmpty | boolean | -- | undefined | 自定义显示空插槽 |
| zIndex | number | -- | undefined | 设置下拉弹窗的 z-index 属性 |
| popoverClass | string | -- | -- | 弹出框自定义 class |
| noborder | boolean | -- | false | 设定无边框模式 |
| teleport | string/Ref | -- | body | 将下拉菜单渲染到指定元素, 传值同 teleport 元素的 to 属性 |
| beforeClickItem | (Item,done)=>void | -- | undefined | 选项点击的前置事件,可以阻拦点击事件 |
| tipsTagHandleName | (name,index,items) => any | -- | undefined | 自定义 select 多选 tips 中的 tag 文案 |
| popoverAttrs | PopoverProps | {} | -- | popover组件的属性 属性参考 Popover props |
| clickOutSideIgnore | string/HTMLElement | -- | '' | 设置点击外部区域时要忽略的元素来防止下拉面板收起,可传入选择器字符串或dom |
| hasCheckAll | boolean | -- | true | 是否开启全选复选框 |
| maxMenuWidth | number | -- | 680 | 下拉面板最大宽度 |
| beforeConfirm | (Ids,done)=>void | -- | undefined | 下拉确定按钮的前置事件，Ids为当前已选择节点id数组 |
Events
| 名称 | 回调参数 | 说明 |
|---|---|---|
| change | (value: string| string[]) | 绑定值变化时触发 |
| search | (value: string) | 搜索输入框输入时触发 |
| remove | (value: Item) | tag 的移除事件, 返回被移除的 Item 对象 |
| clear | -- | clear 事件 |
| blur | -- | blur 事件 |
| focus | -- | focus 事件 |
| confirm | value: string[] | 当有确认按钮时, 点击确认按钮事件 |
| cancel | value: string[] | 当有确认取消时, 点击取消按钮事件 |
| hasConfirmChekedChange | value: string[] | 当有确认取消时，选中/取消选中时触发 |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 默认插槽可以自定义下拉面板 |
| prefix | 跟属性 prefix 同名插槽, 自定义前置标题 |
| suffixIcon | 自定义选择框后缀图标 |
| clearIcon | 自定义的多选框清除图标 |
| trigger | 自定义触发器 |
| empty | 当下拉列表为空时显示的内容 |
| panelHeader | 下拉框的 header |
| panelFooter | 下拉框的 footer |
| nodeSlot | 节点插槽 |
Function
| 方法名 | 说明 | 参数 |
|---|---|---|
| focus | 使选择器的输入框获取焦点, 并打开下拉框 | - |
| blur | 使选择器的输入框失去焦点, 并隐藏下拉框 | - |
OptionGroup 子组件
Attributes
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| label | string | -- | '' | 分组的标题 |
| divider | boolean | -- | true | 分组是否加分割线 |
| options | array | -- | [] | 需要将该分组内数据数组传入，若数组长度为空，则该分组不显示 |
Slots
| 插槽名 | 说明 |
|---|---|
| label | 自定义标题 |
Option 子组件
Attributes
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| value | string | -- | '' | 选项的值,一般绑定 id 值 |
| label | string | -- | '' | 选项展示的值, 一般绑定 name |
| html | string | -- | '' | 选项可以渲染 html 字符串, 优先级比 label 高 |
| disabled | boolean | -- | false | 是否禁用该选项 |
SelectCreate Props
Attributes
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| v-model | string | { id: string | number；name: string | number }[] | -- | '' | 选项的值,一般绑定 id 值 |
| searchValue | v-model:searchValue | string | -- | '' | 搜索框的值 |
| clearable | boolean | -- | true | 是否可以清空 |
| disabled | boolean | -- | false | 禁用整个组件 |
| placeholder | string | -- | 请选择 | |
| searchPlaceholder | string | -- | 搜索或添加选项 | |
| panelHeader | boolean | -- | false | 是否再下拉框中搜索 |
| maxHeight | number | -- | 280 | 下拉框高度 |
| popoverAttrs | PopoverProps | -- | {} | popover 组件的属性 属性参考 Popover props |
| multiple | boolean | -- | true | 是否多选 |
| repeat | boolean | -- | false | 是否可以重复选择 |
| disabledDraggable | boolean | -- | false | 是否禁用排序 |
| optionTypeTab | boolean | -- | false | 是否使用 Tab 形式的下拉选项 |
| tabDataAndOptions | object | -- | {} | tab 的 data 属性 |
| tabAttrs | object | -- | {} | tab 组件的属性 |
| autoCreateOption | boolean | -- | true | 自动添加选项 |
| confirmBtnDisabled | boolean | -- | false | 带确认/取消功能，确认按钮禁用 |
SelectCreate 事件
| 名称 | 说明 | 回调参数 |
|---|---|---|
| clear | 点击清空按钮触发事件 | -- |
| input | 搜索框输入触发事件 | 输入框值 |
| change | 选中值改变触发事件 | val，目前的选中值 |
| moveEnd | 移动排序触发事件 | val，移动元素的对象 |
| show | Popover 显示后触发事件 | -- |
| hide | Popover 隐藏后触发事件 | -- |
| createSelect | 创建标签后触发的事件 | val，创建的值 |
| deleteSelect | 删除 tag 的事件 | val，当前删除的值 |