Vuetify v-data-table -如何让它填充可用的高度?

mwg9r5ms  于 2022-11-25  发布在  Vue.js
关注(0)|答案(1)|浏览(198)

我正在使用Vue.js和Vuetify。我有一个页面,其中包含用户可配置的项目。布局是2x2,因此每行有两个项目,共2行。
其中一项应包含显示警报的表格。
问题是分页。如果我使用“默认分页”,那么表格从5行开始,用户可以在下拉列表中选择行数。但我想使用Vuetify的外部分页。这里没有问题。
但是...我如何让表格填满可用的高度,并以此为基础计算分页?这样在大屏幕上...比方说...每页显示12个项目,而在小屏幕上...比方说...每页显示8个项目?
如果有24个数据条目,则在第一种情况下,外部分页将允许用户选择页面1或2,而在第二种情况下,外部分页将允许用户选择页面1、2和3。
默认值(5行,10行,15行,...)......这很不错,但我想知道谁会需要它。表格应该填充高度,并根据行数和可用高度计算分页......它可能会......但我不知道,如何。
第一个

请回答

请参阅this other link。我们让表格填满了高度,但同时也扩展了预设的v卡高度。这在另一个线程中讨论和解决(重点是保持高度,并在大小改变时重新分页)。

fnvucqvd

fnvucqvd1#

对于您的身高问题,我建议使用v-data-iterator,因为您可以完全自定义它的东西以外的原始数据。
至于你想让每页的条目都有响应的表,我想你可以结合vuetify的显示断点使用计算道具:
第一个
Codesandbox for example
如果我没有正确理解您的问题,请尝试制作一个包含问题的Codesandbox,以便我们更容易地帮助您:)

相关问题