Quasar QTable 从子组件返回后丢失状态

Posted 2023-02-22

【中文标题】Quasar QTable 从子组件返回后丢失状态

【英文标题】：Quasar QTable lost state after returning from child component

【发布时间】：2020-10-04 02:16:56

【问题描述】：

我有一个 QTable 呈现链接，用户可以点击进入详细页面并使用后退按钮稍后返回此表。如果我移动到第 2 页并单击链接以查看详细信息页面，则返回时，表格状态将丢失，并再次显示第 1 页。

我曾尝试使用 Keep-Alive，希望组件不会被破坏，但它没有帮助。

我该如何解决这个问题？

【参考方案1】：

如果您将表格包装在keep-alive 中，只要该页面处于活动状态，它将保持活动状态。但是，由于您正在导航到另一个页面，因此该表将与包含它的页面一起被销毁。

因此，要实现您的目标，您必须使整个页面保持活力。你可以这样做：

<template>
  <q-page>
    <!-- ... -->
    <q-table ... />
    <!-- ... -->
  </q-page>
</template>
<script>
export default 
  name: 'ThePageYouWantToKeepAlive',
  // ...

</script>

keep-alive 有一些道具来管理包含/排除，您可以使用 include 道具来仅包含页面，它接受逗号分隔的列表、数组或正则表达式），你想保持活着。这样您就可以将性能损失降到最低。

<!-- /src/layouts/MainLayout.vue -->
<!-- ... -->
<q-page-container>
  <keep-alive include="ThePageYouWantToKeepAlive">
    <router-view></router-view>
  </keep-alive>
</q-page-container>
<!-- ... -->

下面的演示将有助于更好地了解情况。

// Source: https://codepen.io/yusufkandemir/pen/zYrZOKx?editors=1010
// Adopted from: https://jsfiddle.net/Linusborg/L613xva0/4/

const Foo = 
    name: 'foo',
  template: '<div><p v-for="n in numbers"> n </p></div>',
  data: function() 
    return 
        numbers: [Math.round(Math.random() * 10), Math.round(Math.random() * 10)]
    
  


const Bar = 
    name: 'bar',
    template: '<div><p v-for="n in numbers"><strong> n </strong></p></div>',
  data: function() 
    return 
        numbers: [Math.round(Math.random() * 10), Math.round(Math.random() * 10)]
    
  


const Baz = 
    name: 'baz',
  components: 
    Foo
  ,
    template: '<div><foo></div>'


const routes = [
   path: '/foo', component: Foo ,
   path: '/bar', component: Bar ,
   path: '/baz', component: Baz 
]

const router = new VueRouter(
  routes
);

const app = new Vue(
  router
).$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>

<div id="app">
  <ul>
    <router-link to="/foo">
      <li>Go to Foo</li>
    </router-link>
    <router-link to="/bar">
        <li>Go to Bar</li>
    </router-link>
    <router-link to="/baz">
      <li>Go to Baz</li>
    </router-link>
  </ul>

  <keep-alive include="foo">
    <router-view></router-view>
  </keep-alive>
</div>

【参考方案2】：

需要将表的状态存储在路由或vuex、localStorage的参数中。