<template>
<el-table v-el-table-infinite-scroll="load" :data="data" :infinite-scroll-disabled="disabled" height="530px">
<el-table-column type="deviceName" />
<el-table-column prop="userRealName" label="date" />
<el-table-column prop="deviceCode" label="name" />
</el-table>
</template>
<script>
export default {
directives: {
"infinite-scroll": InfiniteScroll,
},
data() {
return {
data: [],
total: 5,
disabled: false,
par: {
recordId: '',
firstIndex: '1', //第几页
pageSize: '10' //一页有多少数据
},
};
},
mounted() {
this.listEquipment()
},
methods: {
load() {
if (!this.disabled) {
this.par.firstIndex++
if (this.data.length <= this.total) {
this.listEquipment()
} else {
this.disabled = true
}
} else {
return
}
},
async listEquipment() {
try {
let {
data: res
} = await this.$http.get('接口', this.par)
console.log("设备列表", res);
this.data = this.data.concat(res.data.list)
this.total = res.data.count //总数据个数
console.log("this.par.firstIndex", this.par.firstIndex);
} catch (err) {
console.log(err);
}
},
},
};
</script>
elementui中的表格实现无限滚动
最新推荐文章于 2024-09-27 12:29:13 发布
该代码段展示了一个使用ElementUI的el-table组件实现无限滚动加载的场景。当用户滚动到底部时,会触发load方法,增加页码并调用listEquipment方法获取更多设备列表数据。数据通过HTTPGET请求从接口获取,并更新到表格中。同时,当数据加载完毕时,滚动加载功能会被禁用。
摘要由CSDN通过智能技术生成