Vuetify Data Table перейти на страницу с выбранным элементом
Используя таблицы данных Vuetify, я пытаюсь выяснить, есть ли способ определить, на какой странице находится текущий выбранный элемент, а затем перейти на эту страницу. Мой вариант использования для этого: я извлекаю данные из маршрута, чтобы определить, какой элемент был выбран в таблице данных, поэтому, когда пользователь переходит по этому URL-адресу или обновляет страницу, для него автоматически выбирается тот же элемент. Это работает просто отлично, однако я не могу понять, как заставить таблицу данных отображать правильную страницу выбора.
Например, пользователь посещает mysite.com/11. Таблица данных показывает 10 элементов на странице. Когда пользователь входит на сайт, элемент № 11 в настоящее время выбирается автоматически, но он находится на 2-й странице элементов. Как я могу заставить это показывать элементы 11-20 при загрузке страницы?
Меня тоже интересует ваш вариант использования. Вот ручка, который может помочь вам начать работу в правильном направлении. Он показывает способ управления номером страницы при загрузке. Я вижу необходимость отфильтровать данные массива и разделить их на строки на странице, чтобы получить номер страницы. С нетерпением жду любых других предлагаемых решений/ответов.
@ varit05, я не пробовал <keep-alive> и не уверен, что это поможет здесь?
Ответы 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 страница не обновлялась, и, поскольку я нахожу страницу на основе идентификатора, мне нужно убедиться, что она правильно отсортирована, прежде чем переходить страницы. Немного запутанно, но работает.
Вы пробовали
<keep-alive>