Есть ли способ изменить количество строк на страницу в v-data-таблице (vuetify) без сброса таблицы на страницу 1? - PullRequest
Новая
       39

Есть ли способ изменить количество строк на страницу в v-data-таблице (vuetify) без сброса таблицы на страницу 1?

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

У меня есть таблица данных vuetify, в которой я хотел бы сохранить текущую страницу, на которой она находится, когда я изменяю строки на номер страницы. Кажется, он не вызывает синхронизацию нумерации страниц c всякий раз, когда я изменяю строки на странице. (Syn pagination c должен отслеживать, какая страница работает, как работает с другими фильтрами на странице, например, при сортировке записей она останется на текущей странице). Так ли это, как работает v-data-таблица при изменении строк на странице?

Буду признателен за любую помощь. Спасибо

1 Ответ

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

Непонятно, что вы подразумеваете под «той же страницей». Если в вашей таблице всего 100 строк, и вы отображаете 10 строк на странице, и в настоящее время вы просматриваете строки 31-40 (т. Е. «Страница 3»), и вы переключаетесь на 50 строк на страницу, какой страницей вы должны быть на? С новыми строками на страницу будет всего 2 страницы, поэтому быть на «странице 3» было бы бессмысленно. Если вы переключились на 5 строк на страницу, то пункты 31-35 были бы на странице 7, а пункты 36-40 были бы на странице 8. Какая страница должна отображаться?

Поскольку нет четкого, однозначного определения «той же страницы», Vuetify по умолчанию возвращает к первой странице в качестве разумного поведения.

Однако, ради аргумента, давайте решим, что под «той же страницей» вы подразумеваете, что любой элемент был в первой строке таблицы до изменения элементов на странице останутся видимыми на экране после изменения элементов на странице. Очевидно, что если количество элементов на странице уменьшается, например, увеличивается с 10 до 5, вы не сможете отобразить ВСЕ элементы, которые были на экране до изменения.

Вот демонстрация этого в действии на Codepen .

v-data-table имеет событие @pagination, которое срабатывает при каждом изменении страницы, как при переходе по страницам, так и при изменении количества элементов на странице. Обработчик событий получает объект, который выглядит следующим образом: 

{
  "page": 5,         // 1-based index, i.e. first page is 1 (not zero)
  "itemsPerPage": 5, // current items per page
  "pageStart": 20,   // 0-based index of the first item displayed on the screen
  "pageStop": 25,    // 0-based index of the first item on the *next* page
  "pageCount": 20,   // total number of pages
  "itemsLength": 100 // total number of rows
}

Мы можем сохранить эти значения для последующего использования, включая обновление текущей страницы при изменении количества элементов на странице.

First вам нужно будет добавить два реквизита к вашему v-data-table: 

<v-data-table
  :headers="headers"
  :items="items"
  :items-per-page="5"
  :page.sync="pagination.page"
  @pagination="updatePage"
></v-data-table>

page.sync, позволяющим программно установить текущую страницу, т.е. поддерживать ее в синхронизации c с указанным реквизитом данных. @pagination позволяет указать функцию для получения и обработки информации о нумерации страниц при каждом ее изменении. Раздел скрипта вашего компонента будет выглядеть так: 

export default {
  name: 'MyComponentWithADataTable',
  data () {
    return {
      headers: [ /* ...data table header info... */ ],
      items: [ /* ...the actual data in the table... */ ],
      pagination: {}, // <-- holds our pagination data
    }
  },
  computed: {
    firstItem () {
      // the index of the item that is the top row displayed on the screen
      return this.pagination.pageStart
    },
    itemsPerPage () {
      // the current number of items per page
      return this.pagination.itemsPerPage
    },
  },
  methods: {
    updatePage (pagination) {
      // detect change in itemsPerPage
      if (this.itemsPerPage !== pagination.itemsPerPage) {
        for (let p = 0; p < pagination.pageCount; p++) {
          // figure out the page bounds
          const start = p * pagination.itemsPerPage
          const end = start + pagination.itemsPerPage
          // is the target item on this page?
          if (this.firstItem >= start && this.firstItem < end) {
            // yes, so set the page to this page
            pagination.page = p + 1
            // break out of the loop
            break;
          }
        }
      }
      // update the pagination info
      this.pagination = pagination
    }
  },
}
...