el-table滚动加载数据
时间: 2023-11-08 21:06:01 浏览: 62
el-table可以通过设置lazy属性来实现滚动加载数据。当表格滚动到底部时,会触发load事件,此时可以在事件处理函数中请求新的数据并追加到表格中。
具体实现步骤如下:
1. 在el-table上设置lazy属性为true。
2. 监听load事件,在事件处理函数中请求新的数据。
3. 将新的数据追加到表格数据中。
示例代码如下:
```html
<template>
<el-table :data="tableData" :lazy="true" @load="handleLoad">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 10
};
},
methods: {
handleLoad() {
// 请求新的数据
fetchData(this.currentPage, this.pageSize).then(data => {
// 将新的数据追加到表格数据中
this.tableData = this.tableData.concat(data);
// 更新当前页码
this.currentPage++;
});
}
}
};
</script>
```