javascript - Vuetify 数据表 : how to have an automatic number of rows per page (depending on the vertical space filled by the component)?

Question

我正在使用 Vuetify 及其惊人的数据表，但我找不到一种方法让数据表根据组件填充的垂直空间自动调整每页的行数(即，启用分页时) ？

以便在调整浏览器大小时，数据表会自动更改每页的行数。

是否有实现该目标的方法或解决方法？

Answer 1

是的，当我们调整页面大小时可以自动设置每页的行数

Here is the working code: https://codepen.io/chansv/full/PooOpJz

打开开发人员控制台并尝试调整窗口大小，它只是一个原型(prototype)或使其工作的方法，您可以将自己的逻辑添加到调整大小时的行为方式

https://codepen.io/chansv/pen/PooOpJz

<div id="app">
  <v-app id="inspire">
    <v-data-table
      id="dataTable"
      :headers="headers"
      :items="desserts"
      :items-per-page="itemsPerPage"
      :footer-props="footerProps"
      class="elevation-1"
    ></v-data-table>
  </v-app>
</div>



new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      itemsPerPage: 0,
      optionsLength: 6,
      footerProps: {'items-per-page-options': [5, 10,15, 30, 50, 100]},
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    }
  },
  methods: {
    updateTable() {
      var tableHeight = document.getElementById('dataTable').offsetHeight;
      this.itemsPerPage = parseInt(tableHeight/40);
      if (this.desserts.length < this.itemsPerPage) this.itemsPerPage = this.desserts.length;
      if (!this.footerProps['items-per-page-options'].includes(this.itemsPerPage)) {
        if (this.footerProps['items-per-page-options'].length == this.optionsLength) {
          this.footerProps['items-per-page-options'].unshift(this.itemsPerPage);
        } else {
          this.footerProps['items-per-page-options'].shift();
          this.footerProps['items-per-page-options'].unshift(this.itemsPerPage);
        }
      }
    },
  },
  created() {
    this.updateTable();

    var self = this;
    window.onresize = function(event) {
      self.updateTable();
    };
  },
})