Select can slide down to lazily load data. The following is a summary made by referring to many cases on the Internet.

Train of thought

  1. Drop to the bottom to request data
  2. Determine whether to pull down to the bottom
  3. Take the parent element

The problem solving

To solve the problem is to look backwards

First, take the parent element, because it involves low-level dom operations, where you can use vue’s custom instructions to perform low-level operations on normal DOM elements.

Local custom instruction usage method

Take the parent element

 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
Copy the code

Determine whether to pull down to the bottom

Selectwrap_dom.addeventlistener ('scroll', function () {/** * scrollHeight (read-only) * scrollTop Gets or sets the offset of an element. * clientHeight reads the visible height of the element (read only) * If the element is scrolled to the end, the following equation returns true, false if the element is not scrolled: * ele.scrollHeight - ele.scrollTop === ele.clientHeight; */ const condition = this.scrollHeight - this.scrollTop <= this.clientHeight if (condition) { binding.value() }Copy the code

The request data

loadmore () {
    if (this.formData.pageIndex > this.formData.totalPage) {
      return false
    }
    this.getprojectList()
},
Copy the code

The complete code

<template> <el-select ref="select" v-model="projectIdDefault" popper-class="essentialInformation-select" clearable filterable :default-first-option='true' v-el-select-loadmore="loadmore" style="width:100%"> <el-option v-for="item in projectList" :key="item.project_id" :label="item.name" :value="`${item.project_id},${item.name}`"> </el-option> </el-select> </template> <script> import { getProjectList } from '@/utils/dataDictionaryApi' export default { props: { projectId: { type: String, default: '' } }, data () { let that = this return { projectIdDefault: that.projectId, projectList: [], formData: { pageIndex: 1, pageSize: 5, totalPage: 0 } } }, directives: { 'el-select-loadmore': { bind (el, Binding) {// Get the Scroll box defined by elder-ui const SELECTWRAP_DOM = el.querySelector('. El-select-dropdown ') .el-select-dropdown__wrap') // console.log(SELECTWRAP_DOM, 'SELECTWRAP_DOM') SELECTWRAP_DOM.addEventListener('scroll', Function () {/** * scrollHeight Gets or sets the element's offset. ScrollTop is used to calculate the position of the scrollbar when an element's container does not produce a vertical scrollbar. * clientHeight reads the visible height of the element (read only) * The following equation returns true if the element scrolls to the bottom, false if it does not: * ele.scrollHeight - ele.scrollTop === ele.clientHeight; */ const condition = this.scrollHeight - this.scrollTop <= this.clientHeight if (condition) { binding.value() } }) } } }, watch: { projectId (newCity, oldCity) { this.projectIdDefault = newCity }, projectIdDefault (newCity, oldCity) { if (! NewCity | | newCity = = = oldCity) {/ / is an empty string if the new field or new is equal to the old return false} this. $emit (' changeProjectId 'newCity)}}, methods: { loadmore () { if (this.formData.pageIndex > this.formData.totalPage) { return false } this.getprojectList() }, getprojectList () { getProjectList({ 'page': this.formData.pageIndex, 'limit': this.formData.pageSize, 'dim': this.projectIdDefault.split(',')[1] }).then(res => { this.$nextTick(() => { this.projectList = this.projectList.concat(res.data.page.list) this.formData.pageIndex = res.data.page.currPage + 1 this.formData.totalPage  = res.data.page.totalPage }) }) } }, created () { this.projectList = [] this.getprojectList() } } </script> <style> .essentialInformation-select .el-select-dropdown__wrap{ max-height: 150px; overflow: scroll; } </style>Copy the code

disadvantages

  1. Fuzzy search can only search the data that has been queried
  2. Unloaded data cannot be displayed during editing