95 lines
3.6 KiB
Vue
95 lines
3.6 KiB
Vue
|
<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>
|