vux-table 懒加载 修改
时间: 2023-11-16 22:04:34 浏览: 128
对于vux-table的懒加载修改,你可以通过以下步骤实现:
1. 在组件中引入loadmore插件:
```
import { LoadMore } from 'vux'
```
2. 定义loadmore组件的状态:
```
data() {
return {
isLoadMore: false,
currentPage: 1,
pageSize: 10,
listData: []
}
}
```
3. 监听loadmore组件的加载事件,触发加载数据:
```
methods: {
loadMore() {
this.isLoadMore = true
// 请求数据接口
getData(this.currentPage, this.pageSize).then(res => {
this.isLoadMore = false
if (res.length > 0) {
this.listData = this.listData.concat(res)
this.currentPage++
}
})
}
}
```
4. 在模板中使用loadmore组件,并绑定加载事件和状态:
```
<vux-load-more :auto-fill="false" :callback="loadMore" :bottom-method="loadMore" :loading="isLoadMore" :finished="false">
<ul>
<li v-for="(item, index) in listData" :key="index">{{ item }}</li>
</ul>
</vux-load-more>
```
阅读全文