el-table中实现“加载更多”的功能
时间: 2024-02-01 08:15:36 浏览: 21
可以通过以下步骤在 el-table 中实现“加载更多”的功能:
1. 定义一个变量 `pageSize` 用于控制每次加载的数据条数。
2. 定义一个变量 `currentPage` 用于控制当前加载的页数。
3. 在 el-table 组件中设置 `:data` 属性为一个数组,初始为空数组。
4. 定义一个方法 `loadMoreData`,用于加载更多数据。在方法中通过接口请求获取数据,并将数据添加到数组中。
5. 在 el-table 组件中使用 slot="append" 插槽,将“加载更多”按钮插入到表格底部。
6. 在“加载更多”按钮的点击事件中调用 `loadMoreData` 方法,实现数据的动态加载。
下面是一个示例代码:
```
<template>
<el-table :data="tableData">
<!-- 表头 -->
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<!-- 插槽,用于插入“加载更多”按钮 -->
<template slot="append">
<div class="load-more-btn" v-if="hasMoreData">
<el-button type="primary" @click="loadMoreData">加载更多</el-button>
</div>
</template>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [], // 表格数据
currentPage: 1, // 当前页数
pageSize: 10, // 每页数据条数
hasMoreData: true, // 是否还有更多数据
};
},
methods: {
async loadMoreData() {
// 接口请求,获取数据
const res = await this.$axios.get(`/api/getData?page=${this.currentPage}&size=${this.pageSize}`);
const newData = res.data;
// 将新数据添加到表格数据中
this.tableData = [...this.tableData, ...newData];
// 判断是否还有更多数据,如果没有则隐藏“加载更多”按钮
if (newData.length < this.pageSize) {
this.hasMoreData = false;
}
// 当前页数加1
this.currentPage++;
},
},
};
</script>
<style>
.load-more-btn { text-align: center; margin-top: 20px; }
</style>
```