vue如何将获取到的数据进行分页

目录

使用vue实现分页

表单

分页模块

定义变量

定义返回给表单的数据

获取后端接口和有多少数据

使用vue实现分页

具体流程：首先我们获取后端接口数据，获取到的数据出存入tableData这个数组中，获取到的数据通过paginatedData这个方法，截取分页数据展示。然后我们使用element-ui提供的分页模块实现分页功能，可参考如下将定义的变量和分页模块中的数据绑定。

表单

<el-table :data="paginatedData" border height="750">

分页模块

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
:current-page.sync="currentPage" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper"
:total="total">
  </el-pagination>

定义变量

tableData: [],
currentPage: 1,
  pageSize: 10,
  total: 0,

定义返回给表单的数据

  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    },
  },

获取后端接口和有多少数据

    getList() {
      lsgetall().then(response => {
        //获取response.data是一个数组如何获取
        this.tableData = response.data;
        this.total = this.tableData.length
      })
    },

Demo

这个demo没有测试过，主要做参考（提供思路）

<template>
  <div>
    <div style="margin: 10px;">
      <el-table :data="paginatedData" border height="750">
        <el-table-column label="id" width="90">
          <template slot-scope="scope">
            {{ scope.$index +=1 }}
          </template>
        </el-table-column>
        <el-table-column prop="license_key" label="license_key" width="320">
        </el-table-column>
        <el-table-column prop="key_type" label="key_type" width="300">
        </el-table-column>
        <el-table-column prop="addcart_discord_webhook" label="加车链接" width="300">
        </el-table-column>
        <el-table-column prop="paysuccess_discord_webhook" label="成功链接" width="190">
        </el-table-column>
        <el-table-column prop="payfailed_discord_webhook" label="失败链接" width="300">
        </el-table-column>
        <el-table-column prop="hwid" label="机器码" width="300">
        </el-table-column>
      </el-table>
      <div class="center-container" style="margin-left: 30%;">
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
          :current-page.sync="currentPage" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

import { lsgetall } from '@/api/table';

export default {
  data() {
    return {
      tableData: [],
      idDataRow: [],
      idDataRow1: [],
      input: '',
      //抽屉参数
      dialog: false,
      loading: false,
      //抽屉参数
      dialog1: false,
      loading1: false,

      currentPage: 1,
      pageSize: 10,
      total: 0,
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    },
  },

  methods: {

    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },


    getList() {
      lsgetall().then(response => {
        //获取response.data是一个数组如何获取
        this.tableData = response.data;
        this.total = this.tableData.length
      })

  },
  created() {
    this.getList();
  },

}
</script>

<style scoped>
.demo-drawer__content {
  margin: 20px;
}
</style>