vue3 el-table 上拉加载
时间: 2023-12-02 14:05:39 浏览: 43
以下是Vue3 Element-UI Table表格上拉加载的实现方法:
1.首先,需要在Vue组件中引入Element-UI库和axios库。
```javascript
import { ElTable, ElTableColumn } from 'element-plus'
import axios from 'axios'
```
2.在Vue组件中定义data属性,包括表格数据、表格高度、每页显示的数据条数、当前页码等。
```javascript
data() {
return {
tableData: [],
height: 500,
pageSize: 20,
currentPage: 1,
loading: false,
finished: false
}
}
```
3.在Vue组件中定义methods方法,包括获取表格数据的方法和上拉加载的方法。
```javascript
methods: {
// 获取表格数据
async getTableData() {
try {
const res = await axios.get('/api/tableData', {
params: {
pageSize: this.pageSize,
currentPage: this.currentPage
}
})
if (res.data.length > 0) {
this.tableData = this.tableData.concat(res.data)
this.currentPage++
} else {
this.finished = true
}
} catch (error) {
console.log(error)
} finally {
this.loading = false
}
},
// 上拉加载
loadMore() {
if (this.loading || this.finished) {
return
}
this.loading = true
this.getTableData()
}
}
```
4.在Vue组件中使用Element-UI的Table组件,并绑定上拉加载事件。
```html
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
:height="height"
v-loadmore="{ eventH: () => loadMore() }"
>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
```
5.最后,在Vue组件中使用mounted钩子函数调用getTableData方法获取表格数据。
```javascript
mounted() {
this.getTableData()
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)