1.实施方式

src/components/setting_list/implement_type/implement_type_list.vue

@@ -12,7 +12,7 @@
         <el-alert title="" type="info">
           <BreadCrumb name="实施阶段"></BreadCrumb>
         </el-alert>
-        <el-table :data="list" border stripe style="width: 100%;margin-top:20px;">
+        <el-table :data="result.list" border stripe style="width: 100%;margin-top:20px;">
           <el-table-column prop="type" align="center" label="实施阶段">
           </el-table-column>
           <el-table-column prop="description" align="center" label="备注">
@@ -26,6 +26,10 @@
            </template>
           </el-table-column>
         </el-table>
+        <Pagenation
+          @update:pager="pager => {updatePage(pager)}"
+          :total="result.pagenation.totalcount">
+        </Pagenation>
       </div>
     </div>
     <FormModal ref="formModal"></FormModal>
@@ -35,6 +39,7 @@
 import SearchHeader from '../../common/searchHeader'
 import BreadCrumb from '../BreadCrumb'
 import FormModal from '../implement/modal'
+import Pagenation from '../pagenation'
 import {
   requestAPI,
   api
@@ -45,12 +50,24 @@ export default {
   components: {
     SearchHeader,
     BreadCrumb,
+    Pagenation,
     FormModal
   },
 
   data () {
     return {
-      list: []
+      pagenation: {
+        thispage: 1,
+        pagesize: 20
+      },
+      result: {
+        list: [],
+        pagenation: {
+          totalcount: 1,
+          thispage: 1,
+          pagesize: 20
+        }
+      }
     }
   },
 
@@ -59,15 +76,23 @@ export default {
   },
 
   methods: {
-    getList () {
-      requestAPI(api.getListimplementType, {})
+    getList (params) {
+      requestAPI(api.getListimplementType, params)
         .then((res) => {
-          this.list = res.list
+          this.result.list = res.list
+          this.result.pagenation = res.pagenation
         })
     },
 
+    updatePage (pager) {
+      let ret = Object.assign({
+        page: this.pagenation.thispage
+      }, {page: pager.thispage})
+      this.getList(ret)
+    },
+
     _reload () {
-      this.getList()
+      this.getList({page: this.pagenation.thispage})
     },
 
     // 6.1新增

src/components/setting_list/pagenation.vue

+<template>
+  <section class="pull-right">
+    <el-pagination v-if="total > 0" class="mb20 mt20"
+      background
+      @current-change="handleCurrentChange"
+      :current-page="pager.thispage"
+      :page-sizes="[10, 20, 40, 60, 80, 100]"
+      :page-size="pager.pagesize"
+      layout="total, prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
+  </section>
+</template>
+<script>
+export default {
+
+  props: {
+    total: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data () {
+    return {
+      pager: {
+        thispage: 1,
+        pagesize: 20,
+        totalcount: 0
+      }
+    }
+  },
+
+  created () {
+    this.$emit('update:pager', this.pager)
+  },
+
+  methods: {
+    handleCurrentChange (val) {
+      this.pager.thispage = val
+      this.pager.totalcount = this.total
+      this.$emit('update:pager', this.pager)
+    }
+  }
+}
+</script>
+<style scoped>
+</style>