无数据部分首先加载，然后显示 v-data-table 中的数据

Question

我正在使用 vuetify v-data-table 来显示数据。我在这里面临的问题是 No Settings Yet 消息总是显示 1 秒，然后显示数据。它就像没有数据消息首先加载，然后显示实际数据。有没有办法解决这个问题。

<template>
  <div>
          <v-card>
              <v-data-table
                :headers="headers"
                :items="settings"
                hide-default-footer
                disable-pagination
                :mobile-breakpoint="0">

                <template slot="top" v-if="isLoading">
                  <v-progress-linear
                      indeterminate
                      color="red"
                  ></v-progress-linear>
                </template>

                <template slot="item" slot-scope="props">
                  <tr>
                    <td>{{ props.item.name }}</td>
                    <td>{{ props.item.value }}</td>
                </tr>
              </template>
              <template slot="no-data" >
                <v-alert id='no-data' :value="true" color="error" icon="warning">
                  No Settings Yet
                </v-alert>
              </template>
            </v-data-table>
          </v-card>
  </div>
</template>

<script>

  export default {
    data: function() {
      return {
        settings: [],
        headers: [
          { text: 'Name', value: 'name'},
          { text: 'Value', value: 'value'},
          { text: 'Actions', sortable: false}
        ],
        isLoading: false
      }
    },
    created() {
      this.fetchSettings();
    },
    
    methods: {
      fetchSettings() {
        var that = this;

        that.isLoading = true;
        this.$axios.get('/settings.json')
        .then(response => {
          that.settings = response.data;
          that.isLoading = false;
        });
      }
    }
  }
</script>

Answer 1

我想你可以通过在 no-data 槽中添加 v-if 指令来做到这一点，如下例

            <template slot="no-data" v-if="!isLoading">
            <v-alert id='no-data' :value="true" color="error" 
               icon="warning">
              No Settings Yet
            </v-alert>
          </template>

Answer 2

从 v-data-table 的角度来看，您的情况只有两种状态：数据存在或不存在 （然而）。这就是 no-data 插槽在加载时始终可见的原因。

如果您想在此插槽中同时显示“正在加载”消息和“尚未设置”警报，您可以这样做：

<v-data-table
  :headers="headers"
  :items="desserts"
  :search="search"
  hide-default-footer
  disable-pagination
  :mobile-breakpoint="0"
>
  <template #top>
    <v-progress-linear
      v-show="isLoading"
      indeterminate
      color="red"
    />
  </template>
  <template #no-data>
    <v-alert v-show="!isLoading" :value="true" color="error" icon="warning">
      No Settings Yet
    </v-alert>
    <span v-show="isLoading">Loading...</span>
  </template>
</v-data-table>

检查 this CodePen playground 以获得更好的理解。在那里您还可以了解 no-data 和 no-results 插槽之间的区别。

无数据部分首先加载，然后显示 v-data-table 中的数据

no-data section loads first and then shows the data in v-data-table

javascript

vuejs2

vuetify.js