elementUI使用分页器以及搜索条件

<template>
  <div>
    <!--    搜索-->
    <div style="float: left">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
        <el-form-item label="操作用户">
          <el-input v-model="formInline.name" placeholder="操作人"></el-input>
        </el-form-item>
        <el-form-item label="操作页面">
          <el-select v-model="formInline.pages" placeholder="选择操作页面">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理方式">
          <el-select v-model="formInline.operator" placeholder="选择处理方式">
            <el-option label="删除" value="删除"></el-option>
            <el-option label="更新" value="更新"></el-option>
            <el-option label="新增" value="新增"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker type="date" placeholder="开始日期" v-model="formInline.date1"
                              format="yyyy 年 MM 月 dd 日"
                              value-format="yyyy-MM-dd"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-date-picker type="date" placeholder="结束日期" v-model="formInline.date2"
                              format="yyyy 年 MM 月 dd 日"
                              value-format="yyyy-MM-dd"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

    </div>

    <!--    展示-->
    <div>
      <el-table
          :data="tableData"
          stripe
          style="width: 100%">
        <el-table-column label="操作时间" width="400">
          <template v-slot="scope">
            {{ formatDateTime(scope.row.date) }}
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="操作用户"
            width="300"
        >
        </el-table-column>
        <el-table-column
            prop="operator"
            label="操作方式"
            width="300">
        </el-table-column>
        <el-table-column
            prop="page"
            label="操作页面">
        </el-table-column>
      </el-table>
    </div>
    <br><br>
    <div>
      <el-pagination
          background
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>

</template>

<script>
import axios from "axios";
import {showError, showSuccess} from "@/api/api";

export default {
  name: "OperationRecords",
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData: [{}],
      currentPage: 1,
      pageSize: 10,
      total: 0,


    }
  },


  mounted() {
    this.getRecords();
  },

  methods: {
    onSubmit() {
      this.currentPage=1
      this.getRecords();
    },

    getRecords() {
      const params = {
        limit: this.pageSize,
        page: this.currentPage,
        name: this.formInline.name,
        pages: this.formInline.pages,
        operator: this.formInline.operator,
        date1: this.formInline.date1,
        date2: this.formInline.date2
      };
      axios.get(this.$webSite + '/api/records_api/', {params}).then(response => {
        if (response.data.code === 200) {
          showSuccess(response.data.msg)
          this.tableData = response.data.data.items;
          this.total = response.data.data.total;
        } else {
          showError(response.data.msg)
        }
      }).catch(error => {
        console.log(error)
        showError("请求错误，请联系管理员处理！")
      })
    },

    // 换页
    handlePageChange(page) {
      this.currentPage = page;
      this.getRecords();
    },
    // 换页显示条数
    handleSizeChange(page) {
      this.pageSize = page;
      this.getRecords();
    },

    // 格式化日期显示
    formatDateTime(dateTimeStr) {
      const dateTime = new Date(dateTimeStr);
      const year = dateTime.getFullYear();
      const month = dateTime.getMonth() + 1;
      const day = dateTime.getDate();
      const hour = String(dateTime.getHours()).padStart(2, '0');
      const minute = String(dateTime.getMinutes()).padStart(2, '0');
      const second = String(dateTime.getSeconds()).padStart(2, '0');
      return `${year}年${month}月${day}日 ${hour}:${minute}:${second}`;
    },

  }
}
</script>

<style scoped>

</style>

说明：

本页面是一个数据展示及搜索共用页面，默认展示和搜索均为get 同一接口，需要注意的是在submit进行查询时，要先把current_page置为1，否则搜索结果不足当前页数时会报错！