element-ui表格+分頁器資料分頁展示
阿新 • • 發佈:2019-01-24
https://blog.csdn.net/qwe502763576<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> <style type="text/css"> #app{ width: 80%; margin: auto; } .el-table td{ padding: 0; } .el-pagination{ text-align: right; } </style> </head> <body> <div id="app"> <el-table :data="list.slice((currpage - 1) * pagesize, currpage * pagesize)" border style="width: 100%"> <el-table-column type="index" label="序號"> </el-table-column> <el-table-column label="圖片"> <template slot-scope="scope"> <img :src="scope.row.image" width="40" height="40"/> </template> </el-table-column> <el-table-column prop="name" label="商品名稱"> </el-table-column> <el-table-column prop="goodsId" label="ID"> </el-table-column> <el-table-column prop="price" label="價格"> </el-table-column> </el-table> <el-pagination background layout="prev, pager, next, sizes, total, jumper" :page-sizes="[5, 10, 15, 20]"//每頁展示條選擇元件 :page-size="pagesize"//每頁展示條 :total="list.length" @current-change="handleCurrentChange" // currentPage改變時會觸發 @size-change="handleSizeChange" //pagesize改變時觸發 > </el-pagination> </div> <script type="text/javascript"> Vue.use(ELEMENT) axios.defaults.baseURL = 'https://www.easy-mock.com/mock/5ae417e4985d63275b55e177/luckLin' axios.defaults.timeout = 1000 new Vue({ el: '#app', data: { msg: 8888, list: [], pagesize: 10, currpage: 1 }, methods: { getlist() { let starttime = new Date(); axios('/mockDrink').then(data => { console.log(new Date() - starttime) this.list = data.data.data; }).catch(err => { console.error(err) this.$alert('請求超時,重新整理重試!') }) }, handleCurrentChange(cpage) { this.currpage = cpage; }, handleSizeChange(psize) { this.pagesize = psize; } }, mounted() { this.getlist() } }) </script> </body> </html>