后端将接口改为分页的、前端将el-select下拉框中的数据改为滚动加载 后端将接口改为模糊搜索的形式,通过选择器中输入的内容去搜索模糊匹配的数据然后返回;前端使用 elementUI 中el-select的远程搜索 我们可以实现一个Vue的自定义指令,每当使用el-select滚动到列表底部的时候就请求下一页数据,来达到下拉滚动加载更多的...
value(); }); } } }, /** * 客户搜索框触发远程搜索 * @params query 客户搜索模糊 参数 * */ remoteMethod(query) { /** 滚动条还原 */ this.$refs.customerRef.$children[1].$children[0].wrap.scrollTop = 0; this.$refs.customerRef.$children[1].$children[0].moveY = 0; /** 每次...
placeholder="" filterable //表示数据可搜索 :filter-method="dataFilter" //搜索的方法 default-first-option //在输入框按下回车,选择第一个匹配项,配合 filterable使用 v-el-select-loadmore="loadmore" > 方法部分,添加dataFilter方法: /** 下拉框搜索 */ dataFilter(val) { if (val) { //val存在 th...
远程搜索 组件提供了远程搜索方式, 也就是按照你输入的结果匹配选项. 下拉懒加载loadMore 下拉懒加载, 当select滚动到底部时, 你再去请求一部分数据, 加入到当前数据中. 某组件中: <template> <el-select v-model="value" placeholder="请选择" filterable ...
修改select组件属性: filter-method ---> 自定义搜索方法 使用:filter-method="this._.debounce(this.remoteMethod, 1000, false)"//搜索内容的时候进行防抖代替 remote//是否为远程搜索:remote-method="remoteMethod"//远程搜索的方法 该方法好处:编辑回显时,如果当前下拉值在下拉数据中没有,也会显示到下拉列表的...
对于数据量较大的下拉选择,我们可以考虑使用远程搜索和分页加载的方式,以减轻前端的数据负担;对于多级联选择的情况,我们需要注意数据的异步加载和缓存,使得用户体验更加流畅。我们还可以结合组件的生命周期钩子函数和事件监听,实现更加细致的交互逻辑和功能扩展。通过这些最佳实践,我们可以使 el-select-v2 组件在实际项目...
可以通过分页加载或滚动加载的方式来解决这个问题。其次,可以使用缓存来减少重复请求数据的次数。在Vue中,可以使用计算属性(computed)来缓存数据,只有当数据发生变化时才重新计算。 除了从远程服务器获取数据,el-select的懒加载功能还可以用于从本地缓存获取数据。在一些场景下,数据可能已经在页面加载时就被加载到本地...
el-select组件分页加载+远程搜索 1.新建js文件,封装自定义指令(判断select下拉是否到底部) selectLoadmore.js exportdefault{ bind(el, binding) { // 获取element-ui定义好的scroll盒子 constDOM= el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')...
el-select 组件 懒加载 可远程搜索 用于分页数据的懒加载 vue+elment 新建elSelct.vue 组件 <template> <div> <el-select v-el-select-loadmore="loadMore" :value="defaultValue" :loading="loading" :multiple="multiple" :placeholder="placeholder" :allow-create="allowCreate" filterable remote clearable...