el-select懒加载

近期开发的项目进行压力测试，结果发现系统变得越来越卡，点击发现后台的响应时间并不慢，大部分都在200ms以内，table已经全部进行分页处理，排除el-table数据量过大导致页面变卡,那最后只有el-select了，屏蔽之后果然流畅了，下面记录一下el-select的使用过程记录

el-select

当数据量很大的时候，我们不能仅仅能依赖懒加载，还应当配合检索，即通过label值进行模糊匹配。

实现懒加载的前提条件

1、自定义v-loadmore指令并在main.js中引入

新建directive.js

import Vue from "vue";
let MyPlugin = {};
// 定义全局指令
export default MyPlugin.install = function(vue, options) {console.log(vue);console.log(options);// loadmore 是定义的指令 名称 ， 使用时 用 v-loadmore = "dosomethingFun or data"Vue.directive("loadmore", {// bind只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置bind(el, binding) {// 获取element-ui定义好的scroll盒子  Select 选择器的下拉盒子const SELECTWRAP_DOM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");SELECTWRAP_DOM.addEventListener("scroll", function() {// 判断滚动到底部const CONDITION =this.scrollHeight - this.scrollTop <= this.clientHeight;if (CONDITION) {// binding.value 是指令的绑定值，该值可能是字符串，数字、函数// binding.value() 表示执行 v-loadmore 绑定的函数binding.value();}});}});
};

main.js

// 引用创建好的指令
import directives from "@/utils/directive";
// 全局注册指令
Vue.use(directives);

新增

新增的时候只需要v-loadmore配合filterable就行了，在loadMore方法中，每次出发页码+1就可以，也就是说下拉里面的数据请求方法要后台写成列表那样，每次出发loadMore当前页码+1就能获取到下一页的数据，然后将新请求到的数据追加到之前的数组，不得清除之前的数据。

<el-select:placeholder="item.placeholder"v-model="queryForm[item.prop]"remotefilterableclearablev-loadmore="loadMore"><el-optionv-for="item in item.options":key="item.key":label="item.label":value="item.value"></el-option></el-select>

编辑

如果这种懒加载在编辑的时候就会比较麻烦，因为我们需要匹配上需要编辑的这一条的label，但是我们又不能保证，需要编辑的这条数据的key对应的数据一定在第一个加载页里面，所以有两种办法。

默认不请求下拉数据，直接从列表里面将key和label带过来，当用户想要改变时，需要先进行clear出发 @clear，在 @clear里面调用获取下拉数据第一页
使用:remote-method=“remoteMethod”，

 remoteMethod(query) {if (query !== undefined && query != null) {//根据query进行查询，需要后台在该接口进行支持根据query查询}},

个人觉得最好使用第一种，因为第二种多请求了一次请求，但是也没有实质改变，我的实现方法就是这样，如果大家有更好的办法欢迎交流，谢谢。

vue2开发过程中el-select懒加载问题相关推荐

React中实现图片懒加载
1. 下载安装懒加载模块 cnpm i react-lazyload --save 2. 在src/assets/目录下放入懒加载占位图 placeholder.gif 3. 在需要使用懒加载 ...
vue中ztree使用懒加载的方法
vue中ztree使用懒加载的方法正常引用过后使用: import tree from "vue-giant-tree"; <tree:setting="sett ...
vue中实现图片懒加载的方法（一）
1.背景: 前几天项目需求实现了图片瀑布流布局,就想着自己再实现图片的懒加载,瀑布流布局配合图片懒加载. 2.懒加载的意义图片懒加载为的是提升网页性能,减少图片在同一时间请求很多网络图片资源,当然是 ...
工作中遇到的懒加载问题
1.懒加载懒加载(LazyLoad)一直是前端的优化方案之一.它的核心思想是:当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 2.遇到的问 ...
Swift中如何重新懒加载
2019独角兽企业重金招聘Python工程师标准>>> 在OC中,重新让一个控件重新调用懒加载方法只需要把这个控件指向nil. self.<控件> = nil; 但是Sw ...
Vue项目开发中使用路由懒加载
Vue项目开发中使用懒加载一.使用路由懒加载的好处当打包项目时,JavaScript包会变的非常大,影响页面加载,要是通过把不同的路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应 ...
java中什么叫懒加载_java懒加载的原理
聊一下以下名词.概念或用法:lazy.lazy="extra".inverse.fetch.fetch="join".fetch=" subselec ...
vue中的路由懒加载
文章目录路由懒加载 vue异步组件 ES import 常用路由懒加载懒加载本质是延迟加载或按需加载,即在需要的时候的时候进行加载. 首页不用设置懒加载,一个页面加载过后再次访问不会重复加载. ...
Swift中的延迟加载(懒加载)
Swift方式的延迟加载而在Swift中,你只需一行代码即可实现此机制: lazy var players = String[]() 简单.简洁,直入主题. 但你得记住,你必须使用var关键字来定义 ...
vue中使用lazyload实现图片懒加载
原理:先将img标签的src链接设为同一张图片(比如空白图片),然后给img标签设置自定义属性(比如 data-src),然后将真正的图片地址存储在data-src中,当JS监听到该图片元素进入可视窗 ...

vue2开发过程中el-select懒加载问题

el-select懒加载

el-select

实现懒加载的前提条件

main.js

新增

编辑

vue2开发过程中el-select懒加载问题相关推荐

最新文章

热门文章