Vue——使用vuetify分页组件实现分页效果

一般后台管理系统列表都需要做分页效果的，方便用户的信息查看，因为我们项目是用vuetify，所以就使用了vuetify中的分页组件 v-pagination

index.vue:

<v-pagination
     v-if="Math.ceil(totalPage / limit) > 1"
     class="pagination"
     v-model="curPage"
     :length="Math.ceil(totalPage / limit)"
     total-visible="7"
     @input="onPageChange(curPage, limit)"
   ></v-pagination>


export default {
  name: "SourceList",
  data() {
    return {
      curPage: 1,
      limit: 10,
      totalPage: 0,
      sheet_editor: null,
      current_id: null,
      show_confirm: null,
      readonly: null,
      sources: []
    };
  },
  created(){
	this.refreshList();
  },
  methods:{
	onPageChange(curPage, limit) {
     	this.refreshList(curPage, limit);
   	},
	refreshList(curPage = 1, limit = 10) {
      return this.$http
        .get(`api/list?offset=${(curPage - 1) * limit}&limit=${limit}`)
        .delegateTo(api_request)
        .then(res => {
          this.totalPage = res.total;
          this.sources = res.sources;
        });
    }
  }
}

注意：
如果分页中的length属性值是小数的话，就会报错提示：invalid property