大部分情况下使用 el-select 的时候,el-options 中 options 的值都是后端接口给的数据,直接赋值就可以了。但是有的时候数据量比较大,比如几千甚至上万条的时候,如果直接赋值,整个页面的 dom 会被撑爆,不仅请求全量数据接口的时候时间会很久,而且赋值完之后整个页面会非常卡。 解决方案: 后端将接口改为分页的、前...
el-select 远程搜索 触底分页搜索 _岁月流光关注赞赏支持el-select 远程搜索 触底分页搜索 _岁月流光关注IP属地: 北京 2022.08.19 13:10:02字数0阅读1,763 directives: { 'el-select-loadmore': { inserted(el, binding) { const SELECTWRAP_DOM = el.querySelector( '.el-select-dropdown .el-select-drop...
<el-select v-model="form" placeholder="" filterable //表示数据可搜索 :filter-method="dataFilter" //搜索的方法 default-first-option //在输入框按下回车,选择第一个匹配项,配合 filterable使用 v-el-select-loadmore="loadmore" > 方法部分,添加dataFilter方法: /** 下拉框搜索 */ dataFilter(val) {...
基于element-ui的el-select实现的。 已封装成组件,可以实现单选、多选、远程搜索、滚动分页加载数据、数据回显。 效果 微信截图_20210727173019.png 上代码 组件代码: <template><el-selectv-model="selectedValue"v-loadData="loadData"remotefilterable:remote-method="remoteMethod"class="more-select":popper-class=...
el-select数据过多处理方式 在日常项目中el-select组件的使用频率是非常之高的. 当数据过多时渲染时间非常长, 这里提供几个处理方式. 远程搜索 组件提供了远程搜索方式, 也就是按照你输入的结果匹配选项. 下拉懒加载loadMore 下拉懒加载, 当select滚动到底部时, 你再去请求一部分数据, 加入到当前数据中. ...
<el-select v-model="form.tableName"placeholder="请选择表名称"filterable allow-createdefault-first-option clearable v-loadMore="handleScroll"//使用自定义指令,滚动时触发remote//是否为远程搜索:remote-method="remoteMethod"//远程搜索的方法:loading="dataTableLoading"//加入loading@clear="remoteMethod"//清...
在使用 el-select-v2 组件时,我们还需要考虑一些最佳实践和优化方式,以提升组件的性能和用户体验。对于数据量较大的下拉选择,我们可以考虑使用远程搜索和分页加载的方式,以减轻前端的数据负担;对于多级联选择的情况,我们需要注意数据的异步加载和缓存,使得用户体验更加流畅。我们还可以结合组件的生命周期钩子函数和事件监...
在el-select中,可以使用v-model指令将选中的值绑定到Vue实例的数据属性上,从而实现数据的双向绑定。这样,当选择一个选项时,Vue实例的数据属性会自动更新。 在el-select中,可以使用filterable属性来启用搜索功能。当用户输入关键字时,el-select会根据关键字过滤选项,并显示匹配的结果。对于大型数据集,搜索功能也是非常...
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() { ...