Vue element 分页
1.添加element分页：https://element.eleme.cn/#/zh-CN/component/pagination
1 <el-pagination 2 @size-change="handleSizeChange" 3 @current-change="handleCurrentChange" 4 :current-page="page_index" 5 :page-sizes="page_sizes" 6 :page-size="page_size" 7 layout="total, sizes, prev, pager, next, jumper" 8 :total="totals"> 10 el-pagination>
-
size-change：pageSize 改变时会触发。 -
current-change：currentPage 改变时会触发。 -
current-page：当前页数。 -
page-sizes：每页显示个数选择器的选项设置。[10, 20, 30, 40, 50, 100] -
page-size：每页显示条目个数。 -
layout：组件布局，子组件名用逗号分隔。 -
total：总条目数。
2.JS代码：
1
3.完整代码：
1 <template> 2 <div> 3 <el-container> 4 <el-main> 5 <div class="PostList"> 6 <div 7 class="loading" 8 v-if="loading" 9 v-loading="loading" 10 element-loading-text="拼命加载中" 11 element-loading-spinner="el-icon-loading" 12 element-loading-background="rgba(0, 0, 0, 0.8)" 13 > 14 div> 15 <div class="posts" v-else> 16 <ul> 17 <li v-for="(post, index) in posts" :key="index"> 18 <router-link 19 :to="{ 20 name: 'user_info', 21 params: { name: post.author.loginname }, 22 }" 23 :title="post.author_id" 24 > 25 <img 26 :src="post.author.avatar_url" 27 :title="post.author.loginname" 28 /> 29 router-link> 30 <span> {{ post.reply_count }}/{{ post.visit_count }} span> 31 <router-link 32 target="_blank" 33 :to="{ 34 name: 'post_content', 35 params: { id: post.id, name: post.author.loginname }, 36 }" 37 :title="post.title" 38 > 39 {{ post.title }} 40 router-link> 41 <span class="last_reply"> 42 {{ post.last_reply_at.split("T")[0] | formatDate }} 43 span> 44 li> 45 ul> 46 <div style="text-align: center"> 47 <el-pagination 48 @size-change="handleSizeChange" 49 @current-change="handleCurrentChange" 50 :current-page="page_index" 51 :page-sizes="page_sizes" 52 :page-size="page_size" 53 layout="total, sizes, prev, pager, next, jumper" 54 :total="totals" 55 > 56 el-pagination> 57 div> 58 div> 59 div> 60 el-main> 61 el-container> 62 div> 63 template> 64 65 <script> 66 export default { 67 name: "Content", 68 data() { 69 return { 70 posts: [], 71 loading: false, 72 73 totals: 0, //总条目数 74 page_index: 1, //当前页 75 page_size: 5, //每页显示条数 76 page_sizes: [5, 10, 20, 40], //每页显示个数选择器的选项设置 77 allData: [], //所有数据 78 }; 79 }, 80 created() { 81 this.loading = true; 82 this.handleUserList(); 83 }, 84 methods: { 85 handleUserList() { 86 this.$http({ 87 url: "https://cnodejs.org/api/v1/topics", 88 method: "get", 89 params: { 90 page: 1, 91 limit: 30, 92 }, 93 }) 94 .then((res) => { 95 if (res.data.success === true) { 96 this.posts = res.data.data; 97 this.loading = false; 98 99 this.allData = res.data.data; 100 this.setPaginations(); 101 } else { 102 console.log("get request failed!!"); 103 } 104 }) 105 .catch((err) => { 106 console.log("err:", err); 107 }); 108 }, 109 //填充数据 110 setPaginations() { 111 this.totals = this.allData.length; 112 this.page_index = 1; 113 this.page_size = 20; 114 115 this.posts = this.allData.filter((item, index) => { 116 return index < this.page_size; 117 }); 118 }, 119 //每页显示条数 120 handleSizeChange(pageSize) { 121 this.page_index = 1; 122 this.page_size = pageSize; 123 this.posts = this.allData.filter((item, index) => { 124 return index < pageSize; 125 }); 126 }, 127 //当前页数 128 handleCurrentChange(page) { 129 let index = this.page_size * (page - 1); 130 let allData = this.page_size * page; 131 let dataList = []; 132 for (let i = index; i < allData; i++) { 133 if (this.allData[i]) { 134 dataList.push(this.allData[i]); 135 } 136 this.posts = dataList; 137 } 138 }, 139 }, 140 }; 141 script> 142 143 <style > 144 body { 145 margin: 0; 146 padding: 0; 147 } 148 149 .el-menu-vertical-demo:not(.el-menu--collapse) { 150 width: 200px; 151 min-height: 400px; 152 } 153 154 ::-webkit-scrollbar { 155 width: 6px; 156 background-color: #ffffff; 157 } 158 159 ::-webkit-scrollbar-track { 160 -webkit-box-shadow: #bfbfbf; 161 background-color: #ffffff; 162 } 163 164 ::-webkit-scrollbar-thumb { 165 border-radius: 30px; 166 background-color: #615b5b49; 167 } 168 169 .PostList .posts { 170 background-color: white; 171 padding: 0.5rem; 172 margin: 0.5rem 3rem; 173 } 174 .PostList .posts li { 175 list-style: none; 176 margin-bottom: 14px; 177 border-bottom: 1px solid #e7e7e7; 178 line-height: 30px; 179 } 180 .PostList .posts ul li img { 181 width: 1.5rem; 182 height: 1.5rem; 183 } 184 .PostList .posts li span { 185 display: inline-block; 186 text-align: center; 187 width: 70px; 188 font-size: 12px; 189 margin: 0 10px; 190 } 191 .PostList .posts a { 192 text-decoration: none; 193 color: inherit; 194 -o-text-overflow: ellipsis; 195 white-space: nowrap; 196 display: inline-block; 197 vertical-align: middle; 198 overflow: hidden; 199 text-overflow: ellipsis; 200 max-width: 70%; 201 } 202 .PostList .posts a:visited { 203 color: #858585; 204 } 205 .PostList .posts .last_reply { 206 float: right; 207 font-size: 0.7rem; 208 margin-top: 0.3rem; 209 } 210 style>
接口数据来自cnode社区demo：https://cnodejs.org/