更新记录
1.0.0(2023-07-20)
下载此版本
vue3 elementui el-select的二次封装
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
virtualized-select
虚拟滚动+分页加载下拉选择器
vue3 elementui el-select的二次封装
属性说明
属性名 |
类型 |
默认值 |
说明 |
placeholder |
String |
请选择 |
默认占位符 |
clearable |
Boolean |
false |
展示清空按钮 |
modelValue |
String |
‘’ |
选择的值 |
selectProps |
Object |
{label: 'title',value: 'id'} |
选项别名 |
httpRequest |
Function |
() => {} |
数据函数 |
使用示例
<virtualizedSelect v-model='selectId' style="width: 100px" :httpRequest="httpRequest" :selectProps="{'label': 'name', 'value': 'id'}" placeholder="状态" clearable></virtualizedSelect>
// setup 形式下
import { ref } from 'vue'
import virtualizedSelect from "@/components/virtualized-select/virtualized-select.vue"
const selectId = ref('')
const httpRequest = async (params)=>{
let res = await getinfoList(params) //接口
return {
data: res.value,
total: res.total
}
}
//也可以注册到全局 页面中直接使用不需要import
// main.ts文件
import App from '@/App.vue'
import virtualizedSelect from "@/components/virtualized-select/virtualized-select.vue"
const app = createApp(App)
app.component('virtualizedSelect', virtualizedSelect)
效果图