v-data-table 未显示所有行

Posted 2023-02-22

【中文标题】v-data-table 未显示所有行

【英文标题】：v-data-table not showing all the rows

【发布时间】：2021-07-20 02:23:18

【问题描述】：

我正在使用 vuetify v-data-table 组件。我在这里面临的问题是最后一行没有显示。现在我得到的输出是

James
Jack
William
Ross

但实际输出显示是

James
Jack
William
Ross
Jimmy

如果我从 fetchUser 方法中删除 unshift 代码，那么我会得到

Jack
William
Ross
Jimmy

所以基本上它只显示 4 个项目，但实际上应该是 5 个项目。如果我在控制台中检查用户数组，它会显示所有 5 条记录，但在 v-data-table 中它只显示 4 行。请帮我找出哪里出错了。

 <template>
    <div class="table-layout">
      <v-data-table
        :headers="headers"
        :items="users"
        :hide-default-footer="true"
        class="user-table"
      >
        <template slot="item" slot-scope="props">
          <tr>
            <td> props.item.name </td>
          </tr>
        </template>
      </v-data-table>
    </div>
</template>

<script>
  export default 
    components: 
    ,
    data: function() 
      return 
        headers: [
          
            text: ' ',
            sortable: false,
            value: 'name'
          
        ],
        users: []
      ;
    ,
    created: function() 
      this.fetchUsers();
    ,
    methods: 
      fetchUsers()
        var url = '/users.json';
        this.$axios.get(url)
        .then(response => 
          this.users = response.data
          this.users.unshift(
            name: 'James'
          );
        )
      
    
  ;
</script>

【参考方案1】：

<template>
    <div class="table-layout">
      <v-data-table
        :headers="headers"
        :items="users"
        :hide-default-footer="true"
        class="user-table"
        disable-pagination
      >
        <template slot="item" slot-scope="props">
          <tr>
            <td> props.item.name </td>
          </tr>
        </template>
      </v-data-table>
    </div>
</template>

向 v-data-table 添加禁用分页解决了我的问题。