vue3 el-select懒加载以及自定义指令

<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>

</el-select>

</template>

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:resdata[index].name, id:resdata[index].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>