vue3虚拟滚动+分页加载下拉选择器

虚拟滚动+分页加载下拉选择器

vue3 element-plus 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)