element el-table 实现懒加载和无限滚动 用vue代码写出来
时间: 2024-05-25 12:17:53 浏览: 10
<template>
<div>
<el-table
:data="tableData"
:row-key="row => row.id"
:height="height"
:loading="loading"
@row-click="handleRowClick"
>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 10,
loading: false,
height: 500,
total: 0,
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
this.loading = true;
setTimeout(() => {
const data = [];
const start = (this.currentPage - 1) * this.pageSize + 1;
for (let i = start; i <= start + this.pageSize - 1; i++) {
data.push({
id: i,
name: `User ${i}`,
age: Math.floor(Math.random() * 30) + 20,
address: `Address ${i}`,
});
}
this.total = 1000;
this.tableData = data;
this.loading = false;
}, 1000);
},
handleRowClick(row) {
console.log(row);
},
handleScroll(e) {
const tableBottom = e.target.scrollHeight;
const scrollTop = e.target.scrollTop;
const clientHeight = e.target.clientHeight;
if (tableBottom - scrollTop - clientHeight <= 10) {
if (this.tableData.length < this.total) {
this.currentPage++;
this.fetchData();
}
}
},
},
mounted() {
document
.querySelector(".el-table__body-wrapper")
.addEventListener("scroll", this.handleScroll);
},
beforeDestroy() {
document
.querySelector(".el-table__body-wrapper")
.removeEventListener("scroll", this.handleScroll);
},
};
</script>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)