vuetify框架中服务端分页的实现方式(指定初始显示记录数) -凯发k8官方网

在v-data-table部分配置参数：

:pagination.sync="pagination":total-items="totalitems"data () {totalitems: 5000,pagination: {page: 1, rowsperpage: 5},},watch: {pagination: {handler () {this.nextpage()},deep: true}},methods: {nextpage () {this.totalitems = this.codelistall.lengthvar temp = []if (this.codelistall.length - this.pagination.rowsperpage * (this.pagination.page - 1) >= 0) {temp = this.codelistall.slice(this.pagination.rowsperpage * (this.pagination.page - 1), this.pagination.rowsperpage * this.pagination.page)}var obj = {}obj.codelist = temp.tostring()this.$store.commit({type: 'searchnextpagecode',obj: obj,this: this})}

 

简单记录一下。

其中codelistall是我需要获取的codelist，一共有5000条。每次根据指定的长度获取关于这些code的具体数据。所以我的nextpage 只实现根据codelist其中一部分获取数据的内容

 

总的原理就是：当你按下翻页按钮时，就会触发pagination的改变。其中pagination.page记录页码，你需要自己实现根据不同页码截取不同数据的方法。

总结

以上是凯发k8官方网为你收集整理的vuetify框架中服务端分页的实现方式(指定初始显示记录数)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。