La zone de sélection sélectionne les tracés. Il y a 35 tracés dans la liste déroulante. Au lieu de charger tous les éléments en même temps, 10 éléments de données sont affichés à chaque fois. Lorsque la souris glisse vers le bas, la page suivante est chargée.
1. Personnalisez une commande loadMore dans la zone de sélection
<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. Préparez plusieurs objets dans data. queryParamsLand est le paramètre requis par l'interface, pageGroupLand est le paramètre que nous devons utiliser pour la pagination, où pageIndex est le numéro de page et totalPage est le nombre total de pages, par exemple, 35 lands, 10 éléments par page et le total le nombre de pages est de 4 pages.
queryParamsLand: {
pageNum: 1,
pageSize: 10,
},
pageGroupLand:{
pageIndex:1,
totalPage:'',
},
3. Écrivez une fonction pour obtenir une liste de tracés avec un numéro de page spécifié. Le paramètre d'entrée est pageIndex, qui est le numéro de page.
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. Définissez la commande loadMore, les directives et créées sont au même niveau
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. Écrivez une fonction de tournage de page dans les méthodes
//加载更多，如果可以翻页，就翻页
loadMore() {
//如果已经是最后一页，不再运行函数，否则页码加1，继续调用函数
if (this.pageGroupLand.pageIndex + 1 > this.pageGroupLand.totalPage) return
this.pageGroupLand.pageIndex++
this.getOptionsLand(this.pageGroupLand.pageIndex)
},