VXE 静态分页+导出功能

效果图

 导出功能很牛

output(){
        var result=this.initDate.filter(x => x.xmid.toUpperCase().lastIndexOf(this.queryData.xmbm.trim().toUpperCase()) > -1);
        this.$refs.xTable.exportData({
          types: ["xlsx"],
          modes: [ "all"],
          data:result,
          filename: "导出" + this.parseTime(new Date().getTime()),
        });
    },

分页+查找+导出

<template>

    <vxe-grid
      ref="xTable"
      auto-resize
      resizable
      size="mini"
      :align="'center'"
      height="auto"
      border
      show-footer
      show-overflow
      highlight-hover-row
      :data="tableData"
      :columns="tableColumn"
    >
      <template #toolbar>
        <vxe-form :data="queryData" size="small">
          <vxe-form-item title="项目编号" field="name" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.xmbm" placeholder="请输入" clearable></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item>
            <template #default>
              <vxe-button type="button" @click="search" status="primary">查询</vxe-button>
              <vxe-button type="button" @click="output">导出</vxe-button>
            </template>
          </vxe-form-item>
        </vxe-form>
      </template>
      <template #pager>
        <vxe-pager
          :loading="loading"
          :current-page="tablePage.currentPage"
          :page-size="tablePage.pageSize"
          :total="tablePage.totalResult"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="handlePageChange">
        </vxe-pager>
      </template>
    </vxe-grid>
</template>
<script>
import {guid} from "@/utils/tool"
import {delXmCl} from "@/api/xmxx/jbxx";
export default {
  name: "xmmx",
  data() {
    return {
      queryData: {
        xmbm: '',
      },
      initDate:[],
      tableData: [],
      loading: false,
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0
      },
      tableColumn: [
        { field: '_index', title: '#', width: 60 ,align:"center",fixed:"left"},
        { field: 'xmid', title: '项目编号', width: 150 ,align:"center",fixed:"left"},
        { field: 'gcmc', title: '项目名称', width: 150 ,align:"center",fixed:"left"},
        { field: 'deptname', title: '所属部门', width: 100 },
        { field: 'kgrq', title: '开工日期', width: 100 ,align:"center"},
        { field: 'jgrq', title: '竣工日期', width: 100 ,align:"center"},
        { field: 'jxsj', title: '结项日期', width: 100 ,align:"center"},
        { field: 'apdw', title: '安排单位', width: 100 ,align:"left"},
        { field: 'xmje', title: '项目金额', width: 100 ,align:"right"},
        { field: 'xmjl', title: '项目经理', width: 100 ,align:"left"},
        { field: 'gcnr', title: '项目概要', width: 100 ,align:"left"},
      ]
    };
  },

  methods: {
    search(){
      this.tablePage.currentPage = 1;
      this.getList();
    },
    output(){
        var result=this.initDate.filter(x => x.xmid.toUpperCase().lastIndexOf(this.queryData.xmbm.trim().toUpperCase()) > -1);
        this.$refs.xTable.exportData({
          types: ["xlsx"],
          modes: [ "all"],
          data:result,
          filename: "导出" + this.parseTime(new Date().getTime()),
        });
    },
    loadData(list) {
      for(var i=0;i<list.length;i++){
        list[i]._index=i+1;
      }
      this.initDate = list;
      this.getList();
    },
    handlePageChange ({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
      this.getList();
    },
    getList(){
      var result=this.initDate.filter(x => x.xmid.toUpperCase().lastIndexOf(this.queryData.xmbm.trim().toUpperCase()) > -1);
      this.tablePage.totalResult=result.length;
      this.tableData=result.slice((this.tablePage.currentPage - 1) * this.tablePage.pageSize, this.tablePage.currentPage * this.tablePage.pageSize);
    }
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/global.scss";
</style>