vue简单页面，分页插件 表格

日常记录vue代码

<template>
  <div class="app-container">
    <div style="font-size:15px">资料管理 > 订单管理</div>
    <hr />
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="申请批次号">
        <el-input v-model="applicationNumber" placeholder="申请批次号"></el-input>
      </el-form-item>
      <el-form-item label="下单时间">
        <!-- 值：{{ time1 }} -->
        <el-date-picker
          v-model="time1"
          type="date"
          placeholder="开始日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          @change="changetime1"
        ></el-date-picker>
        <span class="demonstration">至</span>
        <!-- 值：{{ time2 }} -->
        <el-date-picker
          v-model="time2"
          type="date"
          placeholder="结束日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          @change="changetime2"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryStatus">查询</el-button>
        <el-button type="primary" @click="applyDownload">申请导出</el-button>
      </el-form-item>
    </el-form>
    <div class="app-container">
      <el-table :data="tablecheckData" border style="width: 100%">
        <el-table-column prop="createTime" label="申请时间" width="180"></el-table-column>
        <el-table-column prop="batchNumber" label="申请批次号" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.status===0">文件生成中</span>
            <span v-if="scope.row.status===1">申请查询失败</span>
            <span v-if="scope.row.status===2">文件已生成</span>
          </template>
        </el-table-column>
        <el-table-column prop="filePath" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.row)"
              v-if="scope.row.status==2"
            ><a href="www.baidu.com" target="_blank">导出</a></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页插件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="sizes, prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      // result:true,
      currentPage: 1, //第一页
      pageSize: 10,
      total: 0,
      time1: "",
      time2: "",
      applicationNumber: "",
      tablecheckData: [
        // {
        //   createTime:"",
        //   batchNumber:null,
        //   status:""
        // },
      ],
      formInline: {
        user: "",
        region: ""
      },
      enterpriseId: null
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  created() {
    this.enterpriseId = this.userInfo.id;
  },
  methods: {
    queryStatus() {
      console.log(this.applicationNumber);
      console.log(this.time1);
      console.log(this.time2);
      console.log(this.enterpriseId);
      if (
        this.enterpriseId == "" ||
        this.enterpriseId == null ||
        this.enterpriseId == undefined
      ) {
        alert("企业ID不能为空");
      } else {
        this.$ajax
          .post(
            "/plat/queryenterorder",
            {
              batchNumber: this.applicationNumber,
              enterpriseId: this.enterpriseId,
              createBeginTime: this.time1,
              createEndTime: this.time2,
              pageNum: this.currentPage,
              pageSize: this.pageSize
            }
            // ,{"pageNum":this.currentPage},{"pageSize":this.pageSize}
          )
          .then(response => {
            console.log(response.data.data);
            this.tablecheckData = response.data.data.data;
            this.total = response.data.data.totalCount;
            // console.log(this.tablecheckData.length);
            // for (var i = 0; i < this.tablecheckData.length; i++) {
            //   if (0 == this.tablecheckData[i].status) {
            //     this.tablecheckData[i].status = "文件生成中";
            //   }
            //   if (1 == this.tablecheckData[i].status) {
            //     this.tablecheckData[i].status = "申请查询失败";
            //   }
            //   if (2 == this.tablecheckData[i].status) {
            //     this.tablecheckData[i].status = "文件已生成";
            //   }
            // }
          });
      }
    },
    applyDownload() {
      console.log(this.applicationNumber);
      console.log(this.enterpriseId);
      if (
        this.applicationNumber == "" ||
        this.applicationNumber == null ||
        this.applicationNumber == undefined
      ) {
        alert("申请批次号不能为空");
      } else {
        this.$ajax
          .post("/plat/queryOrderList", {
            batchNumber: this.applicationNumber,
            enterpriseId: this.enterpriseId
          })
          .then(response => {
            console.log(response.data);
            if ("HANDLING" === response.data.code) {
              alert(response.data.errMsg);
            }else if("1003"===response.data.code){
                alert(response.data.errMsg);
            }
            else if("1004"===response.data.code){
                alert(response.data.errMsg);
            }
            else if("0000"===response.data.code){
              this.queryStatus();
            }

            // this.merchantInfo = response.data.data;
            // var res = response.data.data;
          });
      }
    },
    changetime1() {},
    changetime2() {},
    handleEdit(scope) {
      console.log(scope);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.queryStatus();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryStatus();
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding-top: 0px;
}
</style>