Table.vue 3.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <div>
  3. <vuetable ref="vuetable"
  4. :css="css.table"
  5. :fields="store.fields || []"
  6. :searchFields="store.searchFields || []"
  7. :sortOrder="store.sortOrder"
  8. :multi-sort="true"
  9. :api-mode="true"
  10. :api-url="store.api"
  11. :per-page="perPage"
  12. :append-params="extraParams"
  13. pagination-path="links.pagination"
  14. :show-sort-icons="true"
  15. @vuetable:pagination-data="onPaginationData"
  16. @vuetable:loading="onVuetableLoading"
  17. @vuetable:load-success="onVueTableLoadSuccess"
  18. />
  19. <div class="flex-list-pagination">
  20. <vuetable-pagination-info ref="paginationInfo"
  21. :info-template="store.paginationInfo"
  22. :info-no-data-template="store.emptyResult"
  23. :css="css.paginationInfo"
  24. />
  25. <vuetable-pagination ref="pagination"
  26. :css="css.pagination"
  27. @vuetable-pagination:change-page="onChangePage"
  28. />
  29. </div>
  30. </div>
  31. </template>
  32. <script>
  33. import Vue from 'vue';
  34. import Vuetable from 'vuetable-2/src/components/Vuetable.vue';
  35. import VuetablePagination from "vuetable-2/src/components/VuetablePagination.vue";
  36. import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo.vue';
  37. import VuetableCssConfig from "../VuetableCssConfig.js";
  38. import set from 'lodash/set';
  39. import unset from 'lodash/unset';
  40. export default {
  41. props: ['store', 'value'],
  42. components: {Vuetable, VuetablePagination, VuetablePaginationInfo},
  43. data: () => ({
  44. css: VuetableCssConfig,
  45. perPage: 10,
  46. data: [],
  47. extraParams: {}
  48. }),
  49. created() {
  50. this.perPage = this.store.perPage;
  51. this.data = Object.values(this.store.data);
  52. },
  53. mounted() {
  54. this.$refs.vuetable.setData(this.store.data);
  55. this.$events.$on('filter-set', event => this.onFilterSet(event));
  56. this.$events.$on('filter-reset', event => this.onFilterReset());
  57. this.$events.$on('filter-perPage', event => this.onFilterPerPage(event));
  58. },
  59. methods: {
  60. onPaginationData(paginationData) {
  61. this.$refs.pagination.setPaginationData(paginationData);
  62. this.$refs.paginationInfo.setPaginationData(paginationData);
  63. },
  64. onFilterSet (filterText) {
  65. set(this.extraParams, 'filter', filterText);
  66. Vue.nextTick(() => this.$refs.vuetable.refresh());
  67. },
  68. onFilterReset () {
  69. unset(this.extraParams, 'filter');
  70. Vue.nextTick(() => this.$refs.vuetable.refresh());
  71. },
  72. onFilterPerPage (limit) {
  73. // console.log('onFilterPerPage', limit, this.store.data);
  74. this.perPage = limit || this.$refs.paginationInfo.tablePagination.total;
  75. // this.$refs.vuetable.perPage = limit;
  76. Vue.nextTick(() => this.$refs.vuetable.refresh());
  77. },
  78. onChangePage(page) {
  79. this.$refs.vuetable.changePage(page);
  80. },
  81. onVuetableLoading() {
  82. this.$emit('input', true);
  83. },
  84. onVueTableLoadSuccess() {
  85. this.$emit('input', false);
  86. }
  87. }
  88. }
  89. </script>