vxetable实现前端分页

直接上代码吧

<template>
  <div>
    <page-wraper>
      <a-modal
        title="详情"
        v-model="visible"
        @ok="visible = !visible"
        @cancel="visible = !visible"
        width="900px"
        :destroyOnClose="true"
        :maskClosable="false"
      >
        <vxe-table
          border
          show-overflow
          ref="dataTable"
          height="460"
          :data="tableData"
          :columns="columns"
          :head-toolbar="headToolbar"
          :pager-config="pagerConfig"
          :seq-config="{
            startIndex: (pagerConfig.currentPage - 1) * pagerConfig.pageSize
          }"
          @page-change="handlePageChange"
        >
        </vxe-table>
      </a-modal>
    </page-wraper>
  </div>
</template>

<script>
import ticketNoteApi from "@/api/ticketNote";

export default {
  name: "BusinessUnit",
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      visible: false,
      modal: {},
      form: {},
      tableData: [],
      id: "",
      detailData: [],
      pagerConfig: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      headToolbar: {
        search: {
          layout: "inline",
          titleWidth: "auto",
          // foldingLayout:"flex",
          on: {
            submit: values => {
              this.frontFilter(values);
            }
          },
          items: [
            {
              field: "userName",
              title: "使用人姓名",
              itemRender: {
                name: "a-input",
                props: { placeholder: "请输入名称" }
              }
            },
            {
              field: "status",
              title: "状态",
              itemRender: {
                name: "a-select",
                props: {
                  placeholder: "请选择性别",
                  showSearch: true,
                  defaultField: "isSelected",
                  valueField: "id",
                  labelField: "name",
                  param: { code: "TicketNoteDetailStatusType" }
                }
              }
            }
          ]
        }
      },
      columns: [
        { type: "seq", title: "序号", width: 50 },
        {
          field: "ticketYear",
          title: "票据年份",
          sortable: true,
          width: 100
        },
        {
          field: "serialValue",
          title: "原始流水值",
          align: "left",
          sortable: true,
          width: 100
        },
        {
          field: "ticketSerialNo",
          title: "票据流水号",
          sortable: true,
          width: 100
        },
        {
          field: "applyUserName",
          title: "使用人姓名",
          sortable: true,
          width: 100
        },
        {
          field: "applyTime",
          title: "使用时间",
          sortable: true,
          width: 100
        },
        {
          field: "status",
          title: "状态",
          sortable: true,
          width: 100
        },
        {
          field: "cancelUserName",
          title: "取消作废人姓名",
          sortable: true,
          width: 100
        },
        {
          field: "cancelTime",
          title: "取消作废时间",
          sortable: true,
          width: 100
        }
      ]
    };
  },
  created() {},
  methods: {
    show(id) {
      this.visible = true;
      this.id = id;
      ticketNoteApi
        .getDetail({
          id: id
        })
        .then(res => {
          this.loading = false;
          this.detailData = this.splitArr(
            res.data.detailList,
            this.pagerConfig.pageSize
          );
          this.pagerConfig.total = res.data.detailList.length;
          this.handlePageChange({ ...this.pagerConfig });
        });
    },
    handlePageChange({ currentPage, pageSize }) {
      this.pagerConfig.currentPage = currentPage;
      this.pagerConfig.pageSize = pageSize;
      this.tableData = this.detailData[currentPage - 1];
    },
    splitArr(ar, size = 1) {
      let index = 0;
      let res = [];
      while (index < ar.length) {
        res.push(ar.slice(index, index + size));
        index += size;
      }
      return res;
    }
  }
};
</script>

<style scoped></style>