html

分頁(yè)的內(nèi)容

<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>區(qū)域：{{ key+1 }}</span></p><!-- 環(huán)境監(jiān)測(cè)詳情 --><ul><li><div><p>環(huán)境溫度</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>環(huán)境濕度</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>光照強(qiáng)度</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>報(bào)警次數(shù)</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 方法是作用于數(shù)組的方法

分頁(yè)

<!-- 分頁(yè)按鈕 --><div class="block" style="text-align: right;margin-top: 20px;"><!-- 總數(shù)量 total ， 每頁(yè)數(shù)量 page-size ，當(dāng)前頁(yè)數(shù) 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 {// 當(dāng)前頁(yè)數(shù)currentPage: 1,// 總數(shù)量 total: null,// 每頁(yè)數(shù)量 pagesize: 2,// 獲取不同空氣指標(biāo)對(duì)應(yīng)樓層，不同區(qū)域的值A(chǔ)irInfor: [{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 () {// 獲取對(duì)象的長(zhǎng)度var arr = Object.keys(this.AirInfor);this.total = arr.lengththis.getAirInformation(this.floor)},methods: {// 分頁(yè)handleSizeChange(val) {this.pagesize = val// console.log(`每頁(yè) ${val} 條`);},handleCurrentChange(val) {this.currentPage = val// console.log(`當(dāng)前頁(yè): ${val}`);},} }

總結(jié)

以上是生活随笔為你收集整理的v-for中用elementUI实现分页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。