@update: нумерация страниц в Vuetify3?

<template>
  <v-app>
    <v-container>
      <div class = "search-section">
        <div class = "search-fields">
          <v-text-field v-model = "search" label = "ФИО"></v-text-field>
          <v-text-field v-model = "birthdateSearch" label = "Дата рождения"></v-text-field>
          <v-text-field v-model = "studyUidSearch" label = "UUID исследования"></v-text-field>
          <v-text-field v-model = "studyDateSearch" label = "Дата исследования"></v-text-field>
          <v-text-field v-model = "modalitySearch" label = "Модальность"></v-text-field>
        </div>
      </div>
    <v-data-table :items = "filteredItems" multi-sort :loading = "loading" @update:pagination = "updatePagination">
      <template v-for = "header in headers" v-slot:[`header.${header.value}`] :key = "header.value">
        <span>{{ header.text }}</span>
      </template>
    </v-data-table>
    </v-container>
  </v-app>
</template>

<script setup>
const updatePagination = async () => {
  console.info("hello im here");
};
</script>

Я создаю веб-приложение и пытаюсь реализовать поиск по большим данным с разбиением на страницы. Я хочу отобразить следующие 100 записей на событии следующей страницы, но кажется, что @update: разбиение на страницы не работает в vuetify 3, есть ли аналоги?

vue.js frontend vuejs3 vuetify.js vuetifyjs3

27.05.2024 03:15

Стоит ли изучать PHP в 2026-2027 годах?

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

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

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

v-data-table нет этого мероприятия. Вам нужна нумерация страниц вручную, вы можете использовать этот способ:

<template>
  <v-data-table 
   :items = "tableData"
   :itemsPerPageOptions = "itemsPerPageOptions" 
   :items-per-page = "pageSize" 
   @update:items-per-page = "onPageSizeChange" 
   :page = "pageNow" 
   @update:page = "onPageNowChange">
    <template v-slot:item.exclusive = "{ item }">
      <v-checkbox v-model = "item.exclusive" readonly></v-checkbox>
    </template>
  </v-data-table>
</template>

<script setup lang = "js">
import { ref } from 'vue'
const tableData = ref([
  {
    name: 'PlayStation 5',
    manufacturer: 'Sony',
    year: 2020,
    sales: '10M',
    exclusive: true,
  },
  {
    name: 'Xbox Series X',
    manufacturer: 'Microsoft',
    year: 2020,
    sales: '6.5M',
    exclusive: false,
  },
  {
    name: 'Nintendo Switch',
    manufacturer: 'Nintendo',
    year: 2017,
    sales: '89M',
    exclusive: true,
  },
  {
    name: 'PlayStation 4',
    manufacturer: 'Sony',
    year: 2013,
    sales: '116M',
    exclusive: true,
  },
  {
    name: 'Xbox One',
    manufacturer: 'Microsoft',
    year: 2013,
    sales: '50M',
    exclusive: false,
  },
  {
    name: 'Nintendo Wii',
    manufacturer: 'Nintendo',
    year: 2006,
    sales: '101M',
    exclusive: true,
  },
])
const itemsPerPageOptions = ref([
  { value: 2, title: '2 items' },
  { value: 5, title: '5 items' },
  { value: 10, title: '10 items' },
  { value: -1, title: 'All items' }])

const pageSize = ref(2)
const onPageSizeChange = (rowsPerPage) => {
  console.info('Page size changed to:', rowsPerPage)
  pageSize.value = rowsPerPage
  // update tableData from the server
}
const pageNow = ref(1)
const onPageNowChange = (page) => {
  console.info('Page changed to:', page)
  pageNow.value = page
  // update tableData from the server
}
</script>

27.05.2024 03:52

Другие вопросы по теме

Как установить языковой стандарт для средства выбора даты Element-Plus

Как заставить кнопку отправлять значение формы на сервер, но не обновлять страницу?

Почему useState не работает и как это исправить?

У меня проблема с декоратором параметров

Почему useEffect запускается каждый раз, когда компонент <PostList/> загружается из домашнего компонента

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

Как настроить селектор темы в Tailwind-CSS

Эмодзи в html-шаблоне Angular

Диаграмма Material-UI загружает строки только после наведения курсора мыши

Next.js 11 — вызов API Axios срабатывает 2 раза при загрузке страницы

@update: нумерация страниц в Vuetify3?

Ответы 1

Другие вопросы по теме

Похожие вопросы