vue从后端获取到数据后，异步分页显示数据

首先，你需要在 Vue 组件中定义一个 data 属性，用于存储从后端获取到的数据和分页相关的信息，例如当前页码、每页显示的数据条数、总数据条数等。然后，你需要在组件的 mounted 钩子函数中调用后端接口获取数据，并将数据存储到 data 属性中。

接下来，你可以使用 element-ui 等 UI 组件库中的 el-pagination 组件来实现分页功能。在 el-pagination 组件中，你需要绑定 total 属性为总数据条数，page-size 属性为每页显示的数据条数，current-page 属性为当前页码。当用户点击分页按钮时，你需要监听 el-pagination 组件的 current-change 事件，并重新调用后端接口获取当前页码对应的数据。最后，将后端返回的数据更新到 data 属性中，即可实现异步分页显示数据。

以下是一个示例代码：

<template>
  <div>
    <el-table :data="tableData">
      <!-- ... 表格列的定义 ... -->
    </el-table>
    <el-pagination
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      total: 0, // 总数据条数
      pageSize: 10, // 每页显示的数据条数
      currentPage: 1, // 当前页码
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async loadData() {
      const response = await fetch('/api/data?page=' + this.currentPage + '&pageSize=' + this.pageSize);
      const { data, total } = await response.json();
      this.tableData = data;
      this.total = total;
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.loadData();
    },
  },
};
</script>