el-table 懒加载 row
时间: 2024-05-23 17:08:01 浏览: 25
el-table 懒加载 row 是指在表格中当滚动条滚动到底部时,自动加载更多的数据行。这样可以减轻页面加载时一次性请求大量数据带来的压力,提高了页面的响应速度和用户体验。
在 element-ui 的 el-table 组件中,可以通过设置 lazy 属性为 true 来实现懒加载。同时还需要设置 load 方法,在该方法中进行数据的异步加载。
以下是一个示例代码:
```
<template>
<el-table
:data="tableData"
:lazy="true"
:load="loadData"
height="300">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 10
}
},
methods: {
loadData() {
// 模拟异步加载数据
setTimeout(() => {
const data = []
for (let i = 0; i < this.pageSize; i++) {
data.push({
date: '2022-01-01',
name: `姓名${i}`,
address: `地址${i}`
})
}
this.tableData = this.tableData.concat(data)
this.currentPage++
}, 1000)
}
}
}
</script>
```
在这个示例代码中,我们通过设置 lazy 属性为 true 来启用懒加载功能,然后在 load 方法中模拟异步加载数据的过程。每次加载数据时,我们都会将获取到的数据追加到表格的数据中。