当select组件的选择项数据量过大时的处理方法

1. 问题来源及发生场景: 正常使用elm组件库的secect选择器组件时;对应的下拉选项的options数组都是由后端返回的数据;此时如果该数据是成千上万条的时候;select组件会因为加载数据显得异常的卡顿,甚至会引发整体页面的卡顿.那么此时用户体验感极差.所以得动手优化下,毕竟咱们是专业的前端不是.一切追求极致…扯远了.废话不多说,先上效果图.

2. 效果图: (说明:可以看到实际请求数据是返回了近7000条数据;此时如果不处理,那么页面绝对是卡顿的;所以我们这边对数据进行了处理,可以看到,处理后的select首屏只展示了200条数据;检索却可以检索所有的数据.这就很好地解决了以上的问题)

3. 关键代码:

<el-form-item label="客户登录账号：" prop="customLoginId">
          <el-select
            v-model="ruleForm.customLoginId"
            placeholder="请选择客户登录账号"
            :filter-method="filterLoginIdList"
            @clear="clearList"
            clearable
            filterable
          >
            <el-option
              v-for="item in loginIdListTop200"
              :key="item.customLoginId"
              :label="item.customLoginName"
              :value="item.customLoginId"
            >
            </el-option>
          </el-select>
        </el-form-item>


getLoginIdList(val) {
      //获得用户登录列表
      let data = new URLSearchParams();
      API.getLoginIdList(data)
        .then((res) => {
          if (res.code == 200) {
            this.loginIdList = res.data;
            this.loginIdListTop200 = res.data.slice(0, 200); //取前两百条展示
          }
        })
        .catch((err) => {});
    },
    filterLoginIdList(query = "") {  //自定义的筛选出所输入值所匹配出的集合
      let arr = this.loginIdList.filter((item) => {
        return item.customLoginName.includes(query);
      });
      if (arr.length > 200) {
        this.loginIdListTop200 = arr.slice(0, 200);
      } else {
        this.loginIdListTop200 = arr;
      }
    },
    clearList() {
      //点击清空登录用户时操作    
        this.getLoginIdList("");  
    },

4. 代码处理思路:
   4-1: 先通过getLoginIdList函数向后台请求拿到所有的数据,存入数组中;并用另一数组拿到截取用于secect组件首屏展示的200条数据.
   4-2:通过select组件的filter-method方法自定义搜索方法筛选出所输入值所匹配出的集合.elm官网API链接
   4-3:清空按钮时重新请求getLoginIdList拿到数据(不做这一步的话,会导致select检索输入后无法还原前200条数据的情况,可自行尝试).

5. 当然,如果此时场景有类似编辑(修改)的时候;那么如果此时的id不在前200条里,那么此时该select的赋值就会只显示id,而不显示该id对应的name了(类似下面):
   5-1:赋值处理前:
   

5-2:赋值处理后:

6.第5步的处理代码也很简单.(主体思路就是拿个变量存储到编辑时赋值的对应的那个id所在的数组;然后将它加入前200数组集合中即可).
代码展示:

if(this.params.customLoginId){   //把编辑的那条数据拿到整合到前200条的数组中,这样确保编辑时能对应显示(否则,编辑的id不在前200时,只显示id不显示对应名称)
              this.curEditArr =  this.loginIdList.filter(i => {return i.customLoginId == this.params.customLoginId})   
            }else{
              this.curEditArr = []
            }
            this.loginIdListTop200 = res.data.slice(0, 200).concat(this.curEditArr); //取前两百条展示       

7. 整合后的完整代码如下:

<el-form-item label="客户登录账号：" prop="customLoginId">
          <el-select
            v-model="ruleForm.customLoginId"
            placeholder="请选择客户登录账号"
            :filter-method="filterLoginIdList"
            @clear="clearList"
            clearable
            filterable
          >
            <el-option
              v-for="item in loginIdListTop200"
              :key="item.customLoginId"
              :label="item.customLoginName"
              :value="item.customLoginId"
            >
            </el-option>
          </el-select>
        </el-form-item>

getLoginIdList(val) {
      //获得用户登录列表
      let data = new URLSearchParams();
      API.getLoginIdList(data)
        .then((res) => {
          if (res.code == 200) {       
            this.loginIdList = res.data;
            this.curEditArr = []
            if(this.params.customLoginId){   //把编辑的那条数据拿到整合到前200条的数组中,这样确保编辑时能对应显示(否则,编辑的id不在前200时,只显示id不显示对应名称)
              this.curEditArr =  this.loginIdList.filter(i => {return i.customLoginId == this.params.customLoginId})   
            }else{
              this.curEditArr = []
            }
            this.loginIdListTop200 = res.data.slice(0, 200).concat(this.curEditArr); //取前两百条展示       
          }
        })
        .catch((err) => {});
    },
    filterLoginIdList(query = "") {  //自定义的筛选出所输入值所匹配出的集合
      let arr = this.loginIdList.filter((item) => {
        return item.customLoginName.includes(query);
      });
      if (arr.length > 200) {
        this.loginIdListTop200 = arr.slice(0, 200);
      } else {
        this.loginIdListTop200 = arr;
      }
    },
    clearList() {
      //点击清空登录用户时操作 
        this.getLoginIdList("");
    },

8. 大功告成.更多详情还请需要的同学自行尝试.大佬勿喷,码字不易.还请多多支持.多多三连