vue 实现前端分页

vue 实现前端分页

<template>
   <div class="table">
     <el-table :data="dataShow" stripe style="width: 100%">
        <el-table-column prop="port" label="港口名称"></el-table-column>
        <el-table-column prop="bill_count" label="交易次数" sortable></el-table-column>
        <el-table-column prop="prop" label="交易占比" sortable :formatter="formatter"></el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope" size="small">
           <el-button type="text" @click="handleClick(scope.row)">查看详情</el-button>
        </template>
        </el-table-column>
      </el-table>

          <el-pagination
            class="page"
            background
            layout="prev,pager, next, jumper"
            :total="total>5000?5000:total"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
</template>
<script>
import { tradeList } from "../../../../api/table";
export default {
  data() {
    return {
      tableData: [],
      pageSize: 10,
      dataShow: [],
      currentPage: 1,
      total: 0
    };
  },
  methods: {
    handleSizeChange() {},
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllPort();
    },
    getAllPort() {
      this.loading = true;
      let data = {
        url: `/async/allport?id=${this.$route.query.urlId}&date_type=${this.tab}&key=${this.keywords}`
      };
      tradeList(data).then(res => {
        if (res.status == 1 && res.data.docs) {
          this.tableData = res.data.docs;
          this.total = res.data.total_bill_count;
          //重点：
          let begin = (this.currentPage - 1) * this.pageSize;
          let end = this.currentPage * this.pageSize;
          this.dataShow = this.tableData.slice(begin, end);
        } else {
          this.$message({
            message: "暂无数据",
            type: "error"
          });
        }
      });
    }
  },
  mounted() {
    this.getAllPort();
  }
};
</script>