12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <template>
- <div>
- <vuetable ref="vuetable"
- :css="css.table"
- :fields="store.fields || []"
- :searchFields="store.searchFields || []"
- :sortOrder="store.sortOrder"
- :multi-sort="true"
- :api-mode="true"
- :api-url="store.api"
- :per-page="perPage"
- :append-params="extraParams"
- pagination-path="links.pagination"
- :show-sort-icons="true"
- @vuetable:pagination-data="onPaginationData"
- @vuetable:loading="onVuetableLoading"
- @vuetable:load-success="onVueTableLoadSuccess"
- />
- <div class="flex-list-pagination">
- <vuetable-pagination-info ref="paginationInfo"
- :info-template="store.paginationInfo"
- :info-no-data-template="store.emptyResult"
- :css="css.paginationInfo"
- />
- <vuetable-pagination ref="pagination"
- :css="css.pagination"
- @vuetable-pagination:change-page="onChangePage"
- />
- </div>
- </div>
- </template>
- <script>
- import Vue from 'vue';
- import Vuetable from 'vuetable-2/src/components/Vuetable.vue';
- import VuetablePagination from "vuetable-2/src/components/VuetablePagination.vue";
- import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo.vue';
- import VuetableCssConfig from "../VuetableCssConfig.js";
- import set from 'lodash/set';
- import unset from 'lodash/unset';
- export default {
- props: ['store', 'value'],
- components: {Vuetable, VuetablePagination, VuetablePaginationInfo},
- data: () => ({
- css: VuetableCssConfig,
- perPage: 10,
- data: [],
- extraParams: {}
- }),
- created() {
- this.perPage = this.store.perPage;
- this.data = Object.values(this.store.data);
- },
- mounted() {
- this.$refs.vuetable.setData(this.store.data);
- this.$events.$on('filter-set', event => this.onFilterSet(event));
- this.$events.$on('filter-reset', event => this.onFilterReset());
- this.$events.$on('filter-perPage', event => this.onFilterPerPage(event));
- },
- methods: {
- onPaginationData(paginationData) {
- this.$refs.pagination.setPaginationData(paginationData);
- this.$refs.paginationInfo.setPaginationData(paginationData);
- },
- onFilterSet (filterText) {
- set(this.extraParams, 'filter', filterText);
- Vue.nextTick(() => this.$refs.vuetable.refresh());
- },
- onFilterReset () {
- unset(this.extraParams, 'filter');
- Vue.nextTick(() => this.$refs.vuetable.refresh());
- },
- onFilterPerPage (limit) {
- // console.log('onFilterPerPage', limit, this.store.data);
- this.perPage = limit || this.$refs.paginationInfo.tablePagination.total;
- // this.$refs.vuetable.perPage = limit;
- Vue.nextTick(() => this.$refs.vuetable.refresh());
- },
- onChangePage(page) {
- this.$refs.vuetable.changePage(page);
- },
- onVuetableLoading() {
- this.$emit('input', true);
- },
- onVueTableLoadSuccess() {
- this.$emit('input', false);
- }
- }
- }
- </script>
|