The elementUi select drop-down box bottoms out to load asynchronous pagination data

In Element UI, you can listen to visible-changethe event of the select drop-down box to realize the effect of loading the next page when it hits the bottom.

Method 1: Use elementUi events

Specific steps are as follows:

1. First, set in the select component:@visible-change="handleVisibleChange" ref="mySelect"
2. Define a variable pageNum in data to record the currently loaded page number:pageNum: 1,
3. Define a function in methods handleVisibleChangeto monitor the display and hide changes of the drop-down box:

handleVisibleChange(visible) {
  if (visible) {
    // 如果下拉框显示
    const selectDropdown = document.querySelector('.el-select-dropdown__wrap');
    // 监听下拉框滚动事件
    selectDropdown.addEventListener('scroll', this.loadNextPage);
  } else {
    // 如果下拉框隐藏
    const selectDropdown = document.querySelector('.el-select-dropdown__wrap');
    // 移除下拉框滚动事件监听
    selectDropdown.removeEventListener('scroll', this.loadNextPage);
  }
},

1. Define a function in methods loadNextPageto load the data of the next page:

loadNextPage() {
  const selectDropdown = document.querySelector('.el-select-dropdown__wrap');
  // 判断下拉框是否触底
  if (selectDropdown.scrollTop + selectDropdown.offsetHeight >= selectDropdown.scrollHeight) {
    // 触底加载下一页数据
    this.pageNum++;
    // 调用接口请求下一页数据
    // ...
  }
},

Method 2: Use a custom command

First of all, this problem requires us to write a custom instruction to listen to the scroll event of the select drop-down box. This is the first step.

Step 1: Create a new select.js file. The specific code is as follows:

Step 2: Just import it in the main.js file. Of course, there are two import methods, which will be introduced below.

1. The first import method (this method is that there are other custom commands in the project, and you can’t take them all). This import method is the above-mentioned direct export default that is directly exposed.

import directives from '@/assets/js/directives'
 
Object.keys(directives).forEach(item => {
  Vue.directive(item, directives[item])
})

2. The second introduction method. It is to directly write a vue file, import vue, and Vue.directive( ) to write code in it. The introduction of this method is as follows:

import Directives from './directives/index'
 
Vue.use(Directives)

Through the above steps, we can achieve the effect of automatically loading the next page of data when the drop-down box touches the bottom. According to your needs, you can call the corresponding interface to request the next page of data and display it in the drop-down box.