带有 Vuex 的 vue-table-2 - 无法更改计数属性

Posted 2023-02-22

【中文标题】带有 Vuex 的 vue-table-2 - 无法更改计数属性

【英文标题】：vue-table-2 with Vuex - not able to change the count property

【发布时间】：2019-04-20 10:23:54

【问题描述】：

我正在使用 vue-table-2 组件：https://github.com/matfish2/vue-tables-2，我正在努力让它按我的意愿工作。

我有一个 API（使用 API 平台），它已经使所有分页工作正常进行。因此，当我第一次获取我的公司列表时，它会给出前十个结果 + 总行数。我将所有这些都存储在我的 vuex 商店中，并且能够在我的表中显示列表（useVuex 为 false 或 true，所以我不太了解这个参数是如何工作的）。问题是我无法分页，因为我只有十个结果并且无法更改总行数，所以我没有得到底部的分页元素，也无法将某些内容绑定到它以稍后获取其他页面。

由于我对 VueJs 还很陌生，所以我无法弄清楚这应该如何与我的 API 一起使用。到目前为止，这是我的代码：

我的数据表元素：

<v-client-table name="company" :columns="columns" :data="companies" :options="options" :theme="theme" id="dataTable">
          <b-button slot="actions" slot-scope="props" variant="secondary" size="sm" class="btn-pill">Edit</b-button>
</v-client-table>

还有我的脚本：

<script>
import Vue from 'vue'
import  ClientTable, Event  from 'vue-tables-2'
import  mapGetters  from 'vuex'

Vue.use(ClientTable)

export default 
  name: 'DataTable',
  components: 
    ClientTable,
    Event,
  ,
  data: function() 
    return 
      columns: ['name', 'actions'],
      options: 
        headings: 
          name: 'Name',
          actions: 'Actions',
        ,
        sortable: ['name'],
        filterable: ['name'],
        sortIcon: 
          base: 'fa',
          up: 'fa-sort-asc',
          down: 'fa-sort-desc',
          is: 'fa-sort',
        ,
        pagination: 
          chunk: 5,
          edge: false,
          nav: 'scroll',
        ,
      ,
      useVuex: true,
      theme: 'bootstrap4',
      template: 'default',
    
  ,
  computed: 
    ...mapGetters(
      companies: 'companyModule/companies',
      totalCompanies: 'companyModule/totalCompanies',
    ),
  ,

</script>

这是在我的组件中加载数据，我在其中指定我希望我的 api 发送给我的每页有多少项目以及我想要的页面：

created() 
    this.$store.dispatch('companyModule/FETCH_COMPANIES', 
      page: 1,
      nbItemPerPage: 10,
    )
  ,

我的商店是这样的：

import ApiService from '@/services/APIService'

export const companyModule = 
  strict: true,
  namespaced: true,
  state: 
    companies: [],
    totalCompanies: 0,
  ,
  getters: 
    companies: state => state.companies,
    totalCompanies: state => state.totalCompanies,
  ,
  mutations: 
    SET_COMPANIES(state, data) 
      state.companies = data.companies
      state.totalCompanies = data.totalCompanies
    ,
  ,
  actions: 
    FETCH_COMPANIES(context, payload) 
      payload.entity = 'companies'
      return ApiService.get(payload).then(data => 
        context.commit('SET_COMPANIES', data)
      )
    ,
  ,

收到数据后，我将所有内容存储在公司状态中，现在我存储从 API 获取的所有内容，如下所示：

      "@id": "/api/admin/companies/1",
      "@type": "Company",
      "id": 1,
      "name": "Test Company",
 

提前感谢您的帮助！

【问题讨论】：

如何从 api 获取该数据，请显示执行该操作的代码

在创建我的列表视图时：

在创建我的列表视图时，我有： created() this.$store.dispatch('companyModule/FETCH_COMPANIES', page: 1, nbItemPerPage: 10, ) , 此操作获取API 每页给我 10 个结果，并在第 1 页给我 10 个结果。然后我将所有结果存储在我的商店中，这是存储的一项的格式：“@id”：“/api/admin/companies/ 1", "@type": "Company", "id": 1, "name": "Test Company" 希望对您有所帮助！

您能否通过添加这些详细信息来编辑问题以更清晰

如果我直接提供所有数据，我会得到我想要的分页，但我只想获取一定数量的项目，因为当数据库有大量数据时，这更具可扩展性。这就是为什么我希望表格知道我将有 100 个结果（这将在底部显示分页元素）并在 changePage 事件中获取特定页面的数据。 （我希望我很抱歉，如果我不是：s）

【参考方案1】：

watch: 
    'companies': 
    handler (newValue, oldValue) 
        this.totalRows=this.companies.length;
    ,
    deep: true
    
,

Vue “watch” 是 vue 框架的一个强大的响应式选项属性，它可以帮助前端开发人员监听对值所做的更改，然后对其做出反应。 因此，一旦设置了 totalRows，您可以将其分配给表格属性，表格将相应更改。 对于我的情况，我将它用于引导表，如下所示：

    <b-pagination
        :total-rows="totalRows"
        :per-page="perPage"
></b-pagination>