BootstrapVue разбиение таблицы не дает должного результата - PullRequest
Новая
       15

BootstrapVue разбиение таблицы не дает должного результата

0 голосов
/ 30 марта 2020

Я использую bootstrap - vue с версией 2.9.0. При переходе на другую страницу результат не будет отображаться, пока я не нажму на другую страницу, затем отобразится предыдущая страница, а затем сразу же отобразится текущая страница, что, на мой взгляд, действительно странно.

Вот фрагмент: 

<b-table
    :items="dataTable.customerList"
    :fields="dataTable.fields"
    :per-page="dataTable.perPage"
    :current-page="dataTable.currentPage"
    :sort-by.sync="dataTable.sortBy"
    :sort-desc.sync="dataTable.sortDesc"
    :no-local-sorting="true"
    @sort-changed="sortingChanged"
    responsive
    striped
    hover
    show-empty
    empty-text="Loading..."
    id="tbl-customer-list"
    busy.sync="true"
>
</b-table>

<b-pagination
    v-model="dataTable.currentPage"
    :total-rows="dataTable.totalRows"
    :per-page="dataTable.perPage"
    @input="getCustomers(dataTable.currentPage)"></b-pagination>

И JS: 

export default {
    page: {
        title: 'Customers',
        meta: [{ name: 'description', content: appConfig.description }],
    },
    components: {
        Layout,
        PageHeader,
    },
    methods: {
        getCustomers(currentPage) {
            this.busy = true;
            customerList({page: currentPage}).then((response) => {
                this.dataTable.customerList = response.data;
                this.dataTable.totalRows    = response.total;
                this.dataTable.currentPage  = response.current_page;
                this.dataTable.perPage      = response.per_page;
                this.dataTable.lastPage     = response.last_page;
                this.busy = false;
            })
        },
        sortingChanged(ctx) {
            console.log(ctx);
            this.$root.$emit('bv::table::refresh', 'tbl-customer-list')
        },
    },
    mounted() {
        this.getCustomers();
    },
    data() {
        return {
            title: 'Customers',
            busy: false,
            dataTable: {
                customerList: [],
                fields: [
                    { key: 'customer_name', label: 'Full Name', sortable: true },
                    { key: 'actions', sortable: false },
                ],
                totalRows: 0,
                currentPage: 1,
                perPage: 0,
                lastPage: 1,
                sortBy: 'first_name',
                sortDesc: false,
                filter: null,
                filterOn: [],
            },
        }
    },
}

Когда я удаляю :current-page="dataTable.currentPage" на b-table, он работает нормально, но при нажатии на заголовки строк всегда отображается текущая страница как 1. (См. sortingChanged)

...