前言
大部分情况下使用 el-select 的时候，el-options 中 options 的值都是后端接口给的数据，直接赋值就可以了。但是有的时候数据量比较大，比如几千甚至上万条的时候，如果直接赋值，整个页面的 dom 会被撑爆，不仅请求全量数据接口的时候时间会很久，而且赋值完之后整个页面会非常卡。
解决方案:
- 后端将接口改为分页的、前端将el-select下拉框中的数据改为滚动加载
- 后端将接口改为模糊搜索的形式，通过选择器中输入的内容去搜索模糊匹配的数据然后返回；前端使用 elementUI 中el-select的远程搜索
- 我们可以实现一个Vue的自定义指令，每当使用el-select滚动到列表底部的时候就请求下一页数据，来达到下拉滚动加载更多的目的。
一、el-select 触底分页+远程搜索
触底分页
远程搜索
1.封装触底自定义指令
src目录下创建 select.js，并在main.js中全局引入
代码主要是实现一个el-select下拉加载的自定义指令v-loadmore：
import Vue from 'vue'
export default {}.install = (Vue, options = {}) => {
Vue.directive('loadmore', {
inserted(el, binding) {
// 获取element-ui定义好的scroll盒子
const SELECTDOWN_DOM = el.querySelector(
'.el-select-dropdown .el-select-dropdown__wrap'
)
SELECTDOWN_DOM.addEventListener('scroll', function () {
const CONDITION =
this.scrollHeight - this.scrollTop <= this.clientHeight
if (CONDITION) {
binding.value()
}
})
},
})
}
代码说明：
- document.querySelector：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
- Element.scrollHeight：在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度（只读）
- Element.scrollTop：获取或设置一个元素的内容垂直滚动的像素数。
- Element.clientHeight：读取元素的可见高度（只读）。
- 元素滚动到底，下面等式返回true，没有则返回false。
- 警告： 在使用显示比例缩放的系统上，scrollTop可能会提供一个小数。
2.在 mian.js 引入封装好的自定义指令
在项目中全局注册v-loadmore指令
import loadMore from './plugins/select'
Vue.use(loadMore)
3.在组件中进行使用
最后在组件el-select中使用该指令文章来源：https://www.toymoban.com/news/detail-619275.html
- html部分
<el-form-item label="关联案件:">
<el-select
v-model="searchParams.caseCode"
v-loadmore="handleScroll"
filterable
remote
:remote-method="remoteMethod"
>
<el-option
v-for="item in ajList"
:key="item.caseCode"
:label="item.caseName"
:value="item.caseCode"
>
</el-option>
</el-select>
</el-form-item>
- js部分
export default {
data() {
return {
slectloading: false, //搜索下拉菜单
ajList: [], //案件数据
total: 0, //案件所有总数(接口返回)
dqajtotal: 0, //当前案件总数(每次存储的长度)
}
},
created() {
this.getajnewlist() //获取案件
},
methods: {
handleScroll() {
console.log('触底了')
console.log(this.dqajtotal, this.ajtotal)
if (this.ajList.length < this.ajtotal) {
this.slectloading = true
this.getajnewlist() //获取案件方法
this.slectloading = false
}
},
// 获取案件
getajnewlist() {
this.selectfy.page = this.selectfy.page + 1
console.log('页码', this.selectfy.page)
this.$axios({
url: 'case/list',
method: 'GET',
params: this.selectfy,
}).then((res) => {
if (res.code === 2000 && res.data) {
console.log('获取成功')
this.ajtotal = res.data.total
if (res.data.records && res.data.records.length > 0) {
res.data.records.forEach((ele) => {
var idx = this.ajList.findIndex((item) => {
return item.caseId == ele.caseId
})
if (idx == -1) {
this.ajList.push(ele)
}
})
}
} else {
console.log(res.resultStr)
}
console.log(res)
})
},
// 关联案件下拉菜单远程搜索
remoteMethod(val) {
console.log('远程搜索', val)
if (val && val.length > 0) {
// 有内容
this.slectloading = true
this.$axios({
url: 'case/list',
method: 'GET',
params: {
size: 10,
caseName: val,
},
}).then((res) => {
console.log('远程搜索', res)
this.ajList = res.data.records //案件信息
this.slectloading = false
})
} else {
this.slectloading = true
this.$axios({
url: 'case/list',
method: 'GET',
params: {
size: 10,
},
}).then((res) => {
console.log(res)
console.log('远程搜索', res)
this.ajList = res.data.records //案件信息
this.slectloading = false
})
}
},
},
}
4.注意
- 传入的数组个数必须大于或者等于8个选项时才能让el-select组件出现下拉滚动。
- 列表里不存在滚动时，无法触发传入指令的函数。
未对 el-select 的其他参数做过多支持，如需支持，在不影响已有实例的使用的情况下，请直接修改组件源码增加可选的 prop 参数即可
当然，在项目中遇到某些固定的加载请求时，我们也可以对该组件进行再次封装，具体可以根据自身的业务需求进行修改。
总结
如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨🔧 个人主页 : 前端初见文章来源地址https://www.toymoban.com/news/detail-619275.html
到了这里，关于el-select 触底分页+远程搜索的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
