选择框下拉分页

选择框选择地块，下拉列表有35条地块，不是一次性加载完，而是每次显示10条数据，当鼠标滑到底部时加载下一页

1、选择框自定义一个指令loadMore

<el-select v-loadMore="loadMore" v-model="queryParams.landId" placeholder="选择地块"
						:popper-append-to-body='false'>
						<el-option v-for="(item,index) in optionsLand" :label="item.label" :value="item.value">
						</el-option>
					</el-select>

2、准备几个对象，在data里。queryParamsLand是接口需要的参数，pageGroupLand是我们分页要用的参数，其中pageIndex是页码，totalPage是总页数，比如35块地，每页10条，总页数就是4页。

queryParamsLand: {
    
    
					pageNum: 1,
					pageSize: 10,
				},
				pageGroupLand:{
    
    
					pageIndex:1,
					totalPage:'',
				},

3、写一个获取指定页码地块列表的函数。输入参数是pageIndex，即页码。

getOptionsLand(pageIndex) {
    
    
					this.queryParamsLand.pageNum = pageIndex;
					listLand(this.queryParamsLand).then(response => {
    
    
						var temp = response.rows;
						this.pageGroupLand.totalPage = Math.ceil(response.total/this.queryParamsLand.pageSize);
						var that = this;
						temp.forEach(function(item, index, array) {
    
    
							that.optionsLand.push({
    
    
								label: item.landNumber,
								value: item.id
							})
						})

					})
			
			},

4、定义loadMore指令，directives与created平级

directives: {
    
    
			loadMore: {
    
    
				bind(el, binding) {
    
    
					// 获取element，定义scroll
					let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
					select_dom.addEventListener('scroll', function() {
    
    
						let height = this.scrollHeight - this.scrollTop - 1 <= this.clientHeight;
						if (height) {
    
    
							binding.value()
						}
					})
				}
			},
		},

5、在methods里写个翻页函数

//加载更多，如果可以翻页，就翻页
			loadMore() {
    
    
				//如果已经是最后一页，不再运行函数，否则页码加1，继续调用函数
				if (this.pageGroupLand.pageIndex + 1 > this.pageGroupLand.totalPage) return
				this.pageGroupLand.pageIndex++
				this.getOptionsLand(this.pageGroupLand.pageIndex)
			},