使用自定义指令directives来实现滚动加载,下面以下拉框滚动加载为例
<template><el-selectv-model="ruleForm.train_set_id"v-loadMore="loadMore"placeholder="请选择"><el-optionv-for="item in dataList":key="item.id":label="item.name":value="item.id"></el-option></el-select>
</template>
<script>
export default {
data() {
return {}
}directives: {loadMore: {bind(el, binding) {let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');select_dom.addEventListener('scroll', function () {let height = this.scrollHeight - this.scrollTop <= this.clientHeight;if (height) {binding.value()}})}},},methods: {loadMore() {if (this.dataAllNum > this.datasetsList.length) {this.dataPage++let headers = { "token": JSON.parse(window.localStorage.getItem('token')) }this.$axios.get(`url`, {params: {page: this.dataPage,page_size: this.dataPageSize,},headers}).then(res => {res.data.data.forEach(item => {this.dataList.push(item)})this.dataAllNum = res.data.query_total})}},}}</script>