el-table 实现懒加载
时间: 2023-07-07 10:14:20 浏览: 79
el-table 可以通过使用 element-ui 的 el-infinite-scroll 组件实现懒加载,具体步骤如下:
1. 在 el-table 中添加 el-infinite-scroll 组件,并设置 @infinite-scroll 方法
```html
<el-table v-loading="isLoading" :data="tableData" @row-click="handleRowClick"
style="width: 100%" v-infinite-scroll="infiniteScroll">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
```
2. 在 @infinite-scroll 方法中,判断是否需要加载更多数据,并调用加载数据的方法
```js
data() {
return {
currentPage: 1,
limit: 10,
tableData: [],
isLoading: false
}
},
methods: {
handleRowClick(row) {
console.log(row)
},
infiniteScroll() {
if (this.isLoading) return
const tableWrapper = document.querySelector('.el-table__body-wrapper')
if (tableWrapper) {
const { scrollTop, scrollHeight, clientHeight } = tableWrapper
if (scrollTop + clientHeight + 10 >= scrollHeight) {
this.loadData()
}
}
},
async loadData() {
this.isLoading = true
const res = await fetch(`/api/getTableData?page=${this.currentPage}&limit=${this.limit}`)
const data = await res.json()
this.tableData = [...this.tableData, ...data]
this.currentPage++
this.isLoading = false
}
}
```
在这里,我们通过判断 el-table 的滚动位置和高度,来判断是否需要加载更多数据。如果需要加载,就调用 loadData 方法。
注意,为了防止重复加载,我们在加载数据的时候设置 isLoading 为 true,加载完毕后再设置为 false。
另外,由于是懒加载,我们需要在后端接口中添加分页参数,以便获取指定页的数据。