vue后台管理系统—— 模糊查询和列表分页展示

1.效果显示 👇

通过输入作品名称或者开始时间或者结束时间来显示数据列表，这里的三项选择可以输入其一，也可以都输入。

2.分页代码👇

用的是element组件，包括表格

上面的搜索：

<div class="personalident_top">
      <el-input class="personalident_topinput" v-model="realName" placeholder="请输入认证姓名"></el-input>
      <el-date-picker v-model="begin" type="date" placeholder="选择开始时间"></el-date-picker>
      <el-date-picker v-model="end" type="date" placeholder="选择结束时间"></el-date-picker>
      <el-button class="firmident_topbtn" @click="queryList(list)" type="primary">搜索</el-button>
      <el-button class="firmident_topbtn" @click="returnList()" type="success">返回</el-button>
    </div>

下面的分页：

 <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :total="total"
      :page-size="pageSize"
      :page-sizes="[5, 10, 20, 50, 100]"
      background
      style="padding: 30px 0; text-align: center;"
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
    ></el-pagination>

list数组就是显示到页面的数据

mounted方法把获取的数据赋值到list数组，显示到页面

methods中：

是调用的两个接口，一个是总的列表显示，另一个就是查询后的列表显示，
如果认证姓名与开始时间与结束时间都为空，就调用总的列表显示接口，如果不是就调用查询的接口，原因是因为要把查询的分页跟查询的列表连在一起

逻辑运算符：&（与），举个例子，（小明&小王）= 小张，就是说小明与小王都等于小张，为什么等于呢，我也不知道；

|（或） 这个顾名思义就是其中一个。

这里我们必须保证我们的搜索条件都为空，才调用总的接口， 就用的&

搜索按钮方法：

思路都是一样的，直接这样也可以

多加了一个，意思还是如果搜索条件为空，点击搜索按钮，显示的还是总的

返回按钮：
搜索之后点击返回到总的列表显示，同时清空输入