介绍 & lt; el-card>
& lt; div类=癰lock"祝辞
& lt;跨度比;
& lt;跨类=癲emonstration"=& # 39;风格margin-right: 10 px # 39;比;
开始日期
& lt;/span>
& lt; el-date-picker v模型=皏alue1"类型=癲atetime"
占位符=把≡袢掌凇?格式=皔yyy-MM-dd HH: mm: ss"
value-format=皔yyy-MM-dd hh: mm: ss"比;
& lt;/el-date-picker>
& lt;/span>
& lt;跨度比;
& lt;跨类=癲emonstration"=& # 39;风格margin-right: 10 px # 39;比;
截止日期& lt;/span>
& lt; el-date-picker v模型=皏alue2"类型=癲atetime"
占位符=把≡袢掌凇?value-format=皔yyy-MM-dd HH: mm: ss"
格式=皔yyy-MM-dd hh: mm: ss"比;
& lt;/el-date-picker>
& lt;/span>
& lt; el-button类型=皃rimary"
@click=發ineCrodList"比;
搜索
& lt;/el-button>
& lt;/div>
& lt; el-table:数据=https://www.yisu.com/zixun/" lineData ">
& lt; el-pagination @size-change=癶andleSizeChange"@current-change=癶andleCurrentChange":当前页面=癱urrentPage"
:页面大??1、2、5、10)“;:页面大?皃ageSize"
布局=白堋⒋笮∩弦灰?寻呼机,接下来,jumper"
:总=皌otal"比;
& lt;/el-pagination> & lt; script>
出口默认{
数据(){
返回{
value1: & # 39; & # 39;
value2: & # 39; & # 39;
lineData: [],
用户名:& # 39;& # 39;
总:0,//实现动态绑定
页大小:2
当前页:1、
}
},
方法:{//当改变每页显示条数的选择器时会触发的事件
handleSizeChange(大小){//每页显示的数量是我们选择器选中的值的大小
这一点。页大?大小;
console.log (this.pageSize);//每页下拉显示数据
this.lineCrodList ();
},//当改变当前页数的时候触发的事件
handleCurrentChange (currentPage) {
这一点。当前页=当前页;
console.log (this.currentPage);//点击第几页
this.lineCrodList ();
},//获取用户上机记录的信息分页
异步lineCrodList () {//调用获取数总数据的方法
this.counttotal ();
等待。美元http.post(& # 39;/线/SelectInfo& # 39;, {
用户名:this.username,
alt="在Vue项目中使用Element-UI如何实现一个分页显示效果">
在Vue项目中使用Element-UI如何实现一个分页显示效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
当我们从后端返回的数据量很大,并且根据需求我们需要将返回的数据全部都显示在页面中,默认情况下会把所有的数据全部显示在一个页面,这样非常影响视觉和页面的使用,所以需要使用分页
我这次使用的是Vue4.0 +,Element-UI组件,Element-UI库非常的丰富,它提供了一个分页组件分页
<强>展示效果:这个是获取两个时间段的上机记录
HTML部分:
分页控件的代码如下:,
<强>解析:
这个是一个方法,当在页面改变每页显示的条数时,会触发该方法
点击当前页改变的时候会触发该方法
当前页数
个数选择器的选项设置
每页显示的条数
总数据数量
JS代码:
