diff --git a/src/pages/demo/business/table/1/componnets/TypeControl/index.vue b/src/pages/demo/business/table/1/componnets/BooleanControl/index.vue
similarity index 100%
rename from src/pages/demo/business/table/1/componnets/TypeControl/index.vue
rename to src/pages/demo/business/table/1/componnets/BooleanControl/index.vue
diff --git a/src/pages/demo/business/table/1/componnets/TypeControlMini/index.vue b/src/pages/demo/business/table/1/componnets/BooleanControlMini/index.vue
similarity index 100%
rename from src/pages/demo/business/table/1/componnets/TypeControlMini/index.vue
rename to src/pages/demo/business/table/1/componnets/BooleanControlMini/index.vue
diff --git a/src/pages/demo/business/table/1/componnets/PageFooter/index.vue b/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
index 9fa48b6e..75e5f573 100644
--- a/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
@@ -13,6 +13,17 @@
 
 <script>
 export default {
+  props: {
+    current: {
+      default: 1
+    },
+    size: {
+      default: 100
+    },
+    total: {
+      default: 400
+    }
+  },
   data () {
     return {
       page: {
@@ -24,10 +35,10 @@ export default {
   },
   methods: {
     handleSizeChange(val) {
-      console.log(`每页 ${val} 条`)
+      this.$emit('change', this.page)
     },
     handleCurrentChange(val) {
-      console.log(`当前页: ${val}`)
+      this.$emit('change', this.page)
     }
   }
 }
diff --git a/src/pages/demo/business/table/1/componnets/PageMain/index.vue b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
index 9f4aed3d..a522b78f 100644
--- a/src/pages/demo/business/table/1/componnets/PageMain/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
@@ -23,7 +23,7 @@
 
     <el-table-column label="状态" width="50" align="center">
       <template slot-scope="scope">
-        <type-control
+        <boolean-control
           :value="scope.row.type"
           @change="(val) => {
             handleSwitchChange(val, scope.$index)
@@ -36,13 +36,13 @@
             name="times-circle"
             style="font-size: 20px; line-height: 32px; color: #F56C6C;"
             slot="inactive"/>
-        </type-control>
+        </boolean-control>
       </template>
     </el-table-column>
 
     <el-table-column label="状态" width="50" align="center">
       <template slot-scope="scope">
-        <type-control-mini
+        <boolean-control-mini
           :value="scope.row.type"
           @change="(val) => {
             handleSwitchChange(val, scope.$index)
@@ -55,7 +55,7 @@
             name="times-circle"
             style="font-size: 20px; line-height: 32px; color: #F56C6C;"
             slot="inactive"/>
-        </type-control-mini>
+        </boolean-control-mini>
       </template>
     </el-table-column>
 
@@ -97,12 +97,12 @@
 </template>
 
 <script>
-import TypeControl from '../TypeControl'
-import TypeControlMini from '../TypeControlMini'
+import BooleanControl from '../BooleanControl'
+import BooleanControlMini from '../BooleanControlMini'
 export default {
   components: {
-    TypeControl,
-    TypeControlMini
+    BooleanControl,
+    BooleanControlMini
   },
   props: {
     tableData: {
diff --git a/src/pages/demo/business/table/1/index.vue b/src/pages/demo/business/table/1/index.vue
index 0e8ea62a..9ffd4118 100644
--- a/src/pages/demo/business/table/1/index.vue
+++ b/src/pages/demo/business/table/1/index.vue
@@ -1,8 +1,13 @@
 <template>
   <d2-container>
-    <demo-page-header slot="header" @submit="handleSubmit"/>
-    <demo-page-main :table-data="table"/>
-    <demo-page-footer slot="footer"/>
+    <demo-page-header
+      slot="header"
+      @submit="handleSubmit"/>
+    <demo-page-main
+      :table-data="table"/>
+    <demo-page-footer
+      slot="footer"
+      @change="handlePaginationChange"/>
   </d2-container>
 </template>
 
@@ -21,23 +26,29 @@ export default {
     }
   },
   methods: {
+    handlePaginationChange (val) {
+      this.$notify({
+        title: '分页变化',
+        message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
+      })
+      this.$nextTick(() => {
+        this.handleSubmit({})
+      })
+    },
     handleSubmit (form) {
-      this.$message({
-        message: '开始请求表格数据',
-        type: 'info'
+      this.$notify({
+        title: '开始请求表格数据'
       })
       this.$axios.post('/api/demo/business/table/1', form)
         .then(res => {
-          this.$message({
-            message: '表格数据请求完毕',
-            type: 'success'
+          this.$notify({
+            title: '表格数据请求完毕'
           })
           this.table = res.list
         })
         .catch(err => {
-          this.$message({
-            message: '表格数据请求异常',
-            type: 'error'
+          this.$notify({
+            title: '表格数据请求异常'
           })
           console.log('err', err)
         })