Как я могу разбить на страницы свою таблицу и одновременно выполнить поиск по всему? - PullRequest
Новая
       1

Как я могу разбить на страницы свою таблицу и одновременно выполнить поиск по всему?

0 голосов
/ 23 апреля 2019

У меня есть обзорная таблица, где я перечисляю все свои элементы. Но я разбил их на страницы, чтобы было показано всего 10 элементов.

Мой стол выглядит так: 

<el-table
  :data="paginatedData.filter(data => !search || data.tool_name.toLowerCase().includes(search.toLowerCase()))"
  border
  fit
  highlight-current-row>
  <!-- table content -->
</el-table>

В основном paginatedData включает в себя 10 элементов. Переменная «tools» включает в себя все доступные элементы.

Я хочу сохранить нумерацию страниц, но в то же время мне нужно искать по всем элементам инструментов, а не только по 10 моим paginatedData.

Поэтому я попытался изменить его на: 

<el-table
  :data="paginatedData.filter(tools => !search || tools.tool_name.toLowerCase().includes(search.toLowerCase()))"
  border
  fit
  highlight-current-row>
  <!-- table content -->
</el-table>

Полагаю, у меня просто есть проблемы с поиском правильного синтаксиса для решения моей проблемы.

Надеюсь, у вас, ребята, есть идея ...

1 Ответ

2 голосов
/ 23 апреля 2019

В этом примере есть три уровня данных:

  1. Нефильтрованный набор данных;
  2. Набор данных, который был отфильтрован по вашему поисковому запросу (при условии, что используется поисковый термин, в противном случае он будет равен нефильтрованному набору данных); и
  3. Разбитые на страницы данные, которые вы хотите разбить на пакеты по десять записей в каждом.

Это предполагает, что вы должны использовать четыре переменные:

  1. const data: массив объектов с хотя бы одним свойством, tool_name
  2. let filteredData: подмножество вышеупомянутых, отфильтрованных так, что tool_name.toLowerCase() === search.toLowerCase()
  3. let currentPageData: подмножество отфильтрованных данных, где индекс элементов соответствует текущей странице, то есть страница 1 = записи с индексом 0-9, страница 2 = записи с индексом 10-19 и т. Д.
  4. let currentPage: number переменная, в которой хранится текущая страница.

При начальной загрузке страницы вы хотите инициализировать currentPage равным 1. Следовательно, логика заполнения таблицы: 

<el-table
  :data="currentPageData"
  border
  fit
  highlight-current-row>
  <!-- table content -->
</el-table>

Где 

filteredData = !search ? data : data.filter((entry) => entry.tool_name.toLowerCase() === search.toLowerCase())
currentPageData = filteredData.filter((entry, index) => (index < (currentPage * 10) - 1 && index > ((currentPage - 1) * 10)))

т.е. если есть поиск, ваши отфильтрованные данные фильтруются в соответствии с ним, в противном случае FilterData просто устанавливается на данные. Затем currentPageData использует переменную currentPage для извлечения десяти записей, соответствующих текущей выбранной странице. Я предполагаю, что вы можете справиться с тем, как добавить кнопки в таблицу для выбора разных страниц.

Очевидно, что это не полностью рабочее решение, но должно дать представление о том, как его реализовать.

...