分页展示
官网的拿过来就可以
<!-- 分页功能 -->
<el-pagination align="left" @size-change="SizeChange"
@current-change="CurrentChange" :current-page="queryInfo.pagenum"
:page-sizes="[1,2,5,10]" :page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
@size-change属性的意思是 绑定当前页数量的事件,当当前页数量变化时,触发SizeChange方法
@current-change 这个也是事件
:current-page 这个属性是绑定当前第几页
:page-size 这个属性绑定当前有几条数据
总之 分页代码就几行,但是事件比较多,事件方法里面的动作就是改变往后端传的分页大小的参数,并且刷新当前页面。
:total=“total” 这个是绑定一个变量保存数量总数
模糊查询列表
分页展示的时候,我们需要往后传page rows ,那么我们将我们要搜索的东西也放到往后传的实体里面,那么就可以在后端进行搜索就可以了。
具体做法是,将我们输入的东西放到变量里面,后端获取变量,
绑定以上的变量
以上是往后端传
后端只需要加一个判断就可以了,
清空输入框后,查询全部数据
只需要在清空输入框后调用一个事件就可以了,就是之前查询列表的方法就可以了