使用 Vuetify 处理已经分页的数据

Question

我已经在后端/服务器中对数据进行了分页。我浏览了<v-data-table> 的文档，但无法掌握那里的东西。由于我使用的是vuex，我的数据将存储在state。现在如何将它们与<v-data-table> 结合起来。

resident.js:

export default {
  state : {
    residents: [],
  },
   mutations: {
    set_residents (state, residents) {
        state.residents = residents
    },
   },
   getters: {
    allResidents (state) {
        return state.residents
    },
   },
    actions: {
    get_resident_list (context, page) {
        let page = page.page || this.state.pagination.page;
        let count = page.count || this.state.pagination.count;
        return residentApi.getResidents(page, count) 
            .then(residents => {
                context.commit('set_residents', residents)
                return residents
            })
            .catch(error => {
                return Promise.reject(error)
            })
      },
    },

在 ResidentList.vue 文件中：

import { mapGetters,  mapActions } from 'vuex'
export default {
  data () {
    return {
        residents: '',
        headers: ....,
    }
  },
  computed: {
  ...mapGetters([
        'allResidents',
    ]),
  },
  created() {
    this.get_resident_list(),
    this.residents = this.allResidents;
},
methods: {
    ...mapActions([
        'get_resident_list',
        'refresh_resident_list'
    ]),
 },
 watch: {
   allResidents() {
     this.residents = this.allResidents;
   }
 }
}

现在有了这种实现形式，我如何使用vuetify's <v-data-table> 对分页数据进行分页？

Answer 1

在vuetify's <v-data-table> 上使用:options.sync="options"，并根据需要在options 上使用观察者。 参考#https://vuetifyjs.com/en/components/data-tables#paginate-and-sort-server-side

其他方式，您可以将 page no 传递给 props 为 :page="5"

并由@update:page="updatePagination"处理

通过你的 vue 方法控制函数，

updatePagination (pagination) {
    console.log('update:pagination', pagination)
  }