分页展示

官网的拿过来就可以

	<!-- 分页功能 -->
			<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 ,那么我们将我们要搜索的东西也放到往后传的实体里面,那么就可以在后端进行搜索就可以了。

具体做法是,将我们输入的东西放到变量里面,后端获取变量,


绑定以上的变量



以上是往后端传


后端只需要加一个判断就可以了,

清空输入框后,查询全部数据

只需要在清空输入框后调用一个事件就可以了,就是之前查询列表的方法就可以了