Question

我正在使用vue-table-2组件：https://github.com/matfish2/vue-tables-2，我正在努力使其按需工作。

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

由于我是VueJ的新手，所以我不知道该如何使用我的API。到目前为止，这是我的代码：

我的DataTable元素：

<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",
}

预先感谢您的帮助！

Answer 1

 <v-text-field label="Date">
          <template #prepend>
            <v-icon color="blue" right>
              mdi-calendar
            </v-icon>
          </template>
  </v-text-field>

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

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

Vue-table-2与Vuex-无法更改count属性

1 个答案: