lc-vue-biz-select
基于Select V2 虚拟列表选择器的数据选择器，不同点是此组件的数据是通过方法获取，而不是直接通过options数据传入，同时此方法也可做为remoteMethod使用
安装
npm i lc-vue-biz-select
依赖
- vue@3.x
- element-plus@2.x
- lodash
Demo
基本使用
<script setup>
import {BizSelect} from 'lc-vue-biz-select'
import {ref} from 'vue'
const value1 = ref();
const fetchData = async ()=>{
return [{
label:'aaa',
value:1
}, {
label:'bbb',
value:2
}]
}
</script>
<template>
<el-card>
<biz-select :fetchData='fetchData' v-model='value1'/>
</el-card>
</template>Api
Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| fetchData | 获取下拉选择数据 | (query?:string)=>Promise<{value: number | string, label:string}[]> |
| modelValue/v-model | 选中值 | 多选：string[] | number[] ; 单选：string | number | - |
| placeholder | placeholder | string | 请选择 |
| multiple | 是否多选 | boolean | false |
| filterable | 是否可过滤 | boolean | false |
| oneLine | 是否只显示一行，针对多选场景 | boolean | false |
| disabled | 是否不可用 | boolean | false |
| value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | value |
| size | 输入框尺寸 | string large/default/small | default |
| clearable | 是否可以清空选项 | boolean | false |
| multiple-limit | 多选时用户最多可以选择的项目数， 为 0 则不限制 | number | 0 |
| name | Select 输入框的原生 name 属性 | string | — |
| effect | Tooltip 主题，内置了 dark / light 两种 | string | light |
| autocomplete | 自动完成选择输入 | string | off |
| placeholder | select input的原生autocomplete属性 | string | Please select |
| filterable | 是否可筛选 | boolean | false |
| allow-create | 是否允许用户创建新条目， 只有当 filterable 设置为 true 时才会生效。 | boolean | false |
| reserve-keyword | 筛选时，是否在选择选项后保留关键字 | boolean | true |
| no-data-text | 选项为空时显示的文本，也可以使用 empty 插槽自定义内容 | string | No Data |
| popper-class | 选择器下拉菜单的自定义类名 | string | — |
| teleported | 该下拉菜单是否使用teleport插入body元素 | boolean true / false | true |
| persistent | 当下拉选择器未被激活并且persistent设置为false，选择器会被删除。 | boolean true / false | true |
| popper-options | 自定义 popper 选项，更多请参考 popper.js | object | - |
| automatic-dropdown | 对于不可过滤的 Select 组件，此属性决定是否在输入框获得焦点后自动弹出选项菜单 | boolean | false |
| height | 下拉菜单的高度，每一个子选项的高度是 34px | number | 170 |
| scrollbar-always-on | 是否总是展示滚动条 | boolean | false |
| remote 是否从服务器搜索数据 | boolean | false | |
| validate-event | 输入时是否触发表单的校验 | boolean | true |
| placement | 下拉框出现的位置 | string top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom-start |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| update:modelValue | 选中值变化 | 多选：string[] | number[] ; 单选：string | number |
| update:label | 选中文案变化 | string |
| change | 选中值发生变化时触发 | val，目前的选中值 |
| visible-change | 下拉框出现/隐藏时触发 | val，出现则为 true，隐藏则为 false |
| remove-tag | 多选模式下移除tag时触发 | val，移除的tag值 |
| clear | 可清空的单选模式下用户点击清空按钮时触发 | — |
| blur | 当选择器的输入框失去焦点时触发 | (event: FocusEvent) |
| focus | 当选择器的输入框获得焦点时触发 | (event: FocusEvent) |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义 Option 模板 |
| empty | 自定义当选项为空时的内容 |
| prefix | 输入框的前缀 |