项目中触底加载更多
el-table-infinite-scroll - npm (npmjs.com)
import ElTableInfiniteScroll from "el-table-infinite-scroll";
<el-table
ref="multipleTable"
:data="allGoodList"
tooltip-effect="dark"
style="width: 100%"
height="450px"
row-key="id"
v-el-table-infinite-scroll="loadMore"
:infinite-scroll-disabled="disabled"
v-loading="tableLoading"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" :reserve-selection="true">
</el-table-column>
<el-table-column label="商品名称" prop="goodsName">
</el-table-column>
</el-table>
data() {
return {
disabled: false,
tableLoading: false,
}
}
// 监听表格滚动
directives: {
//自己写方法
// loadmore: {
// bind(el, binding) {
// const selectWrap = el.querySelector(".el-table__body-wrapper");
// selectWrap.addEventListener("scroll", function () {
// const scrollDistance =
// this.scrollHeight - this.scrollTop - this.clientHeight;
// if (scrollDistance <= 0.5) {
// binding.value()//执行在使用时绑定的函数，在这里即loadMorePerson方法
// }
// });
// },
// },
//插件的方法
"el-table-infinite-scroll": ElTableInfiniteScroll,
},
loadMore() {
if (this.disabled) return;
if ((this.pageInfo.pageIndex + 1) * this.pageInfo.pageSize < this.pageInfo.total) {
this.pageInfo.pageIndex += 1;
this.$nextTick(() => {
this.getGoodsList();
});
} else {
this.disabled = true;
}
}
