后端将接口改为模糊搜索的形式,通过选择器中输入的内容去搜索模糊匹配的数据然后返回;前端使用 elementUI 中el-select的远程搜索 我们可以实现一个Vue的自定义指令,每当使用el-select滚动到列表底部的时候就请求下一页数据,来达到下拉滚动加载更多的目的。 一、el-select 触底分页+远程搜索 触底分页 远程搜索 1.封装...
1.新建js文件,封装自定义指令(判断select下拉是否到底部) selectLoadmore.js exportdefault{ bind(el, binding) { // 获取element-ui定义好的scroll盒子 constDOM= el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') DOM.addEventListener('scroll',function() { /** * scrollHeight 获取元...
设置远程搜索:将 el-select 的remote 属性设置为 true,并传入一个 remote-method 方法,该方法会在输入值变化时调用。 实现分页逻辑:在 remote-method 方法中,根据当前页码和每页大小向服务器请求数据,并更新组件的选项数据。 添加分页组件(可选):虽然 el-select 本身不支持在选项列表下方直接显示分页组件,但你可以...
();});}}},/** * 客户搜索框触发远程搜索 * @params query 客户搜索模糊 参数 * */remoteMethod(query){/** 滚动条还原 */this.$refs.customerRef.$children[1].$children[0].wrap.scrollTop=0;this.$refs.customerRef.$children[1].$children[0].moveY=0;/** 每次输入框内容发生变更---将...
最近遇到一个下拉框选项过多导致页面太卡甚至卡死的问题,搜了一下懒加载以及远程搜索方法,整理了一下: 1、el-select懒加载 el-select选择器里的数据通过后端返回得到,这里返回了将近两万条数据,点开选择器页面就特别卡,所以最好采用懒加载方法,具体使用如下: 控件部
修改select组件属性: filter-method ---> 自定义搜索方法 使用:filter-method="this._.debounce(this.remoteMethod, 1000, false)"//搜索内容的时候进行防抖代替 remote//是否为远程搜索:remote-method="remoteMethod"//远程搜索的方法 该方法好处:编辑回显时,如果当前下拉值在下拉数据中没有,也会显示到下拉列表的...
对于数据量较大的下拉选择,我们可以考虑使用远程搜索和分页加载的方式,以减轻前端的数据负担;对于多级联选择的情况,我们需要注意数据的异步加载和缓存,使得用户体验更加流畅。我们还可以结合组件的生命周期钩子函数和事件监听,实现更加细致的交互逻辑和功能扩展。通过这些最佳实践,我们可以使 el-select-v2 组件在实际项目...
远程搜索 组件提供了远程搜索方式, 也就是按照你输入的结果匹配选项. 下拉懒加载loadMore 下拉懒加载, 当select滚动到底部时, 你再去请求一部分数据, 加入到当前数据中. 某组件中: <template><el-selectv-model="value"placeholder="请选择"filterablemultiplev-el-select-loadmore="loadmore"><el-optionv-for="...
可以通过分页加载或滚动加载的方式来解决这个问题。其次,可以使用缓存来减少重复请求数据的次数。在Vue中,可以使用计算属性(computed)来缓存数据,只有当数据发生变化时才重新计算。 除了从远程服务器获取数据,el-select的懒加载功能还可以用于从本地缓存获取数据。在一些场景下,数据可能已经在页面加载时就被加载到本地...
el-select数据过多处理⽅式 在⽇常项⽬中el-select组件的使⽤频率是⾮常之⾼的. 当数据过多时渲染时间⾮常长, 这⾥提供⼏个处理⽅式.远程搜索 组件提供了远程搜索⽅式, 也就是按照你输⼊的结果匹配选项.下拉懒加载loadMore 下拉懒加载, 当select滚动到底部时, 你再去请求⼀部分数据, 加...