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>
  1. size-change：pageSize 改变时会触发。
  2. current-change：currentPage 改变时会触发。
  3. current-page：当前页数。
  4. page-sizes：每页显示个数选择器的选项设置。[10, 20, 30, 40, 50, 100]
  5. page-size：每页显示条目个数。
  6. layout：组件布局，子组件名用逗号分隔。
  7. total：总条目数。

2.JS代码：

 1 <script>
 2 export default {
 3   name: "Content",
 4   data() {
 5     return {
 6       posts: [],
 7       loading: false,
 8 
 9       totals: 0,//总条目数
10       page_index: 1, //当前页
11       page_size: 5, //每页显示条数
12       page_sizes: [5, 10, 20, 40],//每页显示个数选择器的选项设置
13       allData: [],//所有数据
14     };
15   },
16   created() {
17     this.loading = true;
18     this.handleUserList();
19   },
20   methods: {
21     handleUserList() {
22       this.$http({
23         url: "https://cnodejs.org/api/v1/topics",
24         method: "get",
25         params: {
26           page: 1,
27           limit: 30,
28         },
29       })
30         .then((res) => {
31           if (res.data.success === true) {
32             this.posts = res.data.data;
33             this.loading = false;
34 
35             this.allData = res.data.data;
36             this.setPaginations();
37           } else {
38             console.log("get request failed!!");
39           }
40         })
41         .catch((err) => {
42           console.log("err:", err);
43         });
44     },
45     //填充数据
46     setPaginations() {
47       this.totals = this.allData.length;
48       this.page_index = 1;
49       this.page_size = 20;
50 
51       this.posts = this.allData.filter((item, index) => {
52         return index < this.page_size;
53       });
54     },
55     //每页显示条数
56     handleSizeChange(pageSize) {
57       this.page_index = 1;
58       this.page_size = pageSize;
59       this.posts = this.allData.filter((item, index) => {
60         return index < pageSize;
61       });
62     },
63     //当前页数
64     handleCurrentChange(page) {
65       let index = this.page_size * (page - 1);
66       let allData = this.page_size * page;
67       let dataList = [];
68       for (let i = index; i < allData; i++) {
69         if (this.allData[i]) {
70           dataList.push(this.allData[i]);
71         }
72         this.posts = dataList;
73       }
74     },
75   },
76 };
77 </script>

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/

posted @ 2021-08-25 17:22  Evengod  阅读(325)  评论(0)  编辑  收藏  举报