el-autocomplete支持分页上拉加载

最新推荐文章于 2024-06-05 17:04:13 发布

梅花十三儿

最新推荐文章于 2024-06-05 17:04:13 发布

阅读量1.1k

点赞数

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/Android062005/article/details/128543620

版权

本文详细介绍了如何在Vue.js中使用el-autocomplete组件实现分页上拉加载功能，包括防抖处理、数据缓存、滚动加载指令、分页加载事件以及处理数据展示不稳定问题。通过设置valueKey、自定义插槽和接口拦截来优化用户体验。

摘要由CSDN通过智能技术生成

el-autocomplete使用

效果图

template

<template><el-autocomplete:clearable="true"//支持清空:title="searchStr" // 鼠标移上去提示文案:trigger-on-focus="true" // 聚焦时是否触发下拉列表展示:fetch-suggestions="querySearchAsync"// 筛选符合条件的数据:placeholder="placeholder" // 占位符提示信息v-scrollLoad="load"// 自定义上拉加载指令v-model="searchStr"// 搜索关键字popper-class="diy-autocomplete"// 下拉框自定义class控制样式class="el-autocomplete-component"// 给当前组件定义专属类名size="small" // 组件显示尺寸ref="autocomplete" // 用于后期获取dom元素@select="handleSelect" // 选中时触发事件@blur="handleBlur" // 失去焦点时触发@clear="handleClear" // 清空数据时触发></el-autocomplete>
</template>

实现需求分析

1. `输入框为空时聚焦`或`失焦后又重新聚焦`不会触发请求数据接口

// blurTxt： 记录上次失焦时 和 选中时的筛选字段
// blurArr： 记录上次失焦时 和 选中时已经查询到的数据
async querySearchAsync(queryString, cb) {if (this.blurTxt === queryString || !queryString) {cb(this.blurArr)return}},

2. 缓存上一次已查询的数据&搜索条件：`blurArr`、`blurTxt`

 // 失焦事件handleBlur() {this.blurTxt = this.searchStr || ''this.blurArr = this.$refs['autocomplete'].$data.suggestions},// 过滤数据时及时更新筛选字段async querySearchAsync(queryString, cb) {this.blurTxt = searchVal},

3.滚动加载指令(监听容器的scroll事件并进行防抖处理)

防抖函数

/**
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(func, wait, immediate) {let timeout, args, context, timestamp, resultconst later = function() {// 据上一次触发时间间隔const last = +new Date() - timestamp// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 waitif (last < wait && last > 0) {timeout = setTimeout(later, wait - last)} else {timeout = null// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用if (!immediate) {result = func.apply(context, args)if (!timeout) context = args = null}}}return function(...args) {context = thistimestamp