【vue+Element】el-select远程搜索&动态加载

在我们使用 Element 的 el-select 时，当下拉框的选项过多，我们一次性将所有选项都放入下拉框中会导致页面卡顿，每次点击下拉框都会出现白屏，我们可以用自定义指令实现下拉框的动态加载。

首先，在main.js文件中我们可以定义一个全局的指令

Vue.directive('loadmore', {
  bind(el, binding) {
    const dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    dom.addEventListener('scroll', function () {
      const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
      if (condition) {
        binding.value()
      }
    })
  }
});

将动态加载的 el-select 封装成一个公共组件以便复用，起名为 MySelect.vue

<template>
  <el-select
    size="small"
    multiple
    v-bind="$attrs"
    v-loadmore="loadProject"
    collapse-tags
    filterable
    :clearable="clearableFlag"
    :placeholder="placeholder"
    :filter-method="ha