Question

我的应用程序中出现一个问题，即我通过在日期选择器中选择一个日期来动态更改附加到数据表的数据集。我已经在附带的代码笔中使用一个功能相同的按钮模拟了此操作。该问题存在于Safari 12.0上，并且似乎在初始数据表的宽度小于数据集更改后的宽度时一致发生（可能需要将浏览器缩小到一半大小才能看到该问题）。滚动条不会出现在数据表的底部。这似乎仅在布局结构内发生，因为如果我删除app-> content-> container-> layout-> flex并仅具有数据表，则滚动条会正确显示。

<div id="app">
  <v-app>
    <v-content>
      <v-container fluid>
        <v-layout column>
          <v-flex> 
            <v-btn @click='updateItems' depressed small  color="red">Update</v-btn>
            <v-data-table :headers="headers" :items="desserts" class="elevation-1">
              <template slot="items" slot-scope="props">
                <td>{{ props.item.name }}</td>
                <td class="text-xs-right">{{ props.item.calories }}</td>
                <td class="text-xs-right">{{ props.item.fat }}</td>
                <td class="text-xs-right">{{ props.item.carbs }}</td>
                <td class="text-xs-right">{{ props.item.protein }}</td>
                <td class="text-xs-right">{{ props.item.iron }}</td>
              </template>
            </v-data-table>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

new Vue({
  el: '#app',
  data() {
    return {
  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: []
    }
  },
  methods: {
        updateItems() {
          let d = {
              value: false,
              name: 'ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ',
              calories: 159,
              fat: 6.0,
              carbs: 24,
              protein: 4.0,
              iron: '1%'
            }

          this.desserts.push(d)
        }
  }
})

https://codepen.io/admiralman/pen/LMMzPY

滚动条未出现在v-data-table中

0 个答案: