v-for中用elementUI实现分页

html

分页的内容

<el-aside style="width:49%;" v-for="(item, key, index)  in AirInfor.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="index"><p style="margin-bottom: 10px;"><span>区域：{{ key+1 }}</span></p><!-- 环境监测详情 --><ul><li><div><p>环境温度</p><p><span>{{ item.wendu }}</span>°C</p><p>23~31.5°C</p></div><div><img src="~@/assets/icon/wendu.png"></div></li><li><div><p>环境湿度</p><p><span>{{ item.shidu }}</span>°C</p><p>23~31.5°C</p></div><div><img src="~@/assets/icon/shuiliang.png"></div></li><li><div><p>光照强度</p><p><span>{{ item.guangzhao }}</span>°C</p><p>23~31.5°C</p></div><div><img src="~@/assets/icon/guangzhao.png"></div></li><li><div><p>PM2.5含量</p><p><span>{{ item.pm25 }}</span>°C</p><p>23~31.5°C</p></div><div><img src="~@/assets/icon/pm2.png"></div></li><li><div><p>甲醛含量</p><p><span>{{ item.jiaquan }}</span>°C</p><p>23~31.5°C</p></div><div><img src="~@/assets/icon/jiaquan.png"></div></li><li><div><p>报警次数</p><p><span>{{ item.jingao }}</span>°C</p><p>23~31.5°C</p></div><div><img src="~@/assets/icon/baojing.png"></div></li></ul></el-aside>

注意：

AirInfor.slice((currentPage-1) * pagesize, currentPage * pagesize)"

slice 方法是作用于数组的方法

分页

<!-- 分页按钮 --><div class="block" style="text-align: right;margin-top: 20px;"><!-- 总数量 total ， 每页数量 page-size ，当前页数 current-page --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[2, 4, 6, 8, 10]":page-size="pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div>

export default {data (){return {// 当前页数currentPage: 1,// 总数量 total: null,// 每页数量 pagesize: 2,// 获取不同空气指标对应楼层，不同区域的值AirInfor: [{wendu:'26',shidu: '49',guangzhao: '136',pm25:'29',jiaquan:'39',jingao:'136'},{wendu:'26',shidu: '49',guangzhao: '136',pm25:'29',jiaquan:'39',jingao:'136'},{wendu:'26',shidu: '49',guangzhao: '136',pm25:'29',jiaquan:'39',jingao:'136'}],}},created (){},mounted () {//   获取对象的长度var arr = Object.keys(this.AirInfor);this.total = arr.lengththis.getAirInformation(this.floor)},methods: {// 分页handleSizeChange(val) {this.pagesize = val// console.log(`每页 ${val} 条`);},handleCurrentChange(val) {this.currentPage = val// console.log(`当前页: ${val}`);},}
}

v-for中用elementUI实现分页相关推荐

基于node.js+MongoDB+elementui的分页接口以及页面实现
一.在准备分页之前,先搭好分页的组件. 这里我已经提前实现了对elementui中分页组件的二次封装,如果想参考分页组件二次封装,详情请看如下链接 ElementUI分页组件的封装_mingY的博客- ...
ElementUI 表格分页组件
ElementUI 表格分页组件 <template><div class="pagination"><el-paginationbackground ...
对elementui中分页组件进行二次封装
为什么二次封装一般在后台管理项目当中,页面功能涉及到的数据展示的地方会比较多,而其中却少不了表格,分页以及条件检索.如果代码是 copy 来又 copy 去,岂不是很没有技术含量. 而且每个项目的U ...
vue+element-ui el-pagination 分页后导出全部数据
vue+element-ui el-pagination 分页后数据无法全部导出 element-ui分页后的数据无法导出 nextTick方式 setTimeOut方式深拷贝方式总结 elem ...
vue element-ui之分页组件的封装
目录为什么要封装分页组件? 分页组件的封装如何使用? 为什么要封装分页组件? 分页组件用的最多的就是和表格一起,构成表格数据的翻页显示,当然也不仅限于表格,例如其它的流式加载.图片分批次加载等,都 ...
vue+Element-ui实现分页效果
当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui ...
mybatis-plus+springboot+vue+element-ui实现分页
第一步导入依赖 <dependency><groupId>com.github.pagehelper</groupId>< ...
Vue整合Element-UI的分页组件实现分页
前段时间在做一个系统后台,需要用表格加载显示后台数据项并分页显示. 分页可以通过不同的方式实现: 1.客户端分页一次请求把数据全部从后端请求回来,在前端处理,显示所需要的页面的数据项.这样做的好处是 ...
Vue + element-ui 实现分页功能完整流程
element-ui是前端使用较频繁的组件网站,我也比较喜欢使用element-ui开发前端页面,下面使用该组件实现前端分页的功能.elementui官网使用箭头所指的完整功能举个栗子 <di ...

v-for中用elementUI实现分页

分页的内容

注意：

分页

v-for中用elementUI实现分页相关推荐

最新文章

热门文章