Question

使用Vuetify数据表，我试图找出是否有一种方法可以确定当前所选项目在哪个页面上，然后跳转到该页面。我的用例是，我要从路由中提取数据以确定在数据表中选择了哪个项目，因此当用户使用该URL或刷新页面时，会自动为其选择相同的项目。一切正常，但是，我不知道如何获取数据表以显示所选内容的正确页面。

例如，用户访问mysite.com/11 数据表每页显示10个项目。当用户进入站点时，当前自动选择项目＃11，但它位于项目的第二页。如何获得此信息以显示页面加载项11-20？

Answer 1

我最终使用了类似于@ExcessJudgement发布的解决方案。谢谢您将密码笔放在一起，顺便说一句！我创建了此函数：

jumpToSelection: function(){
    this.$nextTick(() => {
      let selected = this.selected[0];
      let page = Math.ceil((this.products.indexOf(selected) + 1) / this.pagination.rowsPerPage);
      this.pagination.sortBy = "id";
      this.$nextTick(() => {
        this.pagination.page = page;
      });
    });
  }

我不确定为什么需要将其放入$ nextTick（）中，但否则将无法正常工作。如果有人对此有任何见识，那么知道为什么会如此将很有用。

第二个$ nextTick（）是必需的，因为更新了sortBy，然后该页面导致该页面无法更新，并且由于我是根据ID查找该页面的，因此我需要确保在跳转之前对其进行了正确排序页面。有点令人费解，但它正在工作。

Vuetify数据表跳至包含所选项目的页面

1 个答案: