Question

我有一个vuetify数据表，其中该表与（自定义）过滤后的项目绑定在一起。

   <template>
    <v-data-table
            :headers="headers"        
            :items="filteredItems"                
            :search="search"
            no-data-text="No data available."     
            hide-actions        
            class="elevation-1"     
            :total-items="pagination.totalItems"        
            :rows-per-page-items="[20, 20]"
          >
    ...
  <template slot="pageText" slot-scope="{ pageStart, pageStop }">
        From {{ pageStart }} to {{ pageStop }}
      </template>
    </template>
</v-data-table> 
      <div class="text-xs-center pt-2">
        <v-pagination v-model="pagination.page" :length="pages"></v-pagination>
      </div>

    <script>
    ...
    export default {
      data() {
        return {
          menu: "",
          pagination: {
            page: 1,
            rowsPerPage: 10,
            totalItems: 0
          },
        ...
          formatted: "",
          search: "",
          items: [],
          type: "",
          ...

        };
      },


      computed: {

        computedPagination() {
          return this.pagination;
        },
        filteredItems() {
          return this.items.filter(i => {
            return (
              (!this.type || i.Type === this.type) &&
              (this.filteredAge === "" ||
                this.filteredAge === 0 ||
                i.Age < this.filteredAge) &&
                this.alumni === "" || i.alumni === this.alumni);
          });
        },
    ...
    </script>

（我通过单独的方法获取数据并填充“ items”数组，在上面的代码中省略了该方法）

即使定义了分页，它也可以按预期方式工作（它只显示数据表下方的图标，而没有任何操作）。

是因为filteredItems或其他任何配置丢失？

谢谢

Answer 1

这是因为您有 pagination.totalItems ：0。当组件mount（）为 filteredItems.lenght 或items.lenght

时，您需要初始化 pagination.totalItems 。

mounted(){
   this.pagination.totalItems = items.length;
},

分页在已过滤项目中不起作用Vuetify数据表

1 个答案: