<template>
<el-select
v-model="state.input"
:loading="loading"
loading-text="数据加载中..."
filterable
clearable
popper-class="event-select-poper"
v-el-select-loadmore="loadmore"
placeholder="请输入属性值"
style="width: 100%"
:filter-method="filterOptions"
@change="handleEventsChange"
@visible-change="handleVisibleChange">
<el-option
v-for="item in dataList"
:key="item.id"
:label="item.name"
:value="item.name">
</el-option>
<div style="margin:10 auto; text-align: center; color:#ccc">----已到底----</div>
</el-select>
</template>
<script setup>
import { ref, nextTick } from 'vue';
import axios from 'axios';
const emits = defineEmits('change')
const dataList = ref(\[\]); //渲染数据数组
let loading = ref(false)
const state = ref({input: '', val: ''});
const pageIndex = ref(1);
const scrollpSize = ref(10);
const scrollPages = ref(1);
// 自定义v-el-select-loadmore指令
const vElSelectLoadmore = {
beforeMount(el, binding) {
/**
* vue2时：
* el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
* vue3时：
* 在el-select给一个参数popper-class="event-select-poper"
* element-plus中el-select的选项是使用的popper.js生成的，无法直接获取
*/
const selectDom = document.querySelector('.event-select-poper .el-select-dropdown__wrap')
let loadMores = function() {
/**
* scrollHeight 获取元素内容高度(只读)
* scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
* clientHeight 读取元素的可见高度(只读)
* 如果元素滚动到底, 下面等式返回true, 没有则返回false:
* ele.scrollHeight - ele.scrollTop === ele.clientHeight;
*/
// 判断是否到底
const isBase = this.scrollHeight - this.scrollTop <= this.clientHeight + 20
if (isBase) {
// 增加防抖
binding.value && binding.value()
}
}
// 将获取到的dom和函数挂载到el-select上，实例销毁时好处理
el.selectDomInfo = selectDom
el.selectLoadMore = loadMores
// 监听滚动事件
selectDom?.addEventListener('scroll', loadMores.bind(selectDom))
},
// 实例销毁
beforeUnmount(el) {
if (el.selectLoadMore) {
el.selectDomInfo.removeEventListener('scroll', el.selectLoadMore)
delete el.selectDomInfo
delete el.selectLoadMore
}
}
}
// onBeforeMount(async () => {
// await loadEvents()
// })
loadEvents();
// 模拟懒加载
const loadmore = () => {
// 数据加载完成之后，不需要再执行懒加载
if (pageIndex.value >= scrollPages.value) { return }
pageIndex.value++
nextTick(() => {
loading.value = true
getList();
loading.value = false
})
}
function getList() {
axios({
method: 'post',
url: 'https://xxx.xx.x.xxx/dataSource/list',
data: { name : state.value.val, pageIndex: pageIndex.value, pageSize: scrollpSize.value },
headers: {'Content-Type': 'application/json;charset=UTF-8'}
}).then(res => {
let resdata = res.data && res.data.data || res.data;
let respage = res.page || (res.data && res.data.page);
for (let index = 0; index < resdata.length; index++) {
dataList.value.push({ name:resdataindex.name, id:resdataindex.id });
}
scrollPages.value = respage.totalPage;
pageIndex.value = respage.pageIndex;
});
}
// 自定义过滤函数
const filterOptions = (query = '') => {
pageIndex.value = 1
nextTick(async () => {
dataList.value = \[\];
state.value.val = query;
getList();
})
}
// 下拉框隐藏时，重置分页已经过滤得到的列表
const handleVisibleChange = (visible) => {
if(!visible){
pageIndex.value = 1;
}
}
// 获取事件列表
function loadEvents () {
loading.value = true;
getList();
// 调用接口
loading.value = false;
}
const handleEventsChange = (val) => {
console.log(val);
emits('change', val)
}
</script>