增肌模板分页

src/views/templates/ztjy/list.vue

@@ -9,6 +9,7 @@
           <div class="listtime">{{ i.createAt | dates }}</div>
         </li>
       </ul>
+      <el-pagination class="pagination" @current-change="handleCurrentChange" :current-page.sync="page" :page-size="size" layout="prev, pager, next, jumper" :total="listTotal"></el-pagination>
     </div>
   </div>
 </template>
@@ -24,9 +25,10 @@ export default {
   },
   data() {
     return {
-      pageSize: 10,
       menu: {},
-      code: ''
+      code: '',
+      size: 10,
+      page: 0
     };
   },
   async mounted() {
@@ -37,10 +39,14 @@ export default {
   },
   methods: {
     ...mapActions(['contentsList', 'menusQueryAll']),
+    async handleCurrentChange(e) {
+      console.log(e, 'eee');
+      this.page = e;
+      await this.filterQuery();
+    },
     // 查询函数
-    async filterQuery ({ filter = {}, paging = { page: 0, size: 10 } } = {}) {
-      filter.bind = this.$route.params.code;
-      await this.contentsList({ filter, paging });
+    async filterQuery () {
+      await this.contentsList({ filter: { bind: this.$route.params.code }, paging: { page: this.page - 1, size: this.size } });
     },
     // 列表点击
     detailsClick(e) {
@@ -123,4 +129,17 @@ export default {
   text-align: right;
   float: right;
 }
+.pagination {
+  margin: 0 auto;
+  width: 30%;
+  margin-bottom: 2vh;
+}
+</style>
+<style>
+.el-pagination button {
+  background-color: transparent !important;
+}
+.el-pagination li {
+  background-color: transparent !important;
+}
 </style>