vxetable实现前端分页

谁借莪１个温暖的怀抱￠ 2023-01-13 10:50 223阅读 0赞

直接上代码吧

<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>