单击第 5 页并更新其中一个内容后，Vuetable return 到第 1 页，然后单击返回

Question

首先，我点击了第 5 页，然后点击了其中一项的编辑。其次，我单击更新并单击返回到具有 vuetable 的上一页。然后vuetable分页return回到第1页

有什么办法可以防止页码回到1？

我试过 "query-params" 但似乎没有用。

SalesOrderAdmin.vue

<template>
    <div>
        <section class="content-header">
            <h1>
                Sales Order
            </h1>


        </section>
        <div class="content">

            <div class="row">
              <div class="col-md-12">
                <div class="box box-info">
                  <div class="box-body">
                    <div class="table-responsive">
                        <myvuetable :apiUrl="apiUrl" :fields='fields' :page_no='page_no'></myvuetable>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                apiUrl: '/ajax/getsalesorder',
                page_no: 5,
                fields: [
                  {
                    name: '__sequence',
                    title: '#',
                    titleClass: 'center aligned',
                    dataClass: 'center aligned'
                  },
                  {
                    name: 'name',
                    title: 'Name',
                    sortField: 'name',
                    direction: 'asc'
                  },
                  {
                    name: 'payment_type',
                    title: 'Payment Method',
                    sortField: 'payment_type',
                  },
                  {
                    name: 'payment_bank_file',
                    title: 'Payment Bank File',
                    sortField: 'payment_bank_file',
                    callback: 'linkLabel'
                  },
                  {
                    name: 'total_amount',
                    title: 'Paid Amount',
                    sortField: 'total_amount',
                    direction: 'asc'
                  },
                  {
                    name: 'status',
                    title: 'Order Status',
                    sortField: 'status',
                    direction: 'asc'
                  },
                  {
                    name: 'created_by',
                    title: 'Created By',
                    sortField: 'created_by.name',
                  },
                  {
                    name: 'created_at',
                    title: 'Created At',
                    sortField: 'created_at',
                  },
                  {
                    name: '__slot:actions',   // <----
                    title: 'Action',
                    titleClass: 'center aligned',
                    dataClass: 'center aligned'
                  }
                ],
            }
        },
        props: ['is_admin'],
        methods : {
          init () {
            var $vm = this;
          },
        },
        mounted() {
            this.init();
            console.log('Page distributor mounted.')
        }
    }
</script>

Myvuetable.vue

<template>
  <div class="table no-margin">
    <filter-bar></filter-bar>
    <div class="vue-table-wrapper">
        <div class="vue-table-loading"><div class="loader"></div></div>
        <vuetable ref="vuetable" 
          :api-url="apiUrl" 
          :fields="fields" 
          :per-page="20" 
          :css="css" 
          :append-params="appendParams"
          :query-params="{page: 'page_no'}"
          pagination-path="" 
          @vuetable:loading="onLoadingData"
          @vuetable:load-success="onLoadSuccess"
          @vuetable:pagination-data="onPaginationData" 
          @vuetable:checkbox-toggled-all="onCheckboxToggledAll"
          @vuetable:checkbox-toggled="onCheckboxToggled"
        > 
          <template slot="actions" slot-scope="props">
              <router-link v-if="actionsBtnVisibility(props.rowData.actions, 'view')" :to="{ path: props.rowData.actions.view}">
                  <i class="fa fa-search-plus"></i>
              </router-link>
              <router-link v-if="actionsBtnVisibility(props.rowData.actions, 'edit')" :to="{ path: props.rowData.actions.edit}" title="Cloak User">
                  <i class="fa fa-edit"></i>
              </router-link>
              <a v-if="actionsBtnVisibility(props.rowData.actions, 'download')" :href="props.rowData.actions.download"><i class="fa fa-download"></i></a>

              <a v-if="actionsBtnVisibility(props.rowData.actions, 'download_order')" :href="props.rowData.actions.download_order" target="_blank"><i class="fa fa-download"></i></a>

              <a v-if="actionsBtnVisibility(props.rowData.actions, 'download_attachment')" :href="props.rowData.actions.download_attachment" download><i class="fa fa-paperclip"></i></a>

              <a v-if="actionsBtnVisibility(props.rowData.actions, 'popup')" @click="popup(props.rowData.actions.popup)" style="cursor: pointer;">Update</a>

              <a v-if="actionsBtnVisibility(props.rowData.actions, 'login')" :href="props.rowData.actions.login" style="cursor: pointer;" title="Cloak User"><i class="fa fa-key" aria-hidden="true"></i></a>
          </template>
        </vuetable>
      </div>

    <div class="vuetable-pagination ui basic segment grid">
      <vuetable-pagination-info ref="paginationInfo" 
      ></vuetable-pagination-info>

      <vuetable-pagination-bootstrap ref="pagination" @vuetable-pagination:change-page="onChangePage"
          ></vuetable-pagination-bootstrap>
    </div>

  </div>
</template>
<style scoped>
.vue-table-wrapper {
    position: relative;
}
.vue-table-loading {
    position: absolute;
    background: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
}
.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    margin: 00 auto;
    position: relative;
    top: 50%;
    margin-top: -25px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>
<script>

export default {
    data(){
      return {
          css: {
            tableClass: 'ui blue selectable celled stackable attached table',
            loadingClass: 'loading', 
            detailRowClass: 'vuetable-detail-row',
            sortHandleIcon: 'grey sidebar icon',
            ascendingIcon: 'fa fa-sort-asc',
            descendingIcon: 'fa fa-sort-desc'
          },
          sortOrder: [
          ], 
          appendParams: {},
          checkboxes: []
      }
    },
    computed: {
        selectAll: {
            get: function () {
                return this.checkboxes.length === this.$refs.vuetable.tableData.length;
            }
        },
    },
    props: [
        'apiUrl', 'fields', 'vueTableParams', 'page_no'
    ], 
    methods: {
        statusLabel (value){
            if(value == 'Success'){
                return '<span class="label label-success">Success</span>';
            }else{
                return '<span class="label label-danger">Failed</span>';
            }
        },
        activeLabel (value){
            if(value == 'active'){
                return '<span class="label label-success">Active</span>';
            }else{
                return '<span class="label label-danger">Inactive</span>';
            }
        },
        yesnoLabel (value){
            if(value == 1){
                return '<span class="label label-success">Yes</span>';
            }else{
                return '<span class="label label-danger">No</span>';
            }
        },
        approvalLabel (value){
            if(value == 'approved'){
                return '<span class="label label-success">Approved</span>';
            }else if(value == 'processing'){
              return '<span class="label label-warning">Processing</span>';
            }else if(value == 'processed'){
              return '<span class="label label-success">Processed</span>';
            }else if(value == 'rejected'){
              return '<span class="label label-danger">Rejected</span>';
            }else{
                return '<span class="label label-warning">Pending</span>';
            }
        },
        transactionLabel (value){
            if(value == 'processed'){
                return '<span class="label label-success">Processed</span>';
            }else if(value == 'rejected'){
                return '<span class="label label-danger">Rejected</span>';
            }else{
                return '<span class="label label-danger">Pending</span>';
            }
        },
        accountLabel (value){
          if(value == 1){
                    return '<span class="label label-success">Enabled</span>';
                }else{
                    return '<span class="label label-danger">Disabled</span>';
                }
        },
        actionsBtnVisibility(actions, btn){
            if(actions && typeof actions[btn] != 'undefined'){
                return true;
            }
            return false;
        },
        linkLabel(value){
            if(value){
                return '<a href= "'+value+'" target="_blank">File</a>';
            }
            else{
                return '-';
            }
        },
        view_order(value){
            if(value){
                var order = value.split("~");
                return '<a href= "/admin/salesorder/view/'+order[0]+'" target="_blank">'+order[1]+'</a>';
            }
            else{
                return '-';
            }
        },
        popup(id){
            this.$emit('updatestat', id);
        },
        onLoadingData (){
            //console.log('loading');
            $('.vue-table-loading').show();
        },
        onLoadSuccess (){
            $('.vue-table-loading').hide();
            //console.log('loading success');
        },
        onPaginationData (paginationData) {
            this.$refs.pagination.setPaginationData(paginationData) 
            this.$refs.paginationInfo.setPaginationData(paginationData) 
        },
        onChangePage (page) {
            this.$refs.vuetable.changePage(page) 
        },
        onFilterSet (filterText) {

            if(typeof this.vueTableParams != 'undefined'){
                this.vueTableParams.filter = filterText;
                this.appendParams = this.vueTableParams
            }else{
                this.appendParams = { filter:filterText  }
            }

            var $vm = this;
            Vue.nextTick( () => $vm.$refs.vuetable.refresh())
        },
        onFilterParams (){
            this.appendParams = this.vueTableParams
            var $vm = this;
            Vue.nextTick( () => $vm.$refs.vuetable.refresh())
        },
        onFilterReset () {
            if(typeof this.vueTableParams != 'undefined'){
                this.vueTableParams.filter = '';
                this.appendParams = this.vueTableParams
            }else{
                this.appendParams = {}
            }

            var $vm = this;
            Vue.nextTick( () => $vm.$refs.vuetable.refresh())
        },
        onCheckboxToggledAll(isChecked){
            this.checkboxes = this.$refs.vuetable.selectedTo;
            this.$emit('update:selected', this.checkboxes)
        },
        onCheckboxToggled(isChecked){
            this.checkboxes = this.$refs.vuetable.selectedTo;
            this.$emit('update:selected', this.checkboxes)
        }
    },
    mounted() {
        this.$events.$on('filter-params', eventData => this.onFilterParams(eventData))
        this.$events.$on('filter-set', eventData => this.onFilterSet(eventData))
        this.$events.$on('filter-reset', e => this.onFilterReset())
    }
}
</script>

Answer 1

我找到了在 vue 中使用本地存储的解决方案。

在myvuetable.vue

onLoadingData (){
    if (window.location.href.indexOf("admin/sales_order") > -1) {
        if(Vue.localStorage.get('sales_order_admin_page')){
            this.$refs.vuetable.currentPage = Vue.localStorage.get('sales_order_admin_page');
        }
    }
}

在route.js

import VueLocalStorage from 'vue-localstorage'
Vue.use(VueLocalStorage)

Vue.use(VueLocalStorage, {
  name: 'ls',
  bind: true //created computed members from your variable declarations
})

Vue.localStorage.remove('sales_order_admin_page')

所以当加载所有组件时，我只是先删除本地存储数据，然后每当有页面更改时，它就会将页面存储在本地存储中。它会首先检测 url 然后只更新 vuetable 中的页面。如果用户没有点击刷新，那么它不会重新运行所有组件，这意味着 route.js 也不会重新加载，因此本地存储数据仍然存在。

单击第 5 页并更新其中一个内容后，Vuetable return 到第 1 页，然后单击返回

Vuetable return to page 1 after I have clicked page 5 and updated one of the content then click back

laravel

vue.js

vuejs2

vue-tables-2