更新

src/views/company/index.vue

@@ -25,6 +25,17 @@
                 </template>
               </el-table-column>
             </el-table>
+            <el-col :span="24" class="page">
+              <el-pagination
+                background
+                @current-change="handleCurrentChange"
+                :current-page="currentPage"
+                layout="total, prev, pager, next, jumper"
+                :total="total"
+                :page-size="pageSize"
+              >
+              </el-pagination>
+            </el-col>
           </template>
         </el-col>
       </el-col>
@@ -48,6 +59,10 @@ export default {
   data: function() {
     return {
       list: [],
+      total: 0,
+      currentPage: 0,
+      pageSize: 10,
+      skip: 0,
     };
   },
   created() {
@@ -57,9 +72,11 @@ export default {
     ...company(['query', 'fetch', 'create', 'update', 'delete']),
     // 查询列表
     async search({ skip = 0, limit = 10, ...info } = {}) {
+      skip = this.skip;
       let res = await this.query({ skip, limit, ...info });
       if (this.$checkRes(res)) {
         this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
       }
     },
     async handleDelete(data) {
@@ -78,6 +95,10 @@ export default {
     handleEdit(data) {
       this.$router.push({ path: '/indexDetail', query: { id: data.id } });
     },
+    handleCurrentChange(currentPage) {
+      this.$set(this, `skip`, (currentPage - 1) * this.pageSize);
+      this.search();
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -85,4 +106,9 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.page {
+  text-align: center;
+  margin: 15px 0;
+}
+</style>

src/views/company/indexDetail.vue

@@ -104,6 +104,7 @@ export default {
       this.$refs[formName].validate(async valid => {
         if (valid) {
           let data = this.form;
+          console.log(data);
           if (data.id) {
             let res = await this.update(data);
             if (this.$checkRes(res)) {

src/views/lunbo/index.vue

@@ -20,6 +20,18 @@
                 </template>
               </el-table-column>
             </el-table>
+            <el-col :span="24" class="page">
+              <!-- current-page:当前页数 current-change触发当前页  page-size：每页显示条目个数 -->
+              <el-pagination
+                background
+                @current-change="handleCurrentChange"
+                :current-page="currentPage"
+                layout="total, prev, pager, next, jumper"
+                :total="total"
+                :page-size="pageSize"
+              >
+              </el-pagination>
+            </el-col>
           </el-col>
         </el-col>
       </el-col>
@@ -67,8 +79,13 @@ export default {
     return {
       dialogFormVisible: false,
       formLabelWidth: '120px',
-      form: {},
       list: [],
+      total: 0,
+      form: {},
+      currentPage: 0,
+      pageSize: 10,
+      // skip是第一页的第一条数据
+      skip: 0,
     };
   },
   created() {
@@ -77,9 +94,11 @@ export default {
   methods: {
     ...lunbo(['query', 'fetch', 'create', 'update', 'delete']),
     async search({ skip = 0, limit = 10, ...info } = {}) {
+      skip = this.skip;
       let res = await this.query({ skip, limit, ...info });
       if (this.$checkRes(res)) {
         this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
       }
     },
     async onSubmit() {
@@ -125,6 +144,11 @@ export default {
     uploadSuccess({ type, data }) {
       this.$set(this.form, `${type}`, data.uri);
     },
+    handleCurrentChange(currentPage) {
+      // skip是从第几条数据后开始显示
+      this.$set(this, `skip`, (currentPage - 1) * this.pageSize);
+      this.search();
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -132,4 +156,9 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.page {
+  text-align: center;
+  margin: 15px 0;
+}
+</style>