el-select实现远程搜索和懒加载_el-select 远程搜索

一、组件内实现

场景：select下拉框从后端通过网络请求获取数据，数据大使用懒加载，在获取焦点时先获取一页数据，同时使用模糊搜索功能。

1、页面结构部分：

<template>
<div id='C_mySelect'>
	<el-select size="mini" 
	ref="mylazy"
	v-select-loadmore="loadmore"   // 自定义指令（懒加载功能指令），loadmore懒加载调用的函数
	@focus="mygetItem"  // 获取焦点时第一次执行查询
	filterable
	remote
	:remote-method="mygetItem"  // 远程后端搜索查询，与获取焦点查询封装在一个方法内，通过参数判断
	:loading="loading"  
	v-model="itemCode" 
	clearable 
	placeholder="请选择">
	    <el-option
	    v-for="item in myitems"
	                :key="item.value"
	                :label="item.label"
	                :value="item.value"
	    >
	    </el-option> 
	 </el-select>
	</div>
 </template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

这里使用了ref属性，主要功能时在懒加载时获取输入框的数据使用，是必须的，否则在懒加载请求后端数据时无法使用搜索功能。

2、相关数据声明

<script>
export default {
	data(){
		retuen{
			loading: false, // 加载中状态开关
			itemCode:"",  // Select绑定数据
			myitems:[{}],  // Select选项
			stopLoading: false, // 加载开关，加载所有后端数据后控制懒加载是否继续执行，通过后端返回数据来控制
			pageData: {// 懒加载相关参数，这里代表从第一条数据开始加载，一次加载20项
			    pageNumber: 1,
			    pageSize: 20
			},
		}
	}

}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3、自定义指令

  // 自定义指令
  directives:{
    'select-loadmore':{
      bind(el, binding){
        // 下拉框对象
        const SELECTWRAP_DOM = el.querySelector(
          '.el-select-dropdown .el-select-dropdown__wrap'
        );
        // 给下拉框增加滚动监听，
        SELECTWRAP_DOM.addEventListener('scroll', function() {
          // scrollHeight:当前所有选项的高度
          // scrollTop:滚动的距离
          // clientHeight:下拉框的高度
          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
          // 当滚动条滚动到最底下的时候执行接口加载下一页
          if (condition) {
              binding.value();
          }
        });      
      }
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

自定义指令是所有懒加载可以公用，上面的代码可以直接复制，也意味着可以把以上代码封装为一个js 文件然后全局加载。

4、网络请求数据封装

这里需要注意的是网络请求函数功能有一点多，我们封装网络请求数据有三种情况调用，一是获取焦点时，二是模糊搜索时，三是懒加载时，这三种情况需要在封装时做判断。

/** 
    *  API函数，从后端获取数据，给下拉选项重新赋值
    * val： 是字符串且不为空时是模糊搜索，是对象时是第一次获取焦点调用
    * lazy: 懒加载时传 true
    * return  无
    */
    mygetItem(val, lazy=false){
      this.loading = true  // 调用API前设置加载状态为true
      let param= {page:this.pageData.pageNumber,size:this.pageData.pageSize}  //加载页和每页数据
      if(lazy == false){   // 如果不是懒加载，
        this.operationModeProps=[]  // 把select选项数组重置为空
        param.page = 1  // 设置查询第一页，每页20条
        param.size = 20
      }
      // 本函数在搜索时调用会自动传入搜索内容（val)，是字符串，此时使用远程搜索方式
      if(typeof(val)=='string'){  
        param.name = val
        getItemAPI(param).then(res =>{
          this.loading = false  // 接口调用成功，把加载状态改为true
          let resultData = res.data.data  //
          let page_title = res.data.page_title
          // 停止加载，当后端没用发送总页数，或者后端总页数小于等于当前请求页数时，说明没用更多数据，关闭懒加载开关停止加载。
          if(page_title==''||page_title==null||page_title==undefined||page_title<=param.page)
          {
            this.stopLoading=true    // 设置停止懒加载为true
            return  // 直接停止执行，否则会导致下面的网络请求数据处理添加导致重复数据
          }  
          // 网络请求数据处理
          resultData.forEach(element => {
           ......
          });
        }).catch(err=>{  //请求错误处理
          this.$message({
            message: err,
            type: 'warning'
          });
        })
      }else{     // 如果是获取焦点调用本函数（第一次调用），参数val不是字符串，而是对象，此时直接查询第一页数据
        param.page = 1
        param.size = 20
        // 这里很重要，获取焦点第一次加载时打开懒加载开关，否则一个页面多个懒加载的的话会导致一个懒加载关闭其他都不能懒加载了。
        this.stopLoading=false  
        getItem7(param).then(res =>{
          this.loading = false
          let resultData  = res.data.data
          resultData.forEach(element => {
            ......
          });
        }).catch(err=>{
          this.$message({
            message: err,
            type: 'warning'
          });
        })
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

5、懒加载函数

/** 
* 懒加载自定义指令调用的方法，此方法会在select选项加载到底部是自动触发
* return  无
*/
loadmore(){
  if (!this.stopLoading) {
     this.pageData.pageNumber++;// 搜索下一页
      // this.$refs.mylazy.query 获取当前搜索的字符
     this.mygetItem(this.$refs.mylazy.query, true); //调用后端接口获取下拉框数据，此时第二个参数必须传 true，懒加载方式调用后端接口函数
 }
},
1
2
3
4
5
6
7
8
9
10
11

这需要注意的是 this.stopLoading 的判断条件，加载完成数据后不在加载，否则会循环加载数据，永无止尽。

二、全局封装懒加载

待续。。。