The selection box selects plots. There are 35 plots in the drop-down list. Instead of loading all at once, 10 pieces of data are displayed each time. When the mouse slides to the bottom, the next page is loaded
1. Customize a command loadMore in the selection box
<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. Prepare several objects in data. queryParamsLand is the parameter required by the interface, pageGroupLand is the parameter we need to use for paging, where pageIndex is the page number, and totalPage is the total number of pages, for example, 35 lands, 10 items per page, and the total number of pages is 4 pages.
queryParamsLand: {
pageNum: 1,
pageSize: 10,
},
pageGroupLand:{
pageIndex:1,
totalPage:'',
},
3. Write a function to obtain a list of plots with a specified page number. The input parameter is pageIndex, which is the page number.
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. Define the loadMore command, directives and created are at the same level
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. Write a page turning function in methods
//加载更多，如果可以翻页，就翻页
loadMore() {
//如果已经是最后一页，不再运行函数，否则页码加1，继续调用函数
if (this.pageGroupLand.pageIndex + 1 > this.pageGroupLand.totalPage) return
this.pageGroupLand.pageIndex++
this.getOptionsLand(this.pageGroupLand.pageIndex)
},