在开发一个练手项目的时候,需要一个远程搜索的下拉选择组件; elementui自带的el-select支持远程搜索;但如果一次性查询的数据过多;会导致卡顿。故自己实现一个可分页的远程下拉选择组件, 效果: 代码: vue2版本 <template> <el-select v-model="selectedValue" filterable remote reserve-keyword placeholder="请输入...
下拉框分页的需求通常源于数据量过大,导致一次性加载所有数据会造成性能问题或用户体验不佳。因此,我们需要通过分页的方式,按需加载数据。 2. 实现下拉框数据动态加载 为了实现数据的动态加载,你可以使用ElementUI的el-select组件的remote和remote-method属性。这些属性允许你定义一个远程搜索的方法,该方法会在用户输入时...
* searchField:(非必传)远程搜索用的字段,不传则不能实现远程搜索; * 要求接口支持和el-select开启搜索(filterable,并重置自定义搜索方法(:filter-method="()=>{}")) */Vue.directive('loadMore',{bind(el,binding){// 如果有method由调用方实现,没有则在这里实现加载和远程搜索的功能if(bin...
第一种方法:添加分页,页面样式如下,JS逻辑与平常分页没区别 <el-select:disabled="noChange[index]==true || applyDataItem.processKey == 'componentFastAdd'"style="width:68%"v-model="chooseUser[index]"clearable filterable placeholder="请选择人员"><divclass="option"><el-optionv-for="user in allU...
分页组件的代码是从网上拼凑的,代码如下: <template> <el-select v-model="childSelectedValue" :filterable="remote" multiple :loading="loading" :remote="remote" :size="size" :remote-method="remoteMethod" :clearable="clearable" @change="handleChange" @clear="handleClear" @focus="handleFocus" :sty...
* el-select加载事件(可用于做select的无限滚动) * 使用方法(两种方法,推荐第2种): * 1. 查询方法自定义(远程搜索也需要自定义): * v-load-more.method="function(){}" * 2. 传入url就可实现无限滚动和远程搜索,要求接口分页参数为“pageSize”和“pageNo”: ...
基于element-ui的el-select实现的。 已封装成组件,可以实现单选、多选、远程搜索、滚动分页加载数据、数据回显。 效果 微信截图_20210727173019.png 上代码 组件代码: <template> <el-select v-model="selectedValue" v-loadData="loadData" remote filterable :remote-method="remoteMethod" class="more-select" :...
使用Element-UI的下拉框功能,实现远程搜索和懒加载功能。 结果演示视频 el-select下拉远程搜索+懒加载 实现内容 下拉内容是懒加载的,滚动到底调用接口获取数据,分页每次默认加载10条 可以从远程模糊搜索 代码主要逻辑 HTML代码 可以远程搜索:增加remote属性、remote-method自定义远程搜索方法 ...
elementUI的select下拉框组件实现分页加载数据第⼀种⽅法：添加分页，页⾯样式如下，JS逻辑与平常分页没区别 <el-select :disabled="noChange[index]==true || applyDataItem.processKey == 'componentFastAdd'"style="width:68%"v-model="chooseUser[index]"clearable filterable placeholder="请选择⼈员">...
效果如下下拉选中之后可以配置Tag形式展现 支持远程搜索 支持分页 使用方法配置如下<remote-selectlabel-key="cname"v-model.number="form.cid":initv="form.cid"@change="changeaname2"showtag="true"tagtype="success":initlabel="form.cname" url="...