Vue el-select无限滚动，二次封装el-select实现下拉滚动加载
平时我们做业务需求的时候，可能会遇到非常大量的数据，有时候成百上千条，一般后端都会写一个分页的接口，只要我们请求的时候加上页码参数即可。
但是在使用element-ui的el-select下拉菜单组件中，官方没有提供相应的方法进行多页加载。
这时候我们可以实现一个Vue的自定义指令，每当使用el-select滚动到列表底部的时候就请求下一页数据，来达到下拉滚动加载更多的目的。
实现自定义指令
首先实现一个el-select下拉加载的自定义指令v-loadmore：
// directives.js
import Vue from 'vue'
Vue.directive("loadmore", {
bind(el, binding, vnode) {
const SELECTWRAP = el.querySelector(
".el-select-dropdown .el-select-dropdown__wrap"
);
SELECTWRAP.addEventListener("scroll", function () {
// scrollTop 这里可能因为浏览器缩放存在小数点的情况，导致了滚动到底部时
// scrollHeight 减去滚动到底部时的scrollTop ，依然大于clientHeight 导致无法请求更多数据
// 这里将scrollTop向上取整 保证滚到底部时，触发调用
const CONDITION = this.scrollHeight - Math.ceil(this.scrollTop) <= this.clientHeight;
// el.scrollTop !== 0 当输入时，如果搜索结果很少，以至于没看到滚动条，那么此时的CONDITION计算结果是true，会执行bind.value()，此时不应该执行，否则搜索结果不匹配
if (CONDITION && this.scrollTop !== 0) {
binding.value();
}
});
},
});
代码说明：
document.querySelector：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
Element.scrollHeight：在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度（只读）
警告： 在使用显示比例缩放的系统上，scrollTop可能会提供一个小数。
Element.scrollTop：获取或设置一个元素的内容垂直滚动的像素数。
Element.clientHeight：读取元素的可见高度（只读）。
如果元素滚动到底，下面等式返回true，没有则返回false。
javascript复制代码// scrollTop 这里可能因为浏览器缩放不等于100%时，存在小数点的情况，导致了滚动到底部时
// scrollHeight 减去滚动到底部时的scrollTop ，依然大于clientHeight 导致没有触发加载事件
// 这里将scrollTop向上取整 保证滚到底部时，触发调用
// 此判断不准确： element.scrollHeight - element.scrollTop === element.clientHeight
// 使用下面的判断方式保证任何缩放都能触发：
element.scrollHeight - Math.ceil(element.scrollTop) <= element.clientHeight
在项目中全局注册v-loadmore指令：
javascript复制代码// main.js
import directives from './directive.js'
Vue.use(directives)
最后在组件el-select中使用该指令：
javascript复制代码
<template>
<el-select v-model="selected" v-loadmore="loadMore">
<el-option
v-for="option in options"
:label="option.label"
:value="option.value"
:key="option.value"
></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selected: "",
options: [
{
label: "1",
value: 1
},
// ... 此处省略多个选项
{
label: "到达底部啦",
value: 9
}
]
};
},
methods: {
loadMore() {
console.log("more")
}
}
};
使用效果如下：
从效果图可以看出，每当菜单列表滚动到底部时，指令就会调用传入的loadMore函数，控制台随即打印出 “more”。
注意事项：
传入的数组个数必须大于或者等于8个选项时才能让el-select组件出现下拉滚动。
列表里不存在滚动时，无法触发传入指令的函数。
进行二次封装
滚动到底部调用函数的指令已经实现了，下面只要调用接口，把获取到下一页的数据拼接到当前的数据中即可。
接下来把el-select进行二次封装，封装成公用的组件之后，传入必要的参数就可以在项目中调用。
首先新建一个文件load-select.vue：
javascript复制代码
<template>
<el-select :value="value" v-loadmore="loadMore" @focus="focus" v-bind="$attrs" v-on="$listeners">
<el-option
v-for="option in data"
:label="option[dictLabel]"
:value="option[dictValue]"
:key="option.value"
></el-option>
</el-select>
</template>
<script>
export default {
props: {
value: {
type: String,
default: ""
},
// 列表数据
data: {
type: Array,
default: () => []
},
dictLabel: {
type: String,
default: "label"
},
dictValue: {
type: String,
default: "value"
},
// 调用页数的接口
request: {
type: Function,
default: () => {}
},
page: {
type: [Number, String],
default: 1
}
},
data() {
return {};
},
methods: {
// 请求下一页的数据
loadMore() {
this.request({ page: this.page + 1 })
},
// 选中下拉框没有数据时，自动请求第一页的数据
focus() {
if (!this.data.length) {
this.request({page: 1})
}
}
}
};
</script>
在页面组件中调用load-select.vue：
javascript复制代码
<!-- page.vue -->
<template>
<div class="xxx-page">
<load-select v-model="selected" :data="data" :page="page" :request="getData"></load-select>
</div>
</template>
<script>
// 导入该组件
import loadSelect from "@/components/load-select/index";
export default {
name: "app",
components: {
loadSelect
},
data() {
return {
selected: "",
page: 1,
more: true,
data: []
};
},
methods: {
// 传入给load-select组件的函数
getData({ page = 1 } = {}) {
// 输出页数
console.log(page)
// 访问后端接口API
this.requestAPI({ page }).then(res => {
this.data = [...this.data, ...res.result]
this.page = res.page
});
},
// 模拟后端接口的API
requestAPI({ page = 1, size = 10 } = {}) {
return new Promise(resolve => {
let responseData = []
// 假设总共的数据有50条
let total = 50;
for (let index = 1; index <= size; index++) {
// serial：处于第几个元素，就显示多少序号
let serial = index + (page - 1) * size
if (serial <= 50) {
responseData.push({
label: serial,
value: serial
});
}
}
// 模拟异步请求，500ms之后返回接口的数据
setTimeout(() => {
resolve({
total,
page,
size,
result: responseData
});
}, 500);
});
}
}
};
</script>
代码解析：
首次点击下拉框时，会触发focus事件请求第一页的数据，之后只要每次滚动列表到底部，就会自动请求下一页的数据然后拼接到当前的数组中。
我们来看看效果：
完美！但是在实际使用的过程中，可能会因为接口还来不及返回数据，然后列表又向下滚动再次触发了请求，结果就是返回了两份相同的数据。
现在把接口的延迟调到2000ms重现这个场景：
在两次快速滚动到底部的时候，请求的参数页数都是2，如何解决这个问题？可以在加载函数中加入一个拦截操作，在接口没有响应之前，不调用加载函数，不过这样做要把getData转换成异步函数的形式。
首先在load-select.vue中的loadMore()中加入一个拦截操作：
javascript复制代码
<!-- load-select.vue -->
<template>
...
</template>
<script>
// 请求下一页的数据
methods: {
loadMore() {
// 如果 intercept 属性为 true 则不请求数据
if (this.loadMore.intercept) {
return
}
this.loadMore.intercept = true
this.request({ page: this.page + 1 }).then(() => {
// 接口响应之后才把 intercept 设置为 false
this.loadMore.intercept = false
})
}
}
</script>
然后在page.vue中的getData()函数转换成异步函数的形式：
<template>
...
</template>
<script>
methods: {
// 传入给load-select组件的函数
getData({ page = 1 } = {}) {
// 返回 Promise 对象
return new Promise( resolve => {
// 访问后端接口API
this.requestAPI({ page }).then(res => {
this.data = [...this.data, ...res.result]
this.page = res.page
resolve()
});
})
},
}
</script>
现在问题来了：
一般分页的接口都支持关键字的搜索，load-select.vue组件能不能加入关键字搜索的功能呢？
关键字搜索功能
还好el-select组件支持远程搜索功能，只要传入filterable和remote参数，具体的可以查看element-ui的官方文档。
接下来对load-select.vue进行以下修改：
<!-- load-select.vue -->
<template>
<el-select
:value="value"
v-loadmore="loadMore"
@focus="focus"
filterable
remote
:filter-method="handleSearch"
:loading="loading"
clearable
v-bind="$attrs"
v-on="$listeners"
>
<el-option
v-for="option in data"
:label="option[dictLabel]"
:value="option[dictValue]"
:key="option.value"
></el-option>
<!-- 此处加载中的value可以随便设置，只要不与其他数据重复即可 -->
<el-option v-if="hasMore" disabled label="加载中..." value="-1"></el-option>
</el-select>
</template>
<script>
export default {
props: {
value: {
default: ""
},
// 列表数据
data: {
type: Array,
default: () => []
},
dictLabel: {
type: String,
default: "label"
},
dictValue: {
type: String,
default: "value"
},
// 调用页数的接口
request: {
type: Function,
default: () => {}
},
// 传入的页码
page: {
type: [Number, String],
default: 1
},
// 是否还有更多数据
hasMore: {
type: Boolean,
default: true
}
},
data() {
return {
// 存储关键字用
keyword: "",
loading: false
};
},
methods: {
// 请求下一页的数据
loadMore() {
// 如果没有更多数据，则不请求
if (!this.hasMore) {
return
}
// 如果intercept属性为true则不请求数据，
if (this.loadMore.intercept) {
return
}
this.loadMore.intercept = true;
this.request({
page: this.page + 1,
more: true,
keyword: this.keyword
}).then(() => {
this.loadMore.intercept = false
});
},
// 选中下拉框没有数据时，自动请求第一页的数据
focus() {
if (!this.data.length) {
this.request({ page: 1 })
}
},
// 关键字搜索
handleSearch(keyword) {
this.keyword = keyword
this.loading = true
this.request({ page: 1, keyword }).then(() => {
this.loading = false
});
},
// 删除选中时，如果请求了关键字，则清除关键字再请求第一页的数据
clear() {
if (this.keyword) {
this.keyword = ""
this.request({ page: 1 })
}
}
}
};
</script>
页面调用时，getData()请求函数需要接收keyword和more参数并进行相应的处理：
<!-- page.vue -->
<template>
<div class="xxx-page">
<load-select v-model="selected" :data="data" :page="page" :hasMore="more" :request="getData"></load-select>
</div>
</template>
<script>
// 导入该组件
import loadSelect from "@/components/load-select/index";
export default {
name: "app",
components: {
loadSelect
},
data() {
return {
selected: "",
page: 1,
more: true,
data: []
};
},
methods: {
// 传入给load-select组件的函数
getData({ page = 1, more = false, keyword = "" } = {}) {
return new Promise(resolve => {
// 访问后端接口API
this.requestAPI({ page, keyword }).then(res => {
// 如果是加载更多，则合并之前的数据
if (more) {
this.data = [...this.data, ...res.result]
} else {
this.data = res.result
}
this.page = res.page;
let { total, page, size } = res
// 如果为最后一页，则设置more为false
this.more = page * size < total
this.page = page
resolve()
});
});
},
// 模拟后端接口的API
requestAPI({ page = 1, size = 10, keyword = "" } = {}) {
return new Promise(resolve => {
// 如果有 keyword 参数，则返回带有 keyword 的数据
if (keyword) {
setTimeout(() => {
resolve({
total: 3,
page: 1,
size: 10,
result: [
{
label: keyword,
value: 1
},
{
label: keyword + 1,
value: 2
},
{
label: keyword + 2,
value: 3
}
]
})
}, 500)
return
}
let responseData = [];
// 假设总共的数据有50条
let total = 50;
for (let index = 1; index <= size; index++) {
// serial：处于第几个元素，就显示多少序号
let serial = index + (page - 1) * size
if (serial <= 50) {
responseData.push({
label: serial,
value: serial
});
}
}
setTimeout(() => {
resolve({
total,
page,
size,
result: responseData
})
}, 500)
})
}
}
};
</script>
接下来看看搜索关键字的效果：
搜索功能也完成啦！
总结
为了适用于大部分的请求接口，因此在设计这个组件的时候只能把请求与组件剥离开来，易用程度不算太高，不过我们可以适当地传入一些简单必要的参数去维持基本地使用。
当然，在项目中遇到某些固定的加载请求时，我们也可以对该组件进行再次封装，具体可以根据自身的业务需求进行修改。