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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。