效果图:
v-infinite-scroll无限滚动组件使用详解
1、v-infinite-scroll="load" //load无限滚动加载的方法
2、infinite-scroll-disabled //是否禁用无限滚动加载
3、infinite-scroll-delay //节流时延,单位为ms
4、infinite-scroll-distance //触发加载的距离阈值,单位为px
5、infinite-scroll-immediate //是否立即执行加载方法,以防初始状态下内容无法撑满容器。
//默认情况下,infinite-scroll-disabled是false,因此如果组件使用无限滚动加载组件,即使在vue不进行加载方法的调用,组件也会调用该方法,因此如果需要控制的话,尽量是使用infinite-scroll-disabled属性来进行加载方法是否调用的控制。
使用:
<template>
<div>
<el-select
placeholder="请选择/搜索学号或姓名"
filterable
@change="changeXs($event)"
:filter-method="filterMethod"
v-model="inputForm.xh"
style="width: 50%; margin-right: 20px"
v-if="isMounted"
>
<div v-infinite-scroll="load" infinite-scroll-delay="300" infinite-scroll-immediate="false" style="overflow: hidden"></div>
<el-option v-for="(item, index) in xsList" :key="index" :label="item.xh" :value="item.xh">
<span style="float: left">{{ item.xh }}</span>
<span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
{{ item.xm }}
</span>
</el-option>
</el-select>
<el-input style="width: 50%" disabled v-model="inputForm.xm"></el-input>
</div>
</template>
<script>
import xsqjService from "@/api/sys/xsqj/xsqjService";
export default {
data() {
return {
isMounted: false,
pageData: {
// 懒加载相关参数,这里代表从第一条数据开始加载,一次加载十项
current: 1,
size: 10
},
total: 0,
xsList: [],
inputForm: {
xh: "",
xm: "",
}
}
},
mounted() {
this.isMounted = true;
},
created() {
this.getXs();
},
methods: {
// 第一次进入页面获取数据列表
async getXs() {
const res = await xsqjService.getxslist({ ...this.pageData });
this.xsList = res.records;
this.total = res.total;
},
// 滑动加载数据
async load() {
if (this.pageData.current * this.pageData.size < this.total) {
this.pageData.current++;
const res = await xsqjService.getxslist({ ...this.pageData });
this.xsList = this.xsList.concat(res.records);
}
},
// 搜索清空列表,重置页码
filterMethod(val) {
this.xsList = [];
this.pageData.current = 1;
this.pageData.size = 10;
if (val) {
this.searchTimer && clearTimeout(this.searchTimer);
this.searchTimer = setTimeout(async () => {
const res = await xsqjService.getxslist({ ...this.pageData, xhOrXm: val });
this.xsList = res.records;
}, 500);
} else {
this.getXs();
}
},
// 选择学号获取姓名
changeXs(e) {
this.inputForm.xm = this.xsList.find((ele) => ele.xh == e).xm;
},
}
}
</script>