Vuetify分页组件实现指南：如何为循环渲染的卡片添加分页功能

1. 补充基础分页配置 #

首先在data中新增每页展示卡片数量的变量，你当前用的是cols="4"一行展示3张卡片，建议可先设为每页6张（占2行），按需调整数值即可：

data () {
  return {
    pageNo: 1,
    pageSize: 6, // 新增：每页展示的卡片数量
    selectedAsset: ['all'],
    assetList: [], // 全量资产数据，接口请求返回后存在该字段
    searchQuery: ''
  }
}

2. 动态绑定分页总页数 #

原有分页组件的length属性不要写死为4，改为通过全量数据动态计算总页数：

<v-pagination
  v-model="pageNo"
  :length="Math.ceil(filteredAssets.length / pageSize)"
  prev-icon="mdi-menu-left"
  next-icon="mdi-menu-right"
/>

3. 新增计算属性处理筛选+分页逻辑 #

你原有代码循环的assets直接改为计算属性，先处理搜索、分类筛选逻辑，再按当前页码切分对应数据：

computed: {
  // 第一步：处理搜索、分类筛选规则
  filteredAssets() {
    let result = [...this.assetList]
    // 搜索逻辑，可按需修改匹配字段
    if (this.searchQuery) {
      result = result.filter(item => item.name.includes(this.searchQuery))
    }
    // 分类筛选逻辑，和你现有selectedAsset逻辑适配即可
    if (this.selectedAsset[0] !== 'all') {
      result = result.filter(item => this.selectedAsset.includes(item.type))
    }
    return result
  },
  // 第二步：切分当前页需要展示的卡片数据
  assets() {
    const startIndex = (this.pageNo - 1) * this.pageSize
    const endIndex = startIndex + this.pageSize
    return this.filteredAssets.slice(startIndex, endIndex)
  }
}

完成上述修改后原有卡片循环代码无需改动，直接生效。

4. 可选优化：筛选条件变化时重置页码 #

如果搜索关键词、分类筛选条件变更时，需要自动跳回第一页，新增watch监听即可：

watch: {
  searchQuery() {
    this.pageNo = 1
  },
  selectedAsset() {
    this.pageNo = 1
  }
}

补充说明：如果资产数据量过千，建议改用后端分页，请求接口时带上pageNo和pageSize参数，由后端返回当前页数据和总条数，直接把计算后的总页数绑到v-pagination的length属性即可。

内容的提问来源于stack exchange，提问作者Pianoc