:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="equipmentTypeId"
label="所属设备种类">
v-model="model.equipmentTypeId" @popupScroll="handlePopupScroll" placeholder="请选择所属设备种类 " mode="multiple">
v-for="(item, index) in typeList" :value="item.id" :key="item.id">
{{ item.equipmentTypeName }}
import { getDeviceTypeList } from '@/api/home'
export default {
data () {
typeList: [],
pageObj: {
pageNo: 1,
pageSize: 10,
pages: 0, // 总页数
total: 0, // 总条数
}
}
}
methods: {
// 下拉列表滚动时的回调
handlePopupScroll (e) {
console.log(e)
if (this.pageObj.pageNo >= this.pageObj.pages) return;
const { target } = e;
const { scrollTop, scrollHeight, clientHeight } = target;
if (scrollTop + 2 + clientHeight >= scrollHeight) {
// 已经到达底部，触发分页逻辑
// todo 这里就可以触发加载下一页请求 具体函数根据当前业务需求来定
this.pageObj.pageNo = ++this.pageObj.pageNo;
this.pageObj.pageSize+1
this.getTypeList(true)
}
},
getTypeList(isScroll = false) {
let param = {
pageNo: this.pageObj.pageNo,
pageSize: this.pageObj.pageSize
}
getDeviceTypeList(param).then((res) => {
if (res.success) {
this.pageObj.pages = res.result.pages;
this.typeList = isScroll == false ? [] : this.typeList;
res.result.records.forEach((e) => {
// 成功之后的数据应该push进数组中，而不是直接等于，否则就是下拉换页的效果了。
this.typeList.push(e);
});
}
})
},
}