完善

Former-commit-id: b884c14ff6a7eabd19d6d46c58d138559445b7d0 [formerly b884c14ff6a7eabd19d6d46c58d138559445b7d0 [formerly b884c14ff6a7eabd19d6d46c58d138559445b7d0 [formerly b884c14ff6a7eabd19d6d46c58d138559445b7d0 [formerly feb36665a3ec13b199f716dd21f8c8ce4fc7d22a [formerly 88bb76f34b499eaf2c86f516387254787921df61]]]]]
Former-commit-id: 06ffd5ee37a4a2a3f1d3f491eb44c15fccf23764
Former-commit-id: 6c2deb62bf8846beef4e310e80343ec4e78d47d9
Former-commit-id: 3540e6fde11512973180ea8f46dba43bec8fc9b0 [formerly 87395c73907104e27e8fd089d8bb89ba1b4ffe38]
Former-commit-id: 32ed6256796b02d9e8e96dc1576a5499f68ff9fc
Former-commit-id: bedcff834b6498bdae0151c6d55d64f72418f382
Former-commit-id: ef177bb11a63353e01103476d2b3dd59ac8defae
Former-commit-id: 69db6ad5d36ef97bf244950400ea2ac1b7a54b7d
Former-commit-id: 143c95ccf7aa834319c6a7bab5e4e3c5a357de36

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)
     }
   }
 }

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 BooleanControl from '../BooleanControl'
-import TypeControlMini from '../TypeControlMini'
+import BooleanControlMini from '../BooleanControlMini'
 export default {
   components: {
-    TypeControl,
+    BooleanControl,
-    TypeControlMini
+    BooleanControlMini
   },
   props: {
     tableData: {

src/pages/demo/business/table/1/index.vue

@@ -1,8 +1,13 @@
 <template>
   <d2-container>
-    <demo-page-header slot="header" @submit="handleSubmit"/>
+    <demo-page-header
-    <demo-page-main :table-data="table"/>
+      slot="header"
-    <demo-page-footer slot="footer"/>
+      @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({
+      this.$notify({
-        message: '开始请求表格数据',
+        title: '开始请求表格数据'
-        type: 'info'
       })
       this.$axios.post('/api/demo/business/table/1', form)
         .then(res => {
-          this.$message({
+          this.$notify({
-            message: '表格数据请求完毕',
+            title: '表格数据请求完毕'
-            type: 'success'
           })
           this.table = res.list
         })
         .catch(err => {
-          this.$message({
+          this.$notify({
-            message: '表格数据请求异常',
+            title: '表格数据请求异常'
-            type: 'error'
           })
           console.log('err', err)
         })