在滚动加载时,每一次加载出来的数据都有上一页的数据,数据冗余
<el-select
v-model="queryParams.equipmentTypeCode"
filterable
remote
placeholder="请输入"
:remote-method="getModelFistPage"
:popper-append-to-body="false"
v-loadmore="getModelList" //自定义指令
>
<el-option
v-for="item in modelList.list"
:key="item.value"
:value="item.value"
:label="item.label"
>
</el-option>
</el-select>
data(){
return{
queryParams: {
pageNum: 1,
pageSize: 10,
equipmentTypeCode: null,
},
modelList: {
list: [],
loading: false,
loaded: false,
pageSize: 10,
total: 0,
name: null,
},
}
}
methods:{
async getModelFistPage (name) {
this.modelList.list = [];
this.modelList.loaded = false;
this.modelList.name = name;
return await this.getModelList();
},
async getModelList () {
if (this.modelList.loading || (this.modelList.loaded && this.modelList.list.length >= this.modelList.total)) {
return;
}
this.modelList.loading = true;
try {
const pageNum = Math.floor(this.modelList.list.length / this.modelList.pageSize);
const { data: { data, total } } = await Api.equipmentModel({
pageNum: pageNum + 1,
pageSize: this.modelList.pageSize,
name: this.modelList.name,
});
this.modelList.total = total;
this.modelList.loaded = true;
this.modelList.list.splice(pageNum * this.modelList.pageSize, this.modelList.pageSize);
this.modelList.list.push(...data.map(item => ({ value: item.cardNo, label: item.name })));
} finally {
this.modelList.loading = false;
}
},
},
mounted(){
this.getModelFistPage();
}
loading正在加载,在请求结束之前即使滚动条到底部也不进行下一次请求
loaded是指加载完成
在mounted上挂载,初次点击时出现下拉框