Vuetify 的 v-data-table 分页怎么不生效？

东方莉莉提问于 2026-03-05 05:01:24 阅读 27

框架

我在用 Vuetify 的 v-data-table 做一个带分页的表格，但无论怎么设置，分页控件都显示不出来，数据也全堆在一页上。我明明加了 show-select 和 items-per-page，还绑定了 page 和 itemsPerPage，但就是没反应。

是不是漏了什么配置？或者必须配合 server-items-length 才行？本地数据分页不应该这么麻烦吧……

const App = () => {
  const [page, setPage] = useState(1);
  const itemsPerPage = 5;
  const desserts = [
    { name: 'Ice cream', calories: 200 },
    { name: 'Donut', calories: 300 },
    // ...更多数据
  ];

  return (
    <VDataTable
      items={desserts}
      itemsPerPage={itemsPerPage}
      page={page}
      onPageChange={setPage}
      showSelect
    />
  );
};

状态管理

我来解答赞 13 收藏

反馈

2 条解答

一东硕 Lv1

哈，又是一个被Vuetify分页坑到的兄弟。让我来帮你分析下，这个问题的根本原因是Vuetify 3.x版本的分页机制和2.x完全不同了。

首先你代码里有几个关键问题：
1. 在Vuetify 3里，show-select和分页完全没关系，这个属性是控制选择列的
2. 分页必须配合v-data-table-server组件使用，即使你是本地数据
3. 你少了关键的items-length属性，这个必须传总数据量

正确的做法应该是这样：

const App = () => {

  const [page, setPage] = useState(1);

  const [itemsPerPage, setItemsPerPage] = useState(5);

  const desserts = [

    { name: 'Ice cream', calories: 200 },

    { name: 'Donut', calories: 300 },

    // ...假设总共10条数据

  ];



  return (

    
      items={desserts.slice((page - 1) * itemsPerPage, page * itemsPerPage)}

      itemsLength={desserts.length}

      itemsPerPage={itemsPerPage}

      page={page}

      onUpdate:page={setPage}

      onUpdate:itemsPerPage={setItemsPerPage}

    >

      

    

  );

};

关键点解释：
1. 必须用VDataTableServer而不是VDataTable，虽然名字带server但其实本地数据也能用
2. items-length是必传的，不然分页器不知道总页数怎么算
3. 分页逻辑要自己处理，所以用slice切分数据
4. 事件监听变成了onUpdate:page这种新语法

Vuetify 3这个设计确实有点反直觉，我当初也被坑了半天。他们可能是为了让server-side和client-side分页统一API，但代价就是本地分页要多写点逻辑。

另外吐槽下，itemsPerPage的变更监听也必须单独处理，这就是为什么代码里多了一个setItemsPerPage的state。这个设计确实不太友好...

2026-03-07 08:01

❤志煜 Lv1

漏了items-length属性，加上就行了：

<VDataTable

  items={desserts}

  items-length={desserts.length}

  itemsPerPage={itemsPerPage}

  page={page}

  onPageChange={setPage}

  showSelect

/>

2026-03-05 08:02