后端将接口改为分页的、前端将el-select下拉框中的数据改为滚动加载 后端将接口改为模糊搜索的形式,通过选择器中输入的内容去搜索模糊匹配的数据然后返回;前端使用 elementUI 中el-select的远程搜索 我们可以实现一个Vue的自定义指令,每当使用el-select滚动到列表底部的时候就请求下一页数据,来达到下拉滚动加载更多的...
在Element UI中,el-select 组件本身并不直接支持分页加载功能,但可以通过一些方法来实现这一功能。以下是实现 el-select 分页加载数据的几种方法: 1. 使用 el-pagination 结合远程搜索 这种方法结合使用 el-pagination 和el-select 的远程搜索功能。用户可以通过点击分页按钮或输入搜索内容来触发数据的重新加载。 示例...
const remoteMethod = (value: string) => { // 模拟远程接口查询 // 一般远程模糊搜索的接口都带分页,如果数据为10万条,模糊搜索时肯定一次不能查10万条,还是需要正产分页的 setTimeout(() => { options.value = [ { value: "1", label: "张三", }, { value: "2", label: "李四", }, { ...
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 获取元...
* 1. 查询方法自定义(远程搜索也需要自定义): * v-load-more.method="function(){}" * 2. 传入url就可实现无限滚动和远程搜索,要求接口分页参数为“pageSize”和“pageNo”: * v-load-more="{url:'operationSupport_qualification/ColBase/findAllByPage', options: relColIdOp...
但如果一次性查询的数据过多；会导致卡顿。故自己实现一个可分页的远程下拉选择组件，
最近遇到一个下拉框选项过多导致页面太卡甚至卡死的问题,搜了一下懒加载以及远程搜索方法,整理了一下: 1、el-select懒加载 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;/** 每次输入框内容发生变更---将...
el-select自定义指令用于触底加载分页请求options数据(附上完整代码和接口可直接用) 水冗水孚 coding问题描述 某些情况下,下拉框需要做触底加载,发请求,获取option的数据 为了方便复用,笔者封装了一个自定义指令 另外也提供了一个简单的接口,用于演示 我们先看看效果图 效果图 147.gif 思路分析 注意事项一 el-select...
第二种 远程搜索 <template><el-selectv-model="value"multiple filterable remote reserve-keyword placeholder="请输入关键词":remote-method="remoteMethod":loading="loading"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></tem...