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

Posted 2023-02-23

【中文标题】使用 Vuetify 处理已经分页的数据

【英文标题】：Handle already paginated data with Vuetify

【发布时间】：2020-05-15 14:49:31

【问题描述】：

我已经在后端/服务器中对数据进行了分页。我浏览了<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> 对分页数据进行分页？

【问题讨论】：

你试过这个吗？ vuetifyjs.com/en/components/…

【参考方案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)
  

【讨论】：

谢谢。另一个问题，在我的 api 中，我可以将查询 pageNumber 和页面上的项目数作为 count 传递，:page="5" 解决了吗？所以我可以将 API 传递为axios.get('/residents/?page='+page + '&count='+count)

你能澄清更多吗？我实际上没有得到。

axios.get('/residents/?page='+page + '&count='+count) 这是我要调用的分页 API，如何传递 page 和 count 参数？

据我所知，您还想在v-data-table 上进行设置和计数。我说的对吗？

使用:items-per-page="5" 设置并使用@update:items-per-page="getItemPerPage" 处理您的更改。