代码之家 › 专栏 › 技术社区 › Iliya

@更新:Vuetify3中的分页?

vuetifyjs3 vuetify.js vuejs3 frontend vue.js

0

Iliya · 技术社区 · 1 年前

<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.log("hello im here");
};
</script>

我正在制作一个网络应用程序,并试图用分页在大数据中实现搜索,我想在下一页事件上显示接下来的100条记录,但@update:pagition似乎在vuetify 3中不起作用,有类似的方法吗?

1 回复 | 直到 1 年前

1

0

JackChouMine 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.log('Page size changed to:', rowsPerPage)
  pageSize.value = rowsPerPage
  // update tableData from the server
}
const pageNow = ref(1)
const onPageNowChange = (page) => {
  console.log('Page changed to:', page)
  pageNow.value = page
  // update tableData from the server
}
</script>