最近在开发一个教育类应用时，遇到了一个需求：用户需要从数千所学校中选择自己的就读院校。最初，我尝试一次性加载所有学校数据到 autocomplete 中，结果发现页面加载速度变慢。想了一下还是分页加载较为有效,我看了一些网上的分页加载的教程都有点问题。

1.template

请注意在autocomplete的上级添加

load //加载函数

isLoading//加载状态

 v-scrollLoad="load"
 v-loading="isLoading"

 <el-form-item
              label="就读院校"
              class="form-item"
              v-scrollLoad="load"
              v-loading="isLoading"
            >
              <el-autocomplete
                ref="schoolLists"
                v-model="form.school"
                :fetch-suggestions="querySearchSchool"
                clearable
                @select="handleSelectSchool"
                placeholder="请输入就读院校"
              >
                <template #default="{ item }">
                  <div class="autocomplete-item">
                    <img
                      :src="'https://www.jlservice.cn/' + item.logo"
                      alt="Logo"
                      class="autocomplete-logo"
                    />
                    <span class="autocomplete-name">{{ item.name }}</span>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>

2.下拉指令

网上很多教程都是用el.query，这是不可取的因为在挂载时autocomplete没有聚焦获取不到元素，这个元素在body里面，所以我们用document获取（如果有更好的方法尽量不用document因为它是全局的，另外悄咪咪说一句有更好的方法记得告诉我）

export default {
  directives: {
    scrollLoad: {
      mounted(el, binding, vnode) {
        let wrapDom = document.querySelector('.el-autocomplete-suggestion__wrap')
        let listDom = document.querySelector(
          '.el-autocomplete-suggestion__wrap  .el-autocomplete-suggestion__list',
        )
        wrapDom.addEventListener(
          'scroll',
          () => {
            // 注意load的使用，节流
            let condition = wrapDom.offsetHeight + wrapDom.scrollTop + 10 - listDom.offsetHeight
            if (condition > 0) {
              //滚动到底部则执行滚动方法load，binding.value就是v-scrollLoad绑定的值，加()表示执行绑定的方法
              binding.value()
            }
          },
          false,
        )
      },
      unmounted(el) {
        // 解绑滚动事件
        const wrapDom = document.querySelector('.el-autocomplete-suggestion__wrap')
        if (wrapDom && el._scrollHandler) {
          wrapDom.removeEventListener('scroll', el._scrollHandler, false)
        }
      },
    },
  },
}

3滚动加载函数

实现分页加载

const load = async () => {
  if (page.value < totalPage.value) {
    page.value++
    const params = {
      page: page.value,
    }
    await getSchoolLists(params)
  } else if (!isLoading.value) {
    ElMessage({
      message: '没有更多数据了',
      offset: 300,
    })
  }
}