el tableLoad 异步懒加载
时间: 2023-07-05 15:06:42 浏览: 49
el-table 组件提供了异步懒加载功能,可以在表格滚动到底部时自动加载下一页数据,以提高表格性能和用户体验。
要实现异步懒加载,需要使用 el-table 组件的 load 方法。load 方法接收一个参数,即当前页码,返回一个 Promise 对象,该 Promise 对象需要 resolve 一个包含数据和总数的对象。
以下是一个简单的示例代码:
```html
<template>
<el-table :data="tableData" :load="loadData">
<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
};
},
methods: {
async loadData(page) {
const res = await fetch(`/api/data?page=${page}`);
const { data, total } = await res.json();
this.currentPage = page;
return { data, total };
}
}
};
</script>
```
在上面的示例中,loadData 方法使用 fetch 模拟异步请求数据,然后返回一个包含数据和总数的对象。在 el-table 组件中,将 load 属性绑定到 loadData 方法,并使用 :data 绑定 tableData 数据即可。
当用户滚动到表格底部时,el-table 组件会自动调用 loadData 方法加载下一页数据,并将数据添加到 tableData 中。currentPage 属性用于记录当前页码,以便在下一次加载时加载下一页数据。