el-select自定义指令实现触底加载分页请求options数据(完整代码和接口可直接用)
更新时间：2024年02月23日 15:53:48 作者：当下是吾
某些情况下,下拉框需要做触底加载,发请求,获取option的数据,下面给大家分享el-select自定义指令实现触底加载分页请求options数据(附上完整代码和接口可直接用),感兴趣的朋友参考下吧
问题描述
- 某些情况下，下拉框需要做触底加载，发请求，获取option的数据
- 为了方便复用，笔者封装了一个自定义指令
- 另外也提供了一个简单的接口，用于演示
- 我们先看看效果图
效果图
思路分析
- 为何，不嵌入到
body标签中呢？ - 答曰，更加方便自定义指令管理，如下属性：
<el-select :popper-append-to-body="false" ...- 这样的话，我们可以在自定义指令的钩子中，可以直接使用
el.querySelector(xxx)去选中下拉框的选项弹出层了。就不用使用document.querySelector(xxx) - 因为，若是嵌入到
body层，若是同一个页面，有多个el-select就不太好控制管理了 - 注意下方的两张图，
option选项弹出层
不嵌入到body层
嵌入到body层
注意事项二
写一个模拟分页函数用在express接口中
如下代码+注释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分页请求</title>
</head>
<body>
<script>
function query(pageIndex, pageSize) {
// 定义一个数组用于存放所有的模拟数据
let arr = []
// 循环追加
for (let i = 1; i < 100; i++) {
arr.push({
name: '孙悟空' + i,
age: 500 + i,
id: i
})
}
// 根据第几页，一页多少条来取到对应项
let res = arr.slice(
(pageIndex - 1) * pageSize,
pageIndex * pageSize,
)
// 操作完毕，返回吐出来，供外界使用
return res
}
console.log('第一页，要10条数据：', query(1, 10));
console.log('第二页，要10条数据：', query(2, 10));
</script>
</body>
</html>如下打印结果图：
用在express接口中：
// 模拟分页查询
route.get('/pageData', (req, res) => {
res.header('Access-Control-Allow-Origin', '*'); // 允许跨域
let pageIndex = req.query.pageIndex // 取餐
let pageSize = req.query.pageSize // 取餐
function query(pageIndex, pageSize) {
let arr = []
for (let i = 1; i < 100; i++) {
arr.push({
name: '孙悟空' + i,
age: 500 + i,
id: i
})
}
let res = arr.slice(
(pageIndex - 1) * pageSize,
pageIndex * pageSize,
)
return res
}
res.send(query(pageIndex, pageSize)) // 返回请求结果
})注意事项三
- 注意，要按下以下的方式，进行语法书写
- 这是一种写法规范，因为，事件监听和解绑的句柄是一个整体
// 绑定事件，句柄handle函数，要是一个整体
dom.addEventListener('scroll', handle)
// 移除事件，句柄handle函数，也要对应是一个整体
dom.removeEventListener('scroll', handle)
// 定义一个句柄函数，为debounce套壳子的方式
import { debounce } from "lodash";
const handle = debounce((e) => {
// xxxxxxxx
}, 170)实现思路
首先给el-select添加:popper-append-to-body="false"属性，使其在内部管理，这样的话，在自定义指令中的钩子函数中，可以直接选中操作，获取到el-option滚动的容器
inserted(el, binding, vnode) {
let scrollWrap = el.querySelector('.el-select-dropdown .el-scrollbar .el-select-dropdown__wrap')
}- 然后，给滚动容器绑定监听事件，根据几个高度，判断是否触底（最好预留几个像素）
- 若是触底了，就触发外界传递的触底函数执行，这样的话，就是通知外界继续发请求，继续获取el-option数据
- 当然，这里的自定义指令，要传递一个函数（把函数当做参数传递进来，就是高阶函数的思想）
- 最后，别忘了，解绑事件即可
完整代码-自定义指令
import { debounce } from "lodash";
export default {
inserted(el, binding, vnode) {
// 获取滚动容器dom
let scrollWrap = el.querySelector('.el-select-dropdown .el-scrollbar .el-select-dropdown__wrap')
// 把监听的句柄防抖一下
const handle = debounce((e) => {
let scrollDistance = scrollWrap.scrollHeight - scrollWrap.scrollTop
// 比如此处预留6个像素的位置用于触底
if (scrollWrap.clientHeight + 6 > scrollDistance) {
binding.value() // 触底通知一下，外界
}
}, 170)
// 绑定监听滚动事件
scrollWrap?.addEventListener('scroll', handle)
// 把监听的句柄挂载到元素身上便于解绑时使用
el._hanlde = handle
},
unbind() {
// 获取滚动容器dom
let scrollWrap = el.querySelector('.el-select-dropdown .el-scrollbar .el-select-dropdown__wrap')
// 解绑
scrollWrap?.removeEventListener('scroll', el._hanlde)
// 清空
delete el._hanlde;
}
}完整代码-给el-select使用这个自定义指令
<template>
<div class="box">
<el-select v-model="value" filterable :popper-append-to-body="false" v-down="loadmore" clearable>
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
options: [],
value: '',
pageIndex: 1,
pageSize: 20
};
},
mounted() {
this.getOptions()
},
methods: {
async getOptions() {
// 笔者自己的服务器，给大家提供了一个分页接口
let url = `http://ashuai.work/api/pageData?pageIndex=${this.pageIndex}&pageSize=${this.pageSize}`
let { data } = await axios.get(url)
if (data.length == 0) return this.$message('没数据了')
// 合并一下下拉框数据
this.options = [
...this.options,
...data
]
},
// 触底了，继续发请求
loadmore() {
this.pageIndex = this.pageIndex + 1
this.getOptions()
},
},
};
</script>项目演示和github仓库
- 为了便于大家更直观的看效果
- 笔者把代码推到自己的github上去了
- 并且部署到自己的服务器上了，点击即看
项目演示网站：http://ashuai.work:8888/#/selectDown
项目github地址：https://github.com/shuirongshuifu/elementSrcCodeStudy
若是道友的项目中，还需要做el-select远程搜索，可以参见作者的这篇文章：https://segmentfault.com/a/1190000039097410
到此这篇关于el-select自定义指令实现触底加载分页请求options数据(附上完整代码和接口可直接用)的文章就介绍到这了,更多相关el-select触底分页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue手写实现组件初渲染，在Vue进行文本编译之后，会得到代码字符串生成的render函数，本文会基于render函数展开主题相关内容，感兴趣的朋友可以参考一下2022-08-08
嵌套路由顾名思义就是路由的多层嵌套,这篇文章主要给大家介绍了关于Vue实现路由嵌套的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-11-11
这篇文章主要给大家介绍了关于vue导出excel的两种实现方式,在项目中我们可能会碰到导出Excel文件的需求,文中给出了详细的代码示例,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue解析Json数据获取Json里面的多个id问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要帮助大家简单理解Vue条件渲染，什么是Vue条件渲染,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
小编之前介绍了通过vue.js计算属性，不知道大家都学会了吗。那这篇文章中我们将一起学习vue.js实现绑定class和style样式，有需要的朋友们可以参考借鉴。2016-09-09
最近做项目有用到某个div显示与隐藏内容,所以下面这篇文章主要给大家介绍了关于vue实现点击某个div显示与隐藏内容功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
在这篇文章中，大家会了解到如何在 Vue 组件中使用防抖和节流控制 观察者（watchers）以及事件处理程序，文中的示例代码简洁易懂，希望对大家有所帮助2023-03-03
这篇文章主要介绍了laravel5.3 vue 实现收藏夹功能，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2018-01-01
vue3组合式API中setup()概念和reactive()函数的用法
这篇文章主要介绍了vue3组合式API中setup()概念和reactive()函数的用法,接下来的事件，我将带着你从浅到深分析为什么我们需要学习组合式API以及我们的setup()函数作为入口函数的一个基本的使用方式，需要的朋友可以参考下2023-03-03
最新评论