update

2026-01-21 05:27:57 +08:00 · 2019-06-02 17:46:49 +08:00
parent e974a84cfb
commit 2e21ed8f5c
29 changed files with 281 additions and 101 deletions
--- a/docs/index.html
+++ b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vxe-table/favicon.ico><title>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.595f1fdb.css rel=preload as=style><link href=/vxe-table/static/css/index.efacb5b2.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.de52331a.js rel=preload as=script><link href=/vxe-table/static/js/index.b60b7cbb.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.595f1fdb.css rel=stylesheet><link href=/vxe-table/static/css/index.efacb5b2.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.de52331a.js></script><script src=/vxe-table/static/js/index.b60b7cbb.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vxe-table/favicon.ico><title>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.595f1fdb.css rel=preload as=style><link href=/vxe-table/static/css/index.cfc9dafd.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.de52331a.js rel=preload as=script><link href=/vxe-table/static/js/index.59b5eaca.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.595f1fdb.css rel=stylesheet><link href=/vxe-table/static/css/index.cfc9dafd.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.de52331a.js></script><script src=/vxe-table/static/js/index.59b5eaca.js></script></body></html>
--- a/docs/static/css/index.cfc9dafd.css
+++ b/docs/static/css/index.cfc9dafd.css
--- a/docs/static/js/index.59b5eaca.js
+++ b/docs/static/js/index.59b5eaca.js
--- a/docs/static/js/index.b60b7cbb.js
+++ b/docs/static/js/index.b60b7cbb.js
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -282,6 +282,12 @@ export default {
              locat: {
                name: 'TableToolbar'
              }
+            },
+            {
+              label: '分页',
+              locat: {
+                name: 'TablePage'
+              }
            }
          ]
        },
--- a/examples/api/pagination.js
+++ b/examples/api/pagination.js
@@ -18,8 +18,8 @@ const apis = [
        name: 'layouts',
        desc: '自定义布局',
        type: 'Array',
-        enum: 'PrevJump,PrevPage,Number,jumpNumber,NextPage,NextJump,Sizes,Jump,PageCount,Total',
-        defVal: '',
+        enum: 'PrevJump,PrevPage,Number,JumpNumber,NextPage,NextJump,Sizes,Jump,FullJump,PageCount,Total',
+        defVal: '[PrevPage,NextPage,FullJump,Sizes,Total]',
        list: []
      },
      {
--- a/examples/router.js
+++ b/examples/router.js
@@ -36,6 +36,7 @@ import TableExport from './views/table/advanced/Export.vue'
 import TableMenu from './views/table/advanced/Menu.vue'
 import TableExpand from './views/table/advanced/Expand.vue'
 import TableToolbar from './views/table/advanced/Toolbar.vue'
+import TablePage from './views/table/advanced/Page.vue'

 import TableTreeBasic from './views/table/tree/Basic.vue'
 import TableTreeSelection from './views/table/tree/Selection.vue'
@@ -273,6 +274,11 @@ export default new Router({
      name: 'TableToolbar',
      component: TableToolbar
    },
+    {
+      path: '/table/advanced/page',
+      name: 'TablePage',
+      component: TablePage
+    },
    {
      path: '/table/tree/basic',
      name: 'TableTreeBasic',
--- a/examples/views/table/advanced/Page.vue
+++ b/examples/views/table/advanced/Page.vue
@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <p>使用自带的分页 vxe-pagination</p>
+
+    <vxe-table
+      border
+      show-all-overflow
+      ref="xTable"
+      height="460"
+      :loading="loading"
+      :data.sync="tableData">
+      <vxe-table-column type="index" width="60"></vxe-table-column>
+      <vxe-table-column prop="name" label="Name" sortable></vxe-table-column>
+      <vxe-table-column prop="sex" label="Sex"></vxe-table-column>
+      <vxe-table-column prop="age" label="Age"></vxe-table-column>
+      <vxe-table-column prop="rate" label="Rate"></vxe-table-column>
+    </vxe-table>
+
+    <vxe-pagination
+      :loading="loading"
+      :current-page="pageVO.currentPage"
+      :page-size="pageVO.pageSize"
+      :total="pageVO.totalResult"
+      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange">
+    </vxe-pagination>
+
+    <p class="demo-code">显示代码</p>
+
+    <pre>
+      <code class="xml">{{ demoCodes[0] }}</code>
+      <code class="javascript">{{ demoCodes[1] }}</code>
+    </pre>
+  </div>
+</template>
+
+<script>
+import XEAjax from 'xe-ajax'
+import hljs from 'highlight.js'
+
+export default {
+  data () {
+    return {
+      loading: false,
+      tableData: [],
+      pageVO: {
+        currentPage: 1,
+        pageSize: 10,
+        totalResult: 0
+      },
+      demoCodes: [
+        `
+          <vxe-table
+            border
+            show-all-overflow
+            ref="xTable"
+            height="460"
+            :loading="loading"
+            :data.sync="tableData">
+            <vxe-table-column type="index" width="60"></vxe-table-column>
+            <vxe-table-column prop="name" label="Name" sortable></vxe-table-column>
+            <vxe-table-column prop="sex" label="Sex"></vxe-table-column>
+            <vxe-table-column prop="age" label="Age"></vxe-table-column>
+            <vxe-table-column prop="rate" label="Rate"></vxe-table-column>
+          </vxe-table>
+
+          <vxe-pagination
+            :loading="loading"
+            :current-page="pageVO.currentPage"
+            :page-size="pageVO.pageSize"
+            :total="pageVO.totalResult"
+            :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange">
+          </vxe-pagination>
+        `,
+        `
+        export default {
+          data () {
+            return {
+              loading: false,
+              tableData: [],
+              pageVO: {
+                currentPage: 1,
+                pageSize: 10,
+                totalResult: 0
+              }
+            }
+          },
+          created () {
+            this.findList()
+          },
+          methods: {
+            findList () {
+              this.loading = true
+              XEAjax.doGet(\`/api/user/page/list/\${this.pageVO.pageSize}/\${this.pageVO.currentPage}\`, this.formData).then(response => {
+                let { page, result } = response.data
+                this.tableData = result
+                this.pageVO.totalResult = page.totalResult
+                this.loading = false
+              }).catch(e => {
+                this.loading = false
+              })
+            },
+            searchEvent () {
+              this.pageVO.currentPage = 1
+              this.findList()
+            },
+            handleSizeChange (pageSize) {
+              this.pageVO.pageSize = pageSize
+              this.searchEvent()
+            },
+            handleCurrentChange (currentPage) {
+              this.pageVO.currentPage = currentPage
+              this.findList()
+            }
+          }
+        }
+        `
+      ]
+    }
+  },
+  created () {
+    this.findList()
+  },
+  mounted () {
+    Array.from(this.$el.querySelectorAll('pre code')).forEach((block) => {
+      hljs.highlightBlock(block)
+    })
+  },
+  methods: {
+    findList () {
+      this.loading = true
+      XEAjax.doGet(`/api/user/page/list/${this.pageVO.pageSize}/${this.pageVO.currentPage}`, this.formData).then(response => {
+        let { page, result } = response.data
+        this.tableData = result
+        this.pageVO.totalResult = page.totalResult
+        this.loading = false
+      }).catch(e => {
+        this.loading = false
+      })
+    },
+    searchEvent () {
+      this.pageVO.currentPage = 1
+      this.findList()
+    },
+    handleSizeChange (pageSize) {
+      this.pageVO.pageSize = pageSize
+      this.searchEvent()
+    },
+    handleCurrentChange (currentPage) {
+      this.pageVO.currentPage = currentPage
+      this.findList()
+    }
+  }
+}
+</script>
--- a/examples/views/table/advanced/Toolbar.vue
+++ b/examples/views/table/advanced/Toolbar.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <p>使用表格自带的工具栏 vxe-table-toolbar，配合模板可以非常简单的实现强大的功能</p>
+    <p>使用自带的工具栏 vxe-table-toolbar，配合模板可以非常简单的实现强大的功能</p>

    <vxe-table-toolbar>
      <template v-slot:buttons>
--- a/examples/views/table/api/API.vue
+++ b/examples/views/table/api/API.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <div class="search-wrapper">
-      <vxe-input class="search-input" v-model="filterName" type="search" placeholder="参数不清楚？来试试 API 搜索吧！"></vxe-input>
+      <vxe-input class="search-input" v-model="filterName" type="search" placeholder="参数不清楚？看这里！"></vxe-input>
    </div>
    <vxe-table
      highlight-hover-row
--- a/examples/views/table/grid/FullEdit.vue
+++ b/examples/views/table/grid/FullEdit.vue
@@ -31,8 +31,7 @@ export default {
  data () {
    return {
      tablePage: {
-        pageSize: 15,
-        background: true
+        pageSize: 15
      },
      tableProxy: {
        sort: true, // 启用排序代理
@@ -59,9 +58,7 @@ export default {
          { code: 'save', name: '保存' },
          { code: 'export', name: '导出.csv' }
        ],
-        setting: {
-          immediate: true
-        }
+        setting: true
      },
      tableColumn: [
        { type: 'selection', width: 50 },
@@ -101,8 +98,7 @@ export default {
          data () {
            return {
              tablePage: {
-                pageSize: 15,
-                background: true
+                pageSize: 15
              },
              tableProxy: {
                sort: true, // 启用排序代理
--- a/examples/views/table/grid/FullQuery.vue
+++ b/examples/views/table/grid/FullQuery.vue
@@ -33,8 +33,7 @@ export default {
        order: ''
      },
      tablePage: {
-        pageSize: 15,
-        background: true
+        pageSize: 15
      },
      tableProxy: {
        ajax: {
@@ -84,8 +83,7 @@ export default {
                order: ''
              },
              tablePage: {
-                pageSize: 15,
-                background: true
+                pageSize: 15
              },
              tableProxy: {
                ajax: {
--- a/examples/views/table/grid/PageProxy.vue
+++ b/examples/views/table/grid/PageProxy.vue
@@ -27,8 +27,7 @@ export default {
  data () {
    return {
      tablePage: {
-        pageSize: 15,
-        background: true
+        pageSize: 15
      },
      tableProxy: {
        ajax: {
@@ -57,8 +56,7 @@ export default {
          data () {
            return {
              tablePage: {
-                pageSize: 10,
-                background: true
+                pageSize: 10
              },
              tableProxy: {
                ajax: {
--- a/examples/views/table/grid/TreeEdit.vue
+++ b/examples/views/table/grid/TreeEdit.vue
@@ -43,7 +43,9 @@ export default {
          { code: 'save', name: '保存' },
          { code: 'export', name: '导出.csv' }
        ],
-        setting: true
+        setting: {
+          immediate: true
+        }
      },
      tableColumn: [
        { type: 'selection', label: '全选', width: 180, treeNode: true },
@@ -82,7 +84,9 @@ export default {
                  { code: 'save', name: '保存' },
                  { code: 'export', name: '导出.csv' }
                ],
-                setting: true
+                setting:  {
+                  immediate: true
+                }
              },
              tableColumn: [
                { type: 'selection', label: '全选', width: 180, treeNode: true },
--- a/examples/views/table/plugin/ElementPage.vue
+++ b/examples/views/table/plugin/ElementPage.vue
@@ -301,7 +301,6 @@ export default {
  methods: {
    findList () {
      this.loading = true
-      this.pendingRemoveList = []
      XEAjax.doGet(`/api/user/page/list/${this.pageVO.pageSize}/${this.pageVO.currentPage}`, this.formData).then(response => {
        let { page, result } = response.data
        this.tableData = result
--- a/examples/views/table/plugin/IviewPage.vue
+++ b/examples/views/table/plugin/IviewPage.vue
@@ -285,7 +285,6 @@ export default {
  methods: {
    findList () {
      this.loading = true
-      this.pendingRemoveList = []
      XEAjax.doGet(`/api/user/page/list/${this.pageVO.pageSize}/${this.pageVO.currentPage}`, this.formData).then(response => {
        let { page, result } = response.data
        this.tableData = result
--- a/examples/views/table/scroll/ScrollFullRows.vue
+++ b/examples/views/table/scroll/ScrollFullRows.vue
@@ -112,7 +112,12 @@ export default {
          })
        ]
      }
-      return [[], [], []]
+      // 即使是空数据也必须要保持行数一致
+      return [
+        ['-'],
+        ['-'],
+        ['-']
+      ]
    }
  }
 }
--- a/lib/index.common.js
+++ b/lib/index.common.js
@@ -1889,7 +1889,7 @@ module.exports = {
    pagination: {
      goto: '前往',
      pagesize: '条/页',
-      total: '共 {{total}} 条',
+      total: '共 {{total}} 条记录',
      pageClassifier: '页'
    },
    alert: {
@@ -8339,7 +8339,7 @@ function renderFixed(h, $table, fixedType) {
      return showFooter && footerMethod && (visibleColumn.length || data) ? footerMethod({
        columns: visibleColumn,
        data: tableFullData
-      }) : [];
+      }) : ['-'];
    }
  },
  watch: {
@@ -12622,11 +12622,9 @@ func.forEach(function (name) {
      on: tableOns,
      ref: 'xTable'
    }, $slots.default), pageConfig ? h('vxe-pagination', {
-      class: ['vxe-grid--pagination', {
-        'is--loading': loading
-      }],
      props: assign_default()({
-        size: vSize
+        size: vSize,
+        loading: loading || tableLoading
      }, pageConfig, proxyConfig ? tablePage : {}),
      on: {
        'current-change': this.currentChangeEvent,
@@ -13199,7 +13197,7 @@ var Excel = excel;
    layouts: {
      type: Array,
      default: function _default() {
-        return conf.pagination.layouts || ['PrevPage', 'NextPage', 'Jump', 'Sizes', 'Total'];
+        return conf.pagination.layouts || ['PrevPage', 'NextPage', 'FullJump', 'Sizes', 'Total'];
      }
    },
    // 当前页
@@ -13207,6 +13205,8 @@ var Excel = excel;
      type: Number,
      default: 1
    },
+    // 加载中
+    loading: Boolean,
    // 每页大小
    pageSize: {
      type: Number,
@@ -13287,16 +13287,16 @@ var Excel = excel;
    tools_event.off(this, 'mousedown');
  },
  render: function render(h) {
-    var _this = this;
+    var _ref,
+        _this = this;

    var layouts = this.layouts,
        isSizes = this.isSizes,
+        loading = this.loading,
        vSize = this.vSize,
        background = this.background;
    return h('div', {
-      class: ['vxe-pagination', _defineProperty({
-        'p--background': background
-      }, "size--".concat(vSize), vSize)]
+      class: ['vxe-pagination', (_ref = {}, _defineProperty(_ref, "size--".concat(vSize), vSize), _defineProperty(_ref, 'p--background', background), _defineProperty(_ref, 'is--loading', loading), _ref)]
    }, layouts.map(function (name) {
      return _this["render".concat(name)](h);
    }).concat(isSizes ? this.renderSizePanel(h) : []));
@@ -13416,17 +13416,21 @@ var Excel = excel;
        }, "".concat(num).concat(conf.i18n('vxe.pagination.pagesize')));
      }));
    },
-    // jump
-    renderJump: function renderJump(h) {
+    // FullJump
+    renderFullJump: function renderFullJump(h) {
+      return this.renderJump(h, true);
+    },
+    // Jump
+    renderJump: function renderJump(h, isFull) {
      var _this5 = this;

      var currentPage = this.currentPage,
          pageCount = this.pageCount;
      return h('span', {
        class: 'page--jump'
-      }, [h('span', {
+      }, [isFull ? h('span', {
        class: 'page--goto-text'
-      }, conf.i18n('vxe.pagination.goto')), h('input', {
+      }, conf.i18n('vxe.pagination.goto')) : null, h('input', {
        class: 'page--goto',
        domProps: {
          value: currentPage
@@ -13454,9 +13458,9 @@ var Excel = excel;
            }
          }
        }
-      }), h('span', {
+      }), isFull ? h('span', {
        class: 'page--classifier-text'
-      }, conf.i18n('vxe.pagination.pageClassifier'))]);
+      }, conf.i18n('vxe.pagination.pageClassifier')) : null]);
    },
    // PageCount
    renderPageCount: function renderPageCount(h) {
--- a/lib/index.css
+++ b/lib/index.css
--- a/lib/index.umd.js
+++ b/lib/index.umd.js
@@ -1898,7 +1898,7 @@ module.exports = {
    pagination: {
      goto: '前往',
      pagesize: '条/页',
-      total: '共 {{total}} 条',
+      total: '共 {{total}} 条记录',
      pageClassifier: '页'
    },
    alert: {
@@ -8348,7 +8348,7 @@ function renderFixed(h, $table, fixedType) {
      return showFooter && footerMethod && (visibleColumn.length || data) ? footerMethod({
        columns: visibleColumn,
        data: tableFullData
-      }) : [];
+      }) : ['-'];
    }
  },
  watch: {
@@ -12631,11 +12631,9 @@ func.forEach(function (name) {
      on: tableOns,
      ref: 'xTable'
    }, $slots.default), pageConfig ? h('vxe-pagination', {
-      class: ['vxe-grid--pagination', {
-        'is--loading': loading
-      }],
      props: assign_default()({
-        size: vSize
+        size: vSize,
+        loading: loading || tableLoading
      }, pageConfig, proxyConfig ? tablePage : {}),
      on: {
        'current-change': this.currentChangeEvent,
@@ -13208,7 +13206,7 @@ var Excel = excel;
    layouts: {
      type: Array,
      default: function _default() {
-        return conf.pagination.layouts || ['PrevPage', 'NextPage', 'Jump', 'Sizes', 'Total'];
+        return conf.pagination.layouts || ['PrevPage', 'NextPage', 'FullJump', 'Sizes', 'Total'];
      }
    },
    // 当前页
@@ -13216,6 +13214,8 @@ var Excel = excel;
      type: Number,
      default: 1
    },
+    // 加载中
+    loading: Boolean,
    // 每页大小
    pageSize: {
      type: Number,
@@ -13296,16 +13296,16 @@ var Excel = excel;
    tools_event.off(this, 'mousedown');
  },
  render: function render(h) {
-    var _this = this;
+    var _ref,
+        _this = this;

    var layouts = this.layouts,
        isSizes = this.isSizes,
+        loading = this.loading,
        vSize = this.vSize,
        background = this.background;
    return h('div', {
-      class: ['vxe-pagination', _defineProperty({
-        'p--background': background
-      }, "size--".concat(vSize), vSize)]
+      class: ['vxe-pagination', (_ref = {}, _defineProperty(_ref, "size--".concat(vSize), vSize), _defineProperty(_ref, 'p--background', background), _defineProperty(_ref, 'is--loading', loading), _ref)]
    }, layouts.map(function (name) {
      return _this["render".concat(name)](h);
    }).concat(isSizes ? this.renderSizePanel(h) : []));
@@ -13425,17 +13425,21 @@ var Excel = excel;
        }, "".concat(num).concat(conf.i18n('vxe.pagination.pagesize')));
      }));
    },
-    // jump
-    renderJump: function renderJump(h) {
+    // FullJump
+    renderFullJump: function renderFullJump(h) {
+      return this.renderJump(h, true);
+    },
+    // Jump
+    renderJump: function renderJump(h, isFull) {
      var _this5 = this;

      var currentPage = this.currentPage,
          pageCount = this.pageCount;
      return h('span', {
        class: 'page--jump'
-      }, [h('span', {
+      }, [isFull ? h('span', {
        class: 'page--goto-text'
-      }, conf.i18n('vxe.pagination.goto')), h('input', {
+      }, conf.i18n('vxe.pagination.goto')) : null, h('input', {
        class: 'page--goto',
        domProps: {
          value: currentPage
@@ -13463,9 +13467,9 @@ var Excel = excel;
            }
          }
        }
-      }), h('span', {
+      }), isFull ? h('span', {
        class: 'page--classifier-text'
-      }, conf.i18n('vxe.pagination.pageClassifier'))]);
+      }, conf.i18n('vxe.pagination.pageClassifier')) : null]);
    },
    // PageCount
    renderPageCount: function renderPageCount(h) {
--- a/lib/index.umd.min.js
+++ b/lib/index.umd.min.js
--- a/lib/locale/lang/en.js
+++ b/lib/locale/lang/en.js
@@ -14,7 +14,7 @@ module.exports = {
    pagination: {
      goto: 'Go to',
      pagesize: '/page',
-      total: 'Total {{total}}',
+      total: 'Total {{total}} record',
      pageClassifier: ''
    },
    alert: {
--- a/lib/locale/lang/zh-CN.js
+++ b/lib/locale/lang/zh-CN.js
@@ -14,7 +14,7 @@ module.exports = {
    pagination: {
      goto: '前往',
      pagesize: '条/页',
-      total: '共 {{total}} 条',
+      total: '共 {{total}} 条记录',
      pageClassifier: '页'
    },
    alert: {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vxe-table",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.7",
  "description": "A very powerful Vue table component.",
  "scripts": {
    "serve": "vue-cli-service serve",
--- a/src/components/grid/src/grid.js
+++ b/src/components/grid/src/grid.js
@@ -131,10 +131,10 @@ export default {
        ref: 'xTable'
      }, $slots.default),
      pageConfig ? h('vxe-pagination', {
-        class: ['vxe-grid--pagination', {
-          'is--loading': loading
-        }],
-        props: Object.assign({ size: vSize }, pageConfig, proxyConfig ? tablePage : {}),
+        props: Object.assign({
+          size: vSize,
+          loading: loading || tableLoading
+        }, pageConfig, proxyConfig ? tablePage : {}),
        on: {
          'current-change': this.currentChangeEvent,
          'size-change': this.sizeChangeEvent
--- a/src/components/pagination/src/pagination.js
+++ b/src/components/pagination/src/pagination.js
@@ -9,9 +9,11 @@ export default {
  props: {
    size: String,
    // 自定义布局
-    layouts: { type: Array, default: () => GlobalConfig.pagination.layouts || ['PrevPage', 'NextPage', 'Jump', 'Sizes', 'Total'] },
+    layouts: { type: Array, default: () => GlobalConfig.pagination.layouts || ['PrevPage', 'NextPage', 'FullJump', 'Sizes', 'Total'] },
    // 当前页
    currentPage: { type: Number, default: 1 },
+    // 加载中
+    loading: Boolean,
    // 每页大小
    pageSize: { type: Number, default: () => GlobalConfig.pagination.pageSize || 10 },
    // 总条数
@@ -70,11 +72,12 @@ export default {
    GlobalEvent.off(this, 'mousedown')
  },
  render (h) {
-    let { layouts, isSizes, vSize, background } = this
+    let { layouts, isSizes, loading, vSize, background } = this
    return h('div', {
      class: ['vxe-pagination', {
+        [`size--${vSize}`]: vSize,
        'p--background': background,
-        [`size--${vSize}`]: vSize
+        'is--loading': loading
      }]
    }, layouts.map(name => this[`render${name}`](h)).concat(isSizes ? this.renderSizePanel(h) : []))
  },
@@ -176,15 +179,19 @@ export default {
        }, `${num}${GlobalConfig.i18n('vxe.pagination.pagesize')}`)
      }))
    },
-    // jump
-    renderJump (h) {
+    // FullJump
+    renderFullJump (h) {
+      return this.renderJump(h, true)
+    },
+    // Jump
+    renderJump (h, isFull) {
      let { currentPage, pageCount } = this
      return h('span', {
        class: 'page--jump'
      }, [
-        h('span', {
+        isFull ? h('span', {
          class: 'page--goto-text'
-        }, GlobalConfig.i18n('vxe.pagination.goto')),
+        }, GlobalConfig.i18n('vxe.pagination.goto')) : null,
        h('input', {
          class: 'page--goto',
          domProps: {
@@ -211,9 +218,9 @@ export default {
            }
          }
        }),
-        h('span', {
+        isFull ? h('span', {
          class: 'page--classifier-text'
-        }, GlobalConfig.i18n('vxe.pagination.pageClassifier'))
+        }, GlobalConfig.i18n('vxe.pagination.pageClassifier')) : null
      ])
    },
    // PageCount
--- a/src/components/table/src/table.js
+++ b/src/components/table/src/table.js
@@ -320,7 +320,7 @@ export default {
    },
    footerData () {
      let { showFooter, visibleColumn, tableFullData, data, footerMethod } = this
-      return showFooter && footerMethod && (visibleColumn.length || data) ? footerMethod({ columns: visibleColumn, data: tableFullData }) : []
+      return showFooter && footerMethod && (visibleColumn.length || data) ? footerMethod({ columns: visibleColumn, data: tableFullData }) : ['-']
    }
  },
  watch: {
--- a/src/style/grid.scss
+++ b/src/style/grid.scss
@@ -1,20 +0,0 @@
-.vxe-pagination {
-  &.vxe-grid--pagination {
-    position: relative;
-    border-style: solid;
-    border-color: transparent;
-    border-width: 0 1px;
-    &.is--loading {
-      &:before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        background-color: $vxe-loading-background-color;
-      }
-    }
-  }
-}
--- a/src/style/pagination.scss
+++ b/src/style/pagination.scss
@@ -5,6 +5,23 @@
  color: $vxe-font-color;
  font-family: $vxe-font-family;
  text-align: right;
+  user-select: none;
+  &.is--loading {
+    position: relative;
+    border-style: solid;
+    border-color: transparent;
+    border-width: 0 1px;
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      background-color: $vxe-loading-background-color;
+    }
+  }
  &.p--background {
    .page--prev-btn,
    .page--next-btn {
@@ -187,7 +204,6 @@
  .page--jump-next,
  .page--next-btn,
  .page--sizes {
-    user-select: none;
    cursor: pointer;
  }
  .page--prev-btn,