1、自定义指令

1、创建directives.js，放在utils文件夹下；代码如下：

import Vue from 'vue'
Vue.directive('loadmore', {
  bind (el, binding) {
    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()
      }
    })
  }
})

2、在main.js中全局引用：import ‘@/utils/directives.js’

2、在需要使用懒加载的el-select加上我们的自定义指令（v-loadmore）

<el-select 
	v-model="userForm.departmentId" 
	filterable 
	remote 
	:remote-method="searchDepartmentList" 
	placeholder="请选择" 
	size="small" 
	v-loadmore="loadMoreFun">
    <el-option
      v-for="(item,index) in departmentList"
      :key="index"
      :label="item.name"
      :value="item.id">
   	</el-option>
</el-select>

其他无关紧要的代码我不就贴上来了

<script>
import http from "@/utils/http";
import api from "@/utils/api";
export default {
  data() {
    return {
      curRow:{},//当前编辑的部门
      departmentListPage:{// 部门列表懒加载分页信息
        pageIndex:1,
        pageSize:50
      }
    };
  },
  methods: {
  	//点击编辑按钮弹出编辑框
    handleClick(index, row, val) {
      console.log(index, row, val);
      if (val == "editUser") {
        this.curRow = row
        this.departmentListPage = {
          pageIndex:1,
          pageSize:50
        }
        this.departmentList = []
        //将当前行的部门id和部门名称放在部门列表数组最前面，解决：当前选择的部门没有加载的时候回显为id
        this.departmentList.push({
          id:this.curRow.departmentId,
          name:this.curRow.departmentName
        })
        this.getDepartmentList();
      });
    },
    //远程搜索-支持关键字搜索
    searchDepartmentList(keyword){
      this.departmentListPage = {
        pageIndex:1,
        pageSize:50
      }
      this.departmentList = []
      this.getDepartmentList(keyword)
    },
    //获取部门列表
    getDepartmentList:async function(keyword){
      let params = {
        curPage:this.departmentListPage.pageIndex,
        pageSize:this.departmentListPage.pageSize,
        keyword:keyword || ''
      }
      const res = await http.get(api.getDepartmentList.path, params)
      if (res && res.success) {
      	//如果是编辑用户，需要回显用户所属的部门，当加载到了我们需要回显的数据时，将最开始我们插入在部门列表的第一条数据删除。
        if(this.curRow){
          res.result.records.forEach((value,index,array)=>{
            if(value.id == this.curRow.departmentId){
              this.departmentList.splice(0,1)
            }
          })
        }
        this.departmentList = [...this.departmentList, ...res.result.records];
      }
    },
    /**
     * 鼠标滚动加载
    */
    loadMoreFun() {
      this.departmentListPage.pageIndex++;
      this.getDepartmentList()
    },
  }
};
</script>

3、效果图

总结

在做此项目的时候，新增用户需要选择所属部门，最开始认为部门数据不会很多，就没有让后台做分页，直接返回所有的部门数据，在测试的时候，部门列表数据直接导了10w，网页奔溃。后面想想还是需要用到懒加载。总结了各位大佬写的博客。实现了懒加载后，都遇到了一个问题：当编辑用户的时候，部门列表的数据还没有加载我们选中项，此时所属部门就会显示部门id。这样显示是BUG。
实现思路：先把我们选中的数据加在部门列表最前面，当加载到了我们选中的数据后删除最前面我们自己加进去的数据。完美解决！