如何修改Vuetify v-data-table分页并对接后端接口？

问题描述 #

需要修改Vuetify的v-data-table分页组件，为上一页、下一页按钮添加自定义逻辑，将分页与后端API联动。当前已使用v-data-table的相关属性，期望点击分页按钮时，把perPage参数附加到API接口/loggedInUser?page=中，现有代码如下：

模板代码 #

<v-data-table :headers="headers" :items="userDetails" :search="search" :items-per-page="perPage"
    :pagination.sync="pagination" :server-items-length="totalUsers" class="elevation-1"
>
    <template v-slot:[`item.type`]="{ item }">
      <div v-if="item.type == 1">
        <v-icon>mdi-account-circle</v-icon>
        Google User
      </div>
      <div v-if="item.type == 0">
        <v-icon>mdi-account-box</v-icon>
        Normal User
      </div>
    </template>
    <template v-slot:[`item.status`]="{ item }">
      <div v-if="item.status == 1">
        <v-icon style="color:green">mdi-checkbox-blank-circle </v-icon>
        Active
      </div>
      <div v-if="item.status == 0">
        <v-icon style="color:red">mdi-checkbox-blank-circle </v-icon>
        Inactive
      </div>
    </template>
    <template v-slot:[`item.action`]="{ item }">
      <div v-if="item.status == 1">
        <v-btn style="width: 118px;" color="red" class="white--text" v-on:click="Active(item.id)">
          De-Activate
        </v-btn>
      </div>
      <div v-if="item.status == 0">
        <v-btn style="width: 118px;" color="green" class="white--text" v-on:click="deActive(item.id)">
          Activate
        </v-btn>
      </div>
    </template>
  </v-data-table>

脚本代码 #

async getUser() {
  http.get("/loggedInUser?page=").then((response) => {
    console.log(response)
    console.log("ee", response.data)
    this.userDetails = response.data.users.data
    this.totalUsers = response.data.users.total
    this.perPage = response.data.users.per_page
    console.log("qq", this.totalUsers)
    
    this.userDetailss = this.userDetails.map((item) => item.status);
    console.log("1122222", this.userDetailss);
    console.log("ww", this.userDetails);
  });
}

解决方案 #

1. 定义分页状态并监听变化 #

在组件data中初始化pagination对象存储分页核心参数，通过watch监听参数变化，自动触发API请求。

2. 改造API请求方法 #

让getUser方法接收page和perPage参数，动态构造带分页参数的API地址，实现与后端的联动。

修改后的完整脚本代码 #

export default {
  data() {
    return {
      pagination: {
        page: 1,
        itemsPerPage: 10 // 初始每页条数，后续可同步后端返回值
      },
      userDetails: [],
      totalUsers: 0,
      perPage: 10,
      headers: [], // 此处填入你的表头定义
      search: ''
    }
  },
  watch: {
    // 深度监听分页参数变化
    pagination: {
      deep: true,
      handler() {
        this.getUser(this.pagination.page, this.pagination.itemsPerPage)
      }
    }
  },
  mounted() {
    // 页面初始化加载第一页数据
    this.getUser(this.pagination.page, this.pagination.itemsPerPage)
  },
  methods: {
    getUser(page, perPage) {
      // 构造包含分页参数的API请求地址
      http.get(`/loggedInUser?page=${page}&perPage=${perPage}`).then((response) => {
        this.userDetails = response.data.users.data
        this.totalUsers = response.data.users.total
        this.perPage = response.data.users.per_page
        // 同步分页组件的每页条数与后端返回值
        this.pagination.itemsPerPage = this.perPage
      }).catch(err => {
        console.error('数据加载失败:', err)
      })
    },
    // 保留原有业务方法
    Active(id) {
      // 你的激活/禁用逻辑
    },
    deActive(id) {
      // 你的激活/禁用逻辑
    }
  }
}

关键说明 #

• 借助pagination.sync实现双向绑定，分页组件的操作会自动更新pagination对象的page和itemsPerPage属性。
• 深度监听pagination变化，每次分页操作触发时自动拉取对应页的数据。
• API请求同时传递page和perPage参数，确保后端返回正确的分页数据集。
• 后端返回per_page后同步更新组件分页参数，保证前端显示与后端逻辑一致。

内容的提问来源于stack exchange，提问作者adarsh