When there is too much data in the drop-down box, the loading will be very slow, so use paging to display, and achieve paging effect by listening to scrolling events.
I did it using Vue custom directives.
1. First create a js file under src to complete the writing of custom instructions
import Vue from 'vue'
export default () => {
Vue.directive('selectScroll', {
bind (el, binding) {
// 如上图,我通过v-if来控制了两个select框,当没有binding.arg这个参数时,我只能监听到企业类型下的select框,所以,我通过传参控制了监听的哪个select框
var className='.'+binding.arg
el.className=binding.arg
// 获取滚动页面DOM
const SCROLL_DOM = el.querySelector(`${className} .el-select-dropdown .el-select-dropdown__wrap`)
// const SCROLL_DOM = el.querySelector(“.el-select-dropdown .el-select-dropdown__wrap“)
SCROLL_DOM.addEventListener('scroll', function () {
// 当前的滚动位置 减去 上一次的滚动位置
// 如果为true则代表向上滚动,false代表向下滚动
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
// 如果已达到指定位置则触发
if (CONDITION) {
// 将滚动行为告诉组件
binding.value()
}
})
}
})
}
Can anyone tell me why custom commands cannot be used multiple times on the same page?
2. Introduce it in main.js
import Directives from './utils/select-scroll'
Vue.use(Directives)
Three, use
<el-select
v-model="Id"
v-selectScroll:selectName="handleScroll" //这行最重要(传参)
// v-selectScroll="handleScroll" //这行最重要(不传参)
filterable
clearable
placeholder="请选择"
>
<el-option
v-for="(item,index) in options"
:key='index'
:label="item.name"
:value="item.id"
></el-option>
</el-select>
Because I also added the search function, there are quite a lot of problems
Refer to the official documentation:
https://cn.vuejs.org/guide/reusability/custom-directives.html