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]"
                remote
                filterable
                clearable
                v-loadmore="loadMore"
              >
                <el-option
                  v-for="item in item.options"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>

编辑

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

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

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

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