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中:
是调用的两个接口,一个是总的列表显示,另一个就是查询后的列表显示,
如果认证姓名与开始时间与结束时间都为空,就调用总的列表显示接口,如果不是就调用查询的接口,原因是因为要把查询的分页跟查询的列表连在一起
逻辑运算符:&(与),举个例子,(小明&小王)= 小张,就是说小明与小王都等于小张,为什么等于呢,我也不知道;
|(或) 这个顾名思义就是其中一个。
这里我们必须保证我们的搜索条件都为空,才调用总的接口, 就用的&
搜索按钮方法:
思路都是一样的,直接这样也可以
多加了一个,意思还是如果搜索条件为空,点击搜索按钮,显示的还是总的
返回按钮:
搜索之后点击返回到总的列表显示,同时清空输入