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

东方莉莉 阅读 3

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

是不是漏了什么配置?或者必须配合 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
    />
  );
};
我来解答 赞 8 收藏
二维码
手机扫码查看
1 条解答
❤志煜
❤志煜 Lv1
漏了items-length属性,加上就行了:

<VDataTable
items={desserts}
items-length={desserts.length}
itemsPerPage={itemsPerPage}
page={page}
onPageChange={setPage}
showSelect
/>
点赞
2026-03-05 08:02