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>
js
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}`);},}
}
)
