iview中table翻页时候添加loading状态
时间: 2024-03-01 18:53:09 浏览: 95
要在iview中table翻页时添加loading状态,可以使用iview提供的loading组件。具体实现步骤如下:
1. 在table组件中添加loading属性,将其绑定到一个布尔类型的变量上,例如isLoading。
2. 在methods中添加handlePageChange方法,该方法会在table翻页时被调用。在方法中,将isLoading设置为true,表示正在加载数据。
3. 在获取数据的异步操作中,当数据获取成功时,将isLoading设置为false,表示数据加载完成。
4. 在template中使用iview的loading组件,将其绑定到isLoading变量上,表示在isLoading为true时显示loading状态。
示例代码如下:
```html
<template>
<div>
<i-table :loading="isLoading" @on-page-change="handlePageChange">
<!-- 表格列定义 -->
</i-table>
<i-loading :show="isLoading"></i-loading>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: false
}
},
methods: {
async handlePageChange(page) {
this.isLoading = true;
const data = await fetchData(page);
// 处理获取到的数据
this.isLoading = false;
}
}
}
</script>
```
阅读全文