增加统一的分页设置

ui/packages/basic/AiTable.vue

@@ -1,19 +1,18 @@
 <template>
   <div class="ai-table" :class="[isShowBorder ? 'ai-table__border' : 'ai-table__noborder']">
-    <el-table
-        :data="tableData"
-        header-cell-class-name="ai-table__header"
-        cell-class-name="ai-table__cell"
-        row-class-name="ai-table__row"
-        :class="{'ai-header__border': isShowBorder}"
-        :ref="refName"
-        :size="tableSize"
-        :stripe="stripe"
-        :tooltip-effect="tooltipEffect"
-        @selection-change="handleSelectionChange"
-        v-on="$listeners"
-        v-bind="$attrs"
-        v-loading="loading">
+    <el-table :data="tableData"
+              header-cell-class-name="ai-table__header"
+              cell-class-name="ai-table__cell"
+              row-class-name="ai-table__row"
+              :class="{'ai-header__border': isShowBorder}"
+              :ref="refName"
+              :size="tableSize"
+              :stripe="stripe"
+              :tooltip-effect="tooltipEffect"
+              @selection-change="handleSelectionChange"
+              v-on="$listeners"
+              v-bind="$attrs"
+              v-loading="loading">
       <template v-for="colConfig in colConfigs.filter(e=>!e.hide)">
         <slot v-if="colConfig.slot && colConfig.slot !== 'options'" :name="colConfig.slot"/>
         <component
@@ -52,7 +51,7 @@
           </template>
         </el-table-column>
       </template>
-      <slot class="table-options" name="options"></slot>
+      <slot class="table-options" name="options"/>
       <template #empty>
         <slot v-if="$scopedSlots.empty" name="empty"/>
         <div v-else class="no-data" style="height:160px;"/>
@@ -61,7 +60,7 @@
     <div class="pagination newPagination" v-if="isShowPagination">
       <el-pagination
           background
-          :current-page.sync="page.current"
+          :current-page="page.current"
           :total="page.total"
           :page-size="page.size"
           v-bind="$attrs"
@@ -72,8 +71,7 @@
           @current-change="handleChange">
         <div class="paginationPre">
           <el-checkbox v-if="isHasPaginationBtnsSlot" :disabled="!tableData.length" :indeterminate="isIndeterminate"
-                       :value="checkAll"
-                       @click.native="toggleAllSelection">全选
+                       :value="checkAll" @click.native="toggleAllSelection">全选
           </el-checkbox>
           <slot name="pagination"/>
           <div class="pagination-btns">
@@ -112,7 +110,8 @@ export default {
     tableRef: String,
     dict: {default: () => dict},
     pagerCount: {default: 5},
-    pageSizes: {default: () => [10, 20, 50, 100]}
+    pageSizes: {default: () => [10, 20, 50, 100]},
+    pageConfig: Object
   },
   data() {
     return {
@@ -150,6 +149,7 @@ export default {
     checkAll: v => v.chooseList.length == v.tableData.length && v.tableData !== 0,
     page() {
       return {
+        ...this.pageConfig,
         current: this.current,
         size: this.size,
         total: this.total,
@@ -158,14 +158,16 @@ export default {
     },
   },
   methods: {
-    handleChange(e) {
-      this.$emit('update:current', e)
+    handleChange(current) {
+      this.$emit('update:current', current)
+      this.$emit('update:pageConfig', {...this.pageConfig, current})
       this.$nextTick(() => {
         this.$emit('getList')
       })
     },
-    handleSizeChange(e) {
-      this.$emit('update:size', e)
+    handleSizeChange(size) {
+      this.$emit('update:size', size)
+      this.$emit('update:pageConfig', {...this.pageConfig, size})
       this.$nextTick(() => {
         this.$emit('getList')
       })
@@ -175,16 +177,13 @@ export default {
       this.$emit('handleSelectionChange', e)
     },
     getValue(colConfig, row) {
-      if (this.isFunction(colConfig.format)) {
+      if (typeof colConfig.format === 'function') {
         return colConfig.format.call(this, row[colConfig.prop])
       }
       if (colConfig.dateFormat) {
         return moment(row[colConfig.prop]).format(colConfig.dateFormat)
       }
-      return row[colConfig.prop]|| "-"
-    },
-    isFunction(fun) {
-      return typeof fun === 'function'
+      return row[colConfig.prop] || "-"
     },
     /**
      * 表格方法代理