From 5e09230c29738046d6bd35f30fd7608a9ae886e0 Mon Sep 17 00:00:00 2001
From: jiahengaa <2429803999@qq.com>
Date: Thu, 6 May 2021 23:06:45 +0800
Subject: [PATCH] fix bug https://github.com/jiahengaa/BeeGridTable/issues/16
 Please update to v1.5.2 For details, please see
 http://beegridtable.com/serverFilterAndSortAndPage

---
 package.json                           |    4 +-
 src/components/page/page.vue           |  550 ++--
 src/components/table/cell.vue          |  209 +-
 src/components/table/headFilterSlot.js |    2 +
 src/components/table/table-head.vue    | 1262 +++++----
 src/components/table/table.vue         | 3598 +++++++++++++-----------
 src/components/table/util.js           |   58 +-
 src/locale/lang/en-US.js               |   16 +-
 src/locale/lang/zh-CN.js               |   16 +-
 types/table.d.ts                       |    8 +-
 10 files changed, 3039 insertions(+), 2684 deletions(-)

diff --git a/package.json b/package.json
index 81b7df3..ec3fec7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "beegridtable",
-    "version": "1.3.0",
+    "version": "1.5.2",
     "title": "BeeGridTable",
     "description": "A high quality DataTable component Library with Vue.js",
     "homepage": "http://www.beegridtable.com",
@@ -21,7 +21,7 @@
         "types"
     ],
     "scripts": {
-        "dev": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback  --host 192.168.3.44 --port 8082 --config build/webpack.dev.config.js",
+        "dev": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback  --host localhost --port 8082 --config build/webpack.dev.config.js",
         "dev:s": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 8083  --config build/webpack.dev.config.js",
         "dist:style": "gulp --gulpfile build/build-style.js",
         "dist:dev": "webpack --config build/webpack.dist.dev.config.js",
diff --git a/src/components/page/page.vue b/src/components/page/page.vue
index a432660..f1f3356 100644
--- a/src/components/page/page.vue
+++ b/src/components/page/page.vue
@@ -157,289 +157,293 @@ import Locale from "../../mixins/locale";
 const prefixCls = "bee-page";
 
 export default {
-  name: "Page",
-  mixins: [Locale],
-  components: { Options },
-  props: {
-    current: {
-      type: Number,
-      default: 1,
-    },
-    total: {
-      type: Number,
-      default: 0,
-    },
-    filterTotalData: {
-      type: Number,
-      default: 0,
-    },
-    filterResultL: {
-      type: String,
-      default: "",
-    },
-    filterResultR: {
-      type: String,
-      default: "",
-    },
-    pageSize: {
-      type: Number,
-      default: 10,
-    },
-    pageCount: {
-      type: Number,
-      default: 4,
-    },
-    placement: {
-      validator(value) {
-        return oneOf(value, ["top", "bottom"]);
-      },
-      default: "bottom",
-    },
-    transfer: {
-      type: Boolean,
-      default() {
-        return !this.$BEETABLE || this.$BEETABLE.transfer === ""
-          ? false
-          : this.$BEETABLE.transfer;
-      },
-    },
-    size: {
-      validator(value) {
-        return oneOf(value, ["small"]);
-      },
-    },
-    simple: {
-      type: Boolean,
-      default: false,
-    },
-    showTotal: {
-      type: Boolean,
-      default: false,
-    },
-    showElevator: {
-      type: Boolean,
-      default: false,
-    },
-    showSizer: {
-      type: Boolean,
-      default: false,
-    },
-    className: {
-      type: String,
-    },
-    styles: {
-      type: Object,
-    },
-    prevText: {
-      type: String,
-      default: "",
-    },
-    nextText: {
-      type: String,
-      default: "",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      prefixCls: prefixCls,
-      currentPage: this.current,
-      currentPageSize: this.pageSize,
-      currentPageSizeOpts: [10, 20, 30, 40],
-    };
-  },
-  watch: {
-    total(val) {
-      let maxPage = Math.ceil(val / this.currentPageSize);
-      if (maxPage < this.currentPage) {
-        this.currentPage = maxPage === 0 ? 1 : maxPage;
-      }
-    },
-    current(val) {
-      this.currentPage = val;
-    },
-    pageSize: {
-      handler(val) {
-        this.currentPageSize = val;
-        if (val > 0 && this.pageCount) {
-          this.currentPageSizeOpts = [];
-          for (var i = 1; i <= this.pageCount; i++) {
-            this.currentPageSizeOpts.push(val * i);
-          }
+    name: "Page",
+    mixins: [Locale],
+    components: { Options },
+    props: {
+        current: {
+            type: Number,
+            default: 1
+        },
+        total: {
+            type: Number,
+            default: 0
+        },
+        filterTotalData: {
+            type: Number,
+            default: 0
+        },
+        filterResultL: {
+            type: String,
+            default: ""
+        },
+        filterResultR: {
+            type: String,
+            default: ""
+        },
+        pageSize: {
+            type: Number,
+            default: 10
+        },
+        pageCount: {
+            type: Number,
+            default: 4
+        },
+        placement: {
+            validator(value) {
+                return oneOf(value, ["top", "bottom"]);
+            },
+            default: "bottom"
+        },
+        transfer: {
+            type: Boolean,
+            default() {
+                return !this.$BEETABLE || this.$BEETABLE.transfer === ""
+                    ? false
+                    : this.$BEETABLE.transfer;
+            }
+        },
+        size: {
+            validator(value) {
+                return oneOf(value, ["small"]);
+            }
+        },
+        simple: {
+            type: Boolean,
+            default: false
+        },
+        showTotal: {
+            type: Boolean,
+            default: false
+        },
+        showElevator: {
+            type: Boolean,
+            default: false
+        },
+        showSizer: {
+            type: Boolean,
+            default: false
+        },
+        className: {
+            type: String
+        },
+        styles: {
+            type: Object
+        },
+        prevText: {
+            type: String,
+            default: ""
+        },
+        nextText: {
+            type: String,
+            default: ""
+        },
+        disabled: {
+            type: Boolean,
+            default: false
         }
-      },
-      immediate: true,
     },
-    pageCount: {
-      handler(val) {
-        if (this.pageSize > 0 && val > 0) {
-          this.currentPageSizeOpts = [];
-          for (var i = 1; i <= val; i++) {
-            this.currentPageSizeOpts.push(i * this.pageSize);
-          }
+    data() {
+        return {
+            prefixCls: prefixCls,
+            currentPage: this.current,
+            currentPageSize: this.pageSize,
+            currentPageSizeOpts: [10, 20, 30, 40]
+        };
+    },
+    watch: {
+        total(val) {
+            let maxPage = Math.ceil(val / this.currentPageSize);
+            if (maxPage < this.currentPage) {
+                this.currentPage = maxPage === 0 ? 1 : maxPage;
+            }
+        },
+        current(val) {
+            this.currentPage = val;
+        },
+        pageSize: {
+            handler(val) {
+                this.currentPageSize = val;
+                if (val > 0 && this.pageCount) {
+                    this.currentPageSizeOpts = [];
+                    for (var i = 1; i <= this.pageCount; i++) {
+                        this.currentPageSizeOpts.push(val * i);
+                    }
+                }
+            },
+            immediate: true
+        },
+        pageCount: {
+            handler(val) {
+                if (this.pageSize > 0 && val > 0) {
+                    this.currentPageSizeOpts = [];
+                    for (var i = 1; i <= val; i++) {
+                        this.currentPageSizeOpts.push(i * this.pageSize);
+                    }
+                }
+            },
+            immediate: true
         }
-      },
-      immediate: true,
-    },
-  },
-  computed: {
-    isSmall() {
-      return !!this.size;
-    },
-    allPages() {
-      const allPage = Math.ceil(this.filterTotalData / this.currentPageSize);
-      return allPage === 0 ? 1 : allPage;
-    },
-    simpleWrapClasses() {
-      return [
-        `${prefixCls}`,
-        `${prefixCls}-simple`,
-        {
-          [`${this.className}`]: !!this.className,
-        },
-      ];
-    },
-    simplePagerClasses() {
-      return `${prefixCls}-simple-pager`;
-    },
-    wrapClasses() {
-      return [
-        `${prefixCls}`,
-        {
-          [`${this.className}`]: !!this.className,
-          [`${prefixCls}-with-disabled`]: this.disabled,
-          mini: !!this.size,
-        },
-      ];
-    },
-    prevClasses() {
-      return [
-        `${prefixCls}-prev`,
-        {
-          [`${prefixCls}-disabled`]: this.currentPage === 1 || this.disabled,
-          [`${prefixCls}-custom-text`]: this.prevText !== "",
-        },
-      ];
     },
-    nextClasses() {
-      return [
-        `${prefixCls}-next`,
-        {
-          [`${prefixCls}-disabled`]:
-            this.currentPage === this.allPages || this.disabled,
-          [`${prefixCls}-custom-text`]: this.nextText !== "",
-        },
-      ];
-    },
-    firstPageClasses() {
-      return [
-        `${prefixCls}-item`,
-        {
-          [`${prefixCls}-item-active`]: this.currentPage === 1,
+    computed: {
+        isSmall() {
+            return !!this.size;
         },
-      ];
-    },
-    lastPageClasses() {
-      return [
-        `${prefixCls}-item`,
-        {
-          [`${prefixCls}-item-active`]: this.currentPage === this.allPages,
+        allPages() {
+            const allPage = Math.ceil(
+                this.filterTotalData / this.currentPageSize
+            );
+            return allPage === 0 ? 1 : allPage;
         },
-      ];
-    },
-  },
-  methods: {
-    changePage(page) {
-      if (this.disabled) return;
-      if (this.currentPage != page) {
-        this.currentPage = page;
-        this.$emit("update:current", page);
-        this.$emit("on-change", page);
-      }
-    },
-    prev() {
-      if (this.disabled) return;
-      const current = this.currentPage;
-      if (current <= 1) {
-        return false;
-      }
-      this.changePage(current - 1);
-    },
-    next() {
-      if (this.disabled) return;
-      const current = this.currentPage;
-      if (current >= this.allPages) {
-        return false;
-      }
-      this.changePage(current + 1);
-    },
-    fastPrev() {
-      if (this.disabled) return;
-      const page = this.currentPage - 5;
-      if (page > 0) {
-        this.changePage(page);
-      } else {
-        this.changePage(1);
-      }
-    },
-    fastNext() {
-      if (this.disabled) return;
-      const page = this.currentPage + 5;
-      if (page > this.allPages) {
-        this.changePage(this.allPages);
-      } else {
-        this.changePage(page);
-      }
-    },
-    onSize(pageSize) {
-      if (this.disabled) return;
-      this.currentPageSize = pageSize;
-      this.$emit("on-page-size-change", pageSize);
-      this.changePage(1);
-    },
-    onPage(page) {
-      if (this.disabled) return;
-      this.changePage(page);
+        simpleWrapClasses() {
+            return [
+                `${prefixCls}`,
+                `${prefixCls}-simple`,
+                {
+                    [`${this.className}`]: !!this.className
+                }
+            ];
+        },
+        simplePagerClasses() {
+            return `${prefixCls}-simple-pager`;
+        },
+        wrapClasses() {
+            return [
+                `${prefixCls}`,
+                {
+                    [`${this.className}`]: !!this.className,
+                    [`${prefixCls}-with-disabled`]: this.disabled,
+                    mini: !!this.size
+                }
+            ];
+        },
+        prevClasses() {
+            return [
+                `${prefixCls}-prev`,
+                {
+                    [`${prefixCls}-disabled`]:
+                        this.currentPage === 1 || this.disabled,
+                    [`${prefixCls}-custom-text`]: this.prevText !== ""
+                }
+            ];
+        },
+        nextClasses() {
+            return [
+                `${prefixCls}-next`,
+                {
+                    [`${prefixCls}-disabled`]:
+                        this.currentPage === this.allPages || this.disabled,
+                    [`${prefixCls}-custom-text`]: this.nextText !== ""
+                }
+            ];
+        },
+        firstPageClasses() {
+            return [
+                `${prefixCls}-item`,
+                {
+                    [`${prefixCls}-item-active`]: this.currentPage === 1
+                }
+            ];
+        },
+        lastPageClasses() {
+            return [
+                `${prefixCls}-item`,
+                {
+                    [`${prefixCls}-item-active`]:
+                        this.currentPage === this.allPages
+                }
+            ];
+        }
     },
-    keyDown(e) {
-      const key = e.keyCode;
-      const condition =
-        (key >= 48 && key <= 57) ||
-        (key >= 96 && key <= 105) ||
-        key === 8 ||
-        key === 37 ||
-        key === 39;
+    methods: {
+        changePage(page) {
+            if (this.disabled) return;
+            if (this.currentPage != page) {
+                this.currentPage = page;
+                this.$emit("update:current", page);
+                this.$emit("on-change", page);
+            }
+        },
+        prev() {
+            if (this.disabled) return;
+            const current = this.currentPage;
+            if (current <= 1) {
+                return false;
+            }
+            this.changePage(current - 1);
+        },
+        next() {
+            if (this.disabled) return;
+            const current = this.currentPage;
+            if (current >= this.allPages) {
+                return false;
+            }
+            this.changePage(current + 1);
+        },
+        fastPrev() {
+            if (this.disabled) return;
+            const page = this.currentPage - 5;
+            if (page > 0) {
+                this.changePage(page);
+            } else {
+                this.changePage(1);
+            }
+        },
+        fastNext() {
+            if (this.disabled) return;
+            const page = this.currentPage + 5;
+            if (page > this.allPages) {
+                this.changePage(this.allPages);
+            } else {
+                this.changePage(page);
+            }
+        },
+        onSize(pageSize) {
+            if (this.disabled) return;
+            this.currentPageSize = pageSize;
+            this.$emit("on-page-size-change", pageSize);
+            this.changePage(1);
+        },
+        onPage(page) {
+            if (this.disabled) return;
+            this.changePage(page);
+        },
+        keyDown(e) {
+            const key = e.keyCode;
+            const condition =
+                (key >= 48 && key <= 57) ||
+                (key >= 96 && key <= 105) ||
+                key === 8 ||
+                key === 37 ||
+                key === 39;
 
-      if (!condition) {
-        e.preventDefault();
-      }
-    },
-    keyUp(e) {
-      const key = e.keyCode;
-      const val = parseInt(e.target.value);
+            if (!condition) {
+                e.preventDefault();
+            }
+        },
+        keyUp(e) {
+            const key = e.keyCode;
+            const val = parseInt(e.target.value);
 
-      if (key === 38) {
-        this.prev();
-      } else if (key === 40) {
-        this.next();
-      } else if (key === 13) {
-        let page = 1;
+            if (key === 38) {
+                this.prev();
+            } else if (key === 40) {
+                this.next();
+            } else if (key === 13) {
+                let page = 1;
 
-        if (val > this.allPages) {
-          page = this.allPages;
-        } else if (val <= 0 || !val) {
-          page = 1;
-        } else {
-          page = val;
-        }
+                if (val > this.allPages) {
+                    page = this.allPages;
+                } else if (val <= 0 || !val) {
+                    page = 1;
+                } else {
+                    page = val;
+                }
 
-        e.target.value = page;
-        this.changePage(page);
-      }
-    },
-  },
+                e.target.value = page;
+                this.changePage(page);
+            }
+        }
+    }
 };
 </script>
diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index 51ba86c..3fdaf0d 100644
--- a/src/components/table/cell.vue
+++ b/src/components/table/cell.vue
@@ -20,6 +20,7 @@
       <template v-if="column.tooltip">
         <Tooltip
           transfer
+          :placement="column.tooltipPlacement"
           :content="row[column.key]"
           :theme="tableRoot.tooltipTheme"
           :disabled="!showTooltip && !tooltipShow"
@@ -71,119 +72,123 @@ import Checkbox from "../checkbox/checkbox.vue";
 import Tooltip from "../tooltip/tooltip.vue";
 
 import {
-  DEFAULT_FORMATS,
-  TYPE_VALUE_RESOLVER_MAP,
-  getDayCountOfMonth,
+    DEFAULT_FORMATS,
+    TYPE_VALUE_RESOLVER_MAP,
+    getDayCountOfMonth
 } from "../date-picker/util";
 
 export default {
-  name: "TableCell",
-  components: { Icon, Checkbox, TableExpand, TableSlot, Tooltip },
-  inject: ["tableRoot"],
-  props: {
-    prefixCls: String,
-    row: Object,
-    column: Object,
-    naturalIndex: Number,
-    index: Number,
-    checked: Boolean,
-    disabled: Boolean,
-    expanded: Boolean,
-    fixed: {
-      type: [Boolean, String],
-      default: false,
+    name: "TableCell",
+    components: { Icon, Checkbox, TableExpand, TableSlot, Tooltip },
+    inject: ["tableRoot"],
+    props: {
+        prefixCls: String,
+        row: Object,
+        column: Object,
+        naturalIndex: Number,
+        index: Number,
+        checked: Boolean,
+        disabled: Boolean,
+        expanded: Boolean,
+        fixed: {
+            type: [Boolean, String],
+            default: false
+        }
     },
-  },
-  data() {
-    return {
-      renderType: "",
-      uid: -1,
-      context: this.$parent.$parent.$parent.currentContext,
-      showTooltip: false,
-      tooltipShow: false,
-    };
-  },
-  computed: {
-    classes() {
-      return [
-        `${this.prefixCls}-cell`,
-        {
-          [`${this.prefixCls}-hidden`]:
-            !this.fixed &&
-            this.column.fixed &&
-            (this.column.fixed === "left" || this.column.fixed === "right"),
-          [`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false,
-          [`${this.prefixCls}-cell-with-expand`]: this.renderType === "expand",
-          [`${this.prefixCls}-cell-with-selection`]:
-            this.renderType === "selection",
-        },
-      ];
+    data() {
+        return {
+            renderType: "",
+            uid: -1,
+            context: this.$parent.$parent.$parent.currentContext,
+            showTooltip: false,
+            tooltipShow: false
+        };
     },
-    expandCls() {
-      return [
-        `${this.prefixCls}-cell-expand`,
-        {
-          [`${this.prefixCls}-cell-expand-expanded`]: this.expanded,
+    computed: {
+        classes() {
+            return [
+                `${this.prefixCls}-cell`,
+                {
+                    [`${this.prefixCls}-hidden`]:
+                        !this.fixed &&
+                        this.column.fixed &&
+                        (this.column.fixed === "left" ||
+                            this.column.fixed === "right"),
+                    [`${this.prefixCls}-cell-ellipsis`]:
+                        this.column.ellipsis || false,
+                    [`${this.prefixCls}-cell-with-expand`]:
+                        this.renderType === "expand",
+                    [`${this.prefixCls}-cell-with-selection`]:
+                        this.renderType === "selection"
+                }
+            ];
         },
-      ];
-    },
-    cellText() {
-      return (row, column) => {
-        if (column.type === "date") {
-          const format = column.format || DEFAULT_FORMATS[column.dateType];
-          const formatter = (
-            TYPE_VALUE_RESOLVER_MAP["datetime"] ||
-            TYPE_VALUE_RESOLVER_MAP["default"]
-          ).formatter;
+        expandCls() {
+            return [
+                `${this.prefixCls}-cell-expand`,
+                {
+                    [`${this.prefixCls}-cell-expand-expanded`]: this.expanded
+                }
+            ];
+        },
+        cellText() {
+            return (row, column) => {
+                if (column.type === "date") {
+                    const format =
+                        column.format || DEFAULT_FORMATS[column.dateType];
+                    const formatter = (
+                        TYPE_VALUE_RESOLVER_MAP["datetime"] ||
+                        TYPE_VALUE_RESOLVER_MAP["default"]
+                    ).formatter;
 
-          return formatter(row[column.key], format);
+                    return formatter(row[column.key], format);
+                }
+                return row[column.key];
+            };
         }
-        return row[column.key];
-      };
-    },
-  },
-  methods: {
-    toggleSelect() {
-      this.$parent.$parent.$parent.toggleSelect(this.index);
-    },
-    toggleExpand() {
-      this.$parent.$parent.$parent.toggleExpand(this.index);
-    },
-    handleClick() {},
-    handleTooltipIn() {
-      const $content = this.$refs.content;
-      this.showTooltip = $content.scrollWidth > $content.offsetWidth;
-    },
-    handleTooltipOut() {
-      this.showTooltip = false;
-    },
-    handleTooltipShow() {
-      this.tooltipShow = true;
     },
-    handleTooltipHide() {
-      this.tooltipShow = false;
+    methods: {
+        toggleSelect() {
+            this.$parent.$parent.$parent.toggleSelect(this.index);
+        },
+        toggleExpand() {
+            this.$parent.$parent.$parent.toggleExpand(this.index);
+        },
+        handleClick() {},
+        handleTooltipIn() {
+            const $content = this.$refs.content;
+            this.showTooltip = $content.scrollWidth > $content.offsetWidth;
+        },
+        handleTooltipOut() {
+            this.showTooltip = false;
+        },
+        handleTooltipShow() {
+            this.tooltipShow = true;
+        },
+        handleTooltipHide() {
+            this.tooltipShow = false;
+        }
     },
-  },
-  created() {
-    if (this.column.type === "index") {
-      this.renderType = "index";
-    } else if (this.column.type === "selection") {
-      this.renderType = "selection";
-    } else if (this.column.type === "html") {
-      this.renderType = "html";
-    } else if (this.column.type === "expand") {
-      this.renderType = "expand";
-    } else if (this.column.render) {
-      this.renderType = "render";
-    } else if (this.column.slot) {
-      this.renderType = "slot";
-    } else {
-      this.renderType = "normal";
-    }
+    created() {
+        if (this.column.type === "index") {
+            this.renderType = "index";
+        } else if (this.column.type === "selection") {
+            this.renderType = "selection";
+        } else if (this.column.type === "html") {
+            this.renderType = "html";
+        } else if (this.column.type === "expand") {
+            this.renderType = "expand";
+        } else if (this.column.render) {
+            this.renderType = "render";
+        } else if (this.column.slot) {
+            this.renderType = "slot";
+        } else {
+            this.renderType = "normal";
+        }
 
-    if (this.tableRoot.defaultCell === true) {
-      this.renderType = "slot";
+        if (this.tableRoot.defaultCell === true) {
+            this.renderType = "slot";
+        }
     }
-  },
 };
 </script>
diff --git a/src/components/table/headFilterSlot.js b/src/components/table/headFilterSlot.js
index aefeab0..43c5e74 100644
--- a/src/components/table/headFilterSlot.js
+++ b/src/components/table/headFilterSlot.js
@@ -23,6 +23,7 @@ export default {
                     "bee-filter-" + ctx.props.column.key
                 ]({
                     column: ctx.props.column,
+                    columns: ctx.injections.tableRoot.filterRows,
                     index: ctx.props.index,
                     doSortAndFilter: () => {
                         ctx.injections.tableRoot.doSortAndFilter(
@@ -43,6 +44,7 @@ export default {
                     ctx.props.column.headFilterSlot
                 ]({
                     column: ctx.props.column,
+                    columns: ctx.injections.tableRoot.filterRows,
                     index: ctx.props.index,
                     doSortAndFilter: () => {
                         ctx.injections.tableRoot.doSortAndFilter(
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 4a3de16..244de76 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -211,653 +211,671 @@ import renderHeader from "./header";
 import Mixin from "./mixin";
 import Locale from "../../mixins/locale";
 import throttle from "lodash.throttle";
-import { getFilterMethod } from "./util";
 
 export default {
-  name: "TableHead",
-  mixins: [Mixin, Locale],
-  components: {
-    CheckboxGroup,
-    Checkbox,
-    Poptip,
-    TableHeadSlot,
-    TableHeadFilterSlot,
-    iButton,
-    renderHeader,
-    TableTr,
-  },
-  inject: ["tableRoot"],
-  props: {
-    prefixCls: String,
-    styleObject: Object,
-    columns: Array,
-    objData: Object,
-    data: Array,
-    columnsWidth: Object,
-    fixed: {
-      type: [Boolean, String],
-      default: false,
-    },
-    showFilter: {
-      type: Boolean,
-      default: true,
-    },
-    columnRows: Array,
-    fixedColumnRows: Array,
-    filterActions: Array,
-    filterRows: Array,
-  },
-  data() {
-    return {
-      onInputEvt: (e, c) => {},
-      draggingColumn: null,
-      dragging: false,
-      dragState: {},
-
-      numberFilter: [
-        {
-          filterOperation: "Equals",
-          displayName: this.tableRoot.localeFilterEqual,
-          placeholder: "",
-          icon: "equil",
-        },
-        {
-          filterOperation: "NotEquals",
-          displayName: this.tableRoot.localeFilterNotEqual,
-          placeholder: "",
-          icon: "notequil",
-        },
-        {
-          filterOperation: "Less",
-          displayName: this.tableRoot.localeFilterLess,
-          placeholder: "",
-          icon: "less",
-        },
-        {
-          filterOperation: "Greater",
-          displayName: this.tableRoot.localeFilterLarger,
-          placeholder: "",
-          icon: "greater",
-        },
-        {
-          filterOperation: "LessOrEquals",
-          displayName: this.tableRoot.localeFilterLessEqual,
-          placeholder: "",
-          icon: "lessEquil",
-        },
-        {
-          filterOperation: "GreaterOrEquals",
-          displayName: this.tableRoot.localeFilterLargerEqual,
-          placeholder: "",
-          icon: "greaterEquil",
-        },
-        {
-          filterOperation: "Between",
-          displayName: this.tableRoot.localeFilterBetween,
-          placeholder: this.tableRoot.localeFilterBetweenPlaceHolder,
-          icon: "bettween",
-        },
-
-        {
-          filterOperation: "Reset",
-          displayName: this.tableRoot.localeResetFilter,
-          placeholder: "",
-          icon: "search",
-        },
-      ],
-    };
-  },
-  computed: {
-    cellWidth() {
-      return (column) => {
-        let width = "";
-        if (column.width) {
-          width = column.width;
-        } else if (this.columnsWidth[column._index]) {
-          width = this.columnsWidth[column._index].width;
-        }
-        if (width === "0") width = "";
-
-        return width;
-      };
-    },
-    styles() {
-      const style = Object.assign({}, this.styleObject);
-      const width = parseInt(this.styleObject.width);
-      style.width = `${width}px`;
-      return style;
-    },
-    isSelectAll() {
-      let isSelectAll = true;
-      if (!this.data.length) isSelectAll = false;
-      if (!this.data.find((item) => !item._disabled)) isSelectAll = false;
-      for (let i = 0; i < this.data.length; i++) {
-        if (
-          !this.objData[this.data[i]._index]._isChecked &&
-          !this.objData[this.data[i]._index]._isDisabled
-        ) {
-          isSelectAll = false;
-          break;
-        }
-      }
-
-      return isSelectAll;
-    },
-    stringFilter() {
-      return [
-        {
-          filterOperation: "Contains",
-          displayName: this.tableRoot.localeFilterContain,
-          placeholder: "",
-          icon: "contain",
-        },
-        {
-          filterOperation: "NotContains",
-          displayName: this.tableRoot.localeFilterNotContain,
-          placeholder: "",
-          icon: "notContain",
-        },
-        {
-          filterOperation: "StartsWith",
-          displayName: this.tableRoot.localeFilterStartWith,
-          placeholder: "",
-          icon: "startWith",
-        },
-        {
-          filterOperation: "EndsWith",
-          displayName: this.tableRoot.localeFilterEndWith,
-          placeholder: "",
-          icon: "endWith",
-        },
-        {
-          filterOperation: "Reset",
-          displayName: this.tableRoot.localeResetFilter,
-          placeholder: "",
-          icon: "search",
-        },
-      ];
-    },
-    getFilterList() {
-      return (fcolumn) => {
-        if (fcolumn._type === "number") {
-          return this.numberFilter;
-        }
-        if (fcolumn._type === "string") {
-          return this.stringFilter;
-        }
-        if (fcolumn._type === "date") {
-          return this.dateFilter(fcolumn);
-        }
-
-        return this.stringFilter;
-      };
-    },
-    headRows() {
-      const isGroup = this.columnRows.length > 1;
-
-      if (isGroup) {
-        return this.fixed ? this.fixedColumnRows : this.columnRows;
-      } else {
-        // return this.fixed ? this.fixedColumnRows : this.columnRows;
-        return [this.columns];
-      }
-    },
-    isSelectDisabled() {
-      let isSelectDisabled = false;
-      if (!this.data.length) isSelectDisabled = true;
-      if (!this.data.find((item) => !item._disabled)) isSelectDisabled = true;
-      return isSelectDisabled;
-    },
-    isFilterPopperShow() {
-      return (column) => {
-        return (
-          (column.searchable !== undefined ? column.searchable : true) ||
-          (!this.fixed && !column.fixed)
-        );
-      };
-    },
-  },
-  watch: {
-    filterRows: {
-      handler(nValue, old) {},
-      deep: true,
-      immediate: true,
-    },
-  },
-  methods: {
-    dateFilter(column) {
-      const dateTypes = ["date", "datetime", "year", "month"];
-
-      const curDateType = column.dateType
-        ? dateTypes.some((p) => p === column.dateType)
-          ? column.dateType
-          : "date"
-        : "date";
-
-      return [
-        {
-          filterOperation: "Equals",
-          displayName: this.tableRoot.localeFilterEqual,
-          placeholder: "",
-          dateType: curDateType,
-          icon: "equil",
-        },
-        {
-          filterOperation: "NotEquals",
-          displayName: this.tableRoot.localeFilterNotEqual,
-          placeholder: "",
-          dateType: curDateType,
-          icon: "notequil",
-        },
-        {
-          filterOperation: "Less",
-          displayName: this.tableRoot.localeFilterLess,
-          placeholder: "",
-          dateType: curDateType,
-          icon: "less",
-        },
-        {
-          filterOperation: "Greater",
-          displayName: this.tableRoot.localeFilterLarger,
-          placeholder: "",
-          dateType: curDateType,
-          icon: "greater",
-        },
-        {
-          filterOperation: "LessOrEquals",
-          displayName: this.tableRoot.localeFilterLessEqual,
-          placeholder: "",
-          dateType: curDateType,
-          icon: "lessEquil",
-        },
-        {
-          filterOperation: "GreaterOrEquals",
-          displayName: this.tableRoot.localeFilterLargerEqual,
-          placeholder: "",
-          dateType: curDateType,
-          icon: "greaterEquil",
-        },
-        {
-          filterOperation: "Between",
-          displayName: this.tableRoot.localeFilterBetween,
-          placeholder: this.tableRoot.localeFilterBetweenPlaceHolder,
-          dateType: "datetimerange",
-          icon: "bettween",
-        },
-        {
-          filterOperation: "Reset",
-          displayName: this.tableRoot.localeResetFilter,
-          placeholder: "",
-          dateType: curDateType,
-          icon: "search",
-        },
-      ];
-    },
-    handleInput(e, fcolumn) {
-      if (
-        e !== undefined &&
-        (e.inputType === "deleteContentBackward" ||
-          e.inputType === "insertFromPaste")
-      ) {
-        this.onInputEvt(e, fcolumn);
-      } else {
-        if (
-          e === undefined ||
-          e.data === null ||
-          e.data === "" ||
-          e.data.replace(/(^\s*)|(\s*$)/g, "").length == 0
-        ) {
-          fcolumn.filterValue = fcolumn._filterValue;
-
-          this.$parent.doSortAndFilter(null, fcolumn);
-        } else {
-          this.onInputEvt(e, fcolumn);
-        }
-      }
-    },
-    onDateOk(e, fcolumn) {
-      this.$parent.doSortAndFilter(null, fcolumn);
-    },
-    onDateClear(e, fcolumn) {
-      fcolumn._filterValue = null;
-      this.$parent.doSortAndFilter(null, fcolumn);
-    },
-    onDateChange(e, fcolumn) {
-      fcolumn._filterValue = e;
-
-      if (
-        fcolumn._filterOp.dateType === "datetimerange" ||
-        fcolumn._filterOp.dateType === "daterange"
-      ) {
-        if (e === undefined || e === null || e === "") {
-          return;
-        } else {
-          if (e.constructor === Array) {
-            if (e[0] === "") return;
-          }
-          this.$parent.doSortAndFilter(null, fcolumn);
-        }
-      } else {
-        this.$parent.doSortAndFilter(null, fcolumn);
-      }
-    },
-    onInputEnter(e, fcolumn) {
-      fcolumn.filterValue = fcolumn._filterValue;
-      this.$parent.doSortAndFilter(null, fcolumn);
-    },
-    onInput(evt, column) {
-      column.filterValue = column._filterValue;
-      this.$parent.doSortAndFilter(null, column);
-    },
-    cellClasses(column) {
-      return [
-        `${this.prefixCls}-cell`,
-        {
-          [`${this.prefixCls}-hidden`]:
-            !this.fixed &&
-            column.fixed &&
-            (column.fixed === "left" || column.fixed === "right"),
-          [`${this.prefixCls}-cell-with-selection`]:
-            column.type === "selection",
-        },
-      ];
-    },
-    filterDatePickerClass(fcolumn) {
-      return [`${this.prefixCls}-filter-date-picker-content`];
-    },
-    filterDatePickerContentClass(fcolumn) {
-      return [`${this.prefixCls}-filter-date-picker`];
-    },
-    filterCellClasses(column) {
-      return [
-        `${this.prefixCls}-filter-cell`,
-        `${column.title}`,
-        {
-          [`${this.prefixCls}-hidden`]:
-            !this.fixed &&
-            column.fixed &&
-            (column.fixed === "left" || column.fixed === "right"),
-          [`${this.prefixCls}-cell-with-selection`]:
-            column.type === "selection",
-          [`${this.prefixCls}-filter-hidden`]: column.hideFilter,
-        },
-      ];
-    },
-    filterThClasses(fcolumn) {
-      return [
-        {
-          [`th-filter-hidden`]:
-            !this.fixed &&
-            fcolumn.fixed &&
-            (fcolumn.fixed === "left" || fcolumn.fixed === "right"),
-        },
-      ];
+    name: "TableHead",
+    mixins: [Mixin, Locale],
+    components: {
+        CheckboxGroup,
+        Checkbox,
+        Poptip,
+        TableHeadSlot,
+        TableHeadFilterSlot,
+        iButton,
+        renderHeader,
+        TableTr
+    },
+    inject: ["tableRoot"],
+    props: {
+        prefixCls: String,
+        styleObject: Object,
+        columns: Array,
+        objData: Object,
+        data: Array,
+        columnsWidth: Object,
+        fixed: {
+            type: [Boolean, String],
+            default: false
+        },
+        showFilter: {
+            type: Boolean,
+            default: true
+        },
+        columnRows: Array,
+        fixedColumnRows: Array,
+        filterActions: Array,
+        filterRows: Array
     },
-    filterThStyle(fcolumn) {
-      if (fcolumn.filterHeight === undefined) {
-        return {};
-      } else {
+    data() {
         return {
-          height: fcolumn.filterHeight + "px",
+            onInputEvt: (e, c) => {},
+            draggingColumn: null,
+            dragging: false,
+            dragState: {},
+
+            numberFilter: [
+                {
+                    filterOperation: "Equal",
+                    displayName: this.tableRoot.localeFilterEqual,
+                    placeholder: "",
+                    icon: "equil"
+                },
+                {
+                    filterOperation: "NotEquals",
+                    displayName: this.tableRoot.localeFilterNotEqual,
+                    placeholder: "",
+                    icon: "notequil"
+                },
+                {
+                    filterOperation: "LessThan",
+                    displayName: this.tableRoot.localeFilterLess,
+                    placeholder: "",
+                    icon: "less"
+                },
+                {
+                    filterOperation: "GreaterThanOrEqual",
+                    displayName: this.tableRoot.localeFilterLarger,
+                    placeholder: "",
+                    icon: "greater"
+                },
+                {
+                    filterOperation: "LessThanOrEqual",
+                    displayName: this.tableRoot.localeFilterLessEqual,
+                    placeholder: "",
+                    icon: "lessEquil"
+                },
+                {
+                    filterOperation: "GreaterOrEquals",
+                    displayName: this.tableRoot.localeFilterLargerEqual,
+                    placeholder: "",
+                    icon: "greaterEquil"
+                },
+                {
+                    filterOperation: "DateRange",
+                    displayName: this.tableRoot.localeFilterDateRange,
+                    placeholder: this.tableRoot
+                        .localeFilterDateRangePlaceHolder,
+                    icon: "bettween"
+                },
+
+                {
+                    filterOperation: "Reset",
+                    displayName: this.tableRoot.localeResetFilter,
+                    placeholder: "",
+                    icon: "search"
+                }
+            ]
         };
-      }
     },
-    scrollBarCellClass() {
-      let hasRightFixed = false;
-      for (let i in this.headRows) {
-        for (let j in this.headRows[i]) {
-          if (this.headRows[i][j].fixed === "right") {
-            hasRightFixed = true;
-            break;
-          }
-          if (hasRightFixed) break;
-        }
-      }
-      return [
-        {
-          [`${this.prefixCls}-hidden`]: hasRightFixed,
+    computed: {
+        cellWidth() {
+            return column => {
+                let width = "";
+                if (column.width) {
+                    width = column.width;
+                } else if (this.columnsWidth[column._index]) {
+                    width = this.columnsWidth[column._index].width;
+                }
+                if (width === "0") width = "";
+
+                return width;
+            };
         },
-      ];
-    },
-    itemClasses(column, item) {
-      return [
-        `${this.prefixCls}-filter-select-item`,
-        {
-          [`${this.prefixCls}-hidden`]:
-            !this.fixed &&
-            column.fixed &&
-            (column.fixed === "left" || column.fixed === "right"),
-          [`${this.prefixCls}-cell-with-selection`]:
-            column.type === "selection",
-        },
-      ];
-    },
-    itemAllClasses(column) {
-      return [
-        `${this.prefixCls}-filter-select-item`,
-        {
-          [`${this.prefixCls}-filter-select-item-selected`]: !column
-            ._filterChecked.length,
-        },
-      ];
-    },
-    filterRowClasses() {
-      return `${this.prefixCls}-filter-row`;
-    },
-    selectAll() {
-      const status = !this.isSelectAll;
-      this.$parent.selectAll(status);
-    },
-    // handleSort(column, type) {
-    //   if (column._sortType === type) {
-    //     type = "normal";
-    //   }
-    //   column._sortType = type;
-    //   this.$parent.handleSort(column, type);
-    // },
-    handleSort(index, type) {
-      // 在固定列时，寻找正确的 index
-
-      const column = this.columns.find((item) => item._index === index);
-      const _index = column._index;
-
-      if (column._sortType === type) {
-        type = "normal";
-      }
-      this.$parent.handleSort(_index, type);
-    },
-    handleSortByHead(column) {
-      if (column.sortable) {
-        const type = column._sortType;
-        if (type === "normal") {
-          this.handleSort(column._index, "asc");
-        } else if (type === "asc") {
-          this.handleSort(column._index, "desc");
-        } else {
-          this.handleSort(column._index, "normal");
-        }
-      }
-    },
-    getColumn(rowIndex, index) {
-      const isGroup = this.columnRows.length > 1;
-
-      if (isGroup) {
-        const id = this.headRows[rowIndex][index].__id;
-        return this.columns.filter((item) => item.__id === id)[0];
-      } else {
-        const col = this.headRows[rowIndex][index];
+        styles() {
+            const style = Object.assign({}, this.styleObject);
+            const width = parseInt(this.styleObject.width);
+            style.width = `${width}px`;
+            return style;
+        },
+        isSelectAll() {
+            let isSelectAll = true;
+            if (!this.data.length) isSelectAll = false;
+            if (!this.data.find(item => !item._disabled)) isSelectAll = false;
+            for (let i = 0; i < this.data.length; i++) {
+                if (
+                    !this.objData[this.data[i]._index]._isChecked &&
+                    !this.objData[this.data[i]._index]._isDisabled
+                ) {
+                    isSelectAll = false;
+                    break;
+                }
+            }
 
-        return col;
-      }
-    },
-    getColumnIsFiltered(column) {
-      if (column) {
-        return column._isFiltered;
-      } else {
-        return false;
-      }
-    },
-    getColumnSortType(column) {
-      if (column) {
-        return column._sortType;
-      } else {
-        return "normal";
-      }
-    },
-    handleFilter(index) {
-      this.$parent.handleFilter(index);
-    },
-    handleSelect(column, filterOp) {
-      column._filterVisible = false;
-      column._filterOp = filterOp;
-      column._filterIcon = filterOp.icon;
-      column._placeholder = filterOp.placeholder;
-
-      if (filterOp.filterOperation === "Reset") {
-        if (column._type === "string") {
-          column._filterValue = "";
-        } else {
-          column._filterValue = null;
+            return isSelectAll;
+        },
+        stringFilter() {
+            return [
+                {
+                    filterOperation: "Contains",
+                    displayName: this.tableRoot.localeFilterContain,
+                    placeholder: "",
+                    icon: "contain"
+                },
+                {
+                    filterOperation: "NotContains",
+                    displayName: this.tableRoot.localeFilterNotContain,
+                    placeholder: "",
+                    icon: "notContain"
+                },
+                {
+                    filterOperation: "StartsWith",
+                    displayName: this.tableRoot.localeFilterStartWith,
+                    placeholder: "",
+                    icon: "startWith"
+                },
+                {
+                    filterOperation: "EndsWith",
+                    displayName: this.tableRoot.localeFilterEndWith,
+                    placeholder: "",
+                    icon: "endWith"
+                },
+                {
+                    filterOperation: "Reset",
+                    displayName: this.tableRoot.localeResetFilter,
+                    placeholder: "",
+                    icon: "search"
+                }
+            ];
+        },
+        getFilterList() {
+            return fcolumn => {
+                if (fcolumn._type === "number") {
+                    return this.numberFilter;
+                }
+                if (fcolumn._type === "string") {
+                    return this.stringFilter;
+                }
+                if (fcolumn._type === "date") {
+                    return this.dateFilter(fcolumn);
+                }
+
+                return this.stringFilter;
+            };
+        },
+        headRows() {
+            const isGroup = this.columnRows.length > 1;
+
+            if (isGroup) {
+                return this.fixed ? this.fixedColumnRows : this.columnRows;
+            } else {
+                // return this.fixed ? this.fixedColumnRows : this.columnRows;
+                return [this.columns];
+            }
+        },
+        isSelectDisabled() {
+            let isSelectDisabled = false;
+            if (!this.data.length) isSelectDisabled = true;
+            if (!this.data.find(item => !item._disabled))
+                isSelectDisabled = true;
+            return isSelectDisabled;
+        },
+        isFilterPopperShow() {
+            return column => {
+                return (
+                    (column.searchable !== undefined
+                        ? column.searchable
+                        : true) ||
+                    (!this.fixed && !column.fixed)
+                );
+            };
         }
-      }
-
-      if (column._type === "date") {
-        column._dateType = filterOp.dateType;
-      }
-
-      this.$parent.handleFilterSelect(column, filterOp);
     },
-    handleReset(index) {
-      this.$parent.handleFilterReset(index);
-    },
-    handleFilterHide(fcolumn) {
-      this.$parent.handleFilterHide(fcolumn);
+    watch: {
+        filterRows: {
+            handler(nValue, old) {},
+            deep: true,
+            immediate: true
+        }
     },
+    methods: {
+        dateFilter(column) {
+            const dateTypes = [
+                "date",
+                "datetime",
+                "year",
+                "month",
+                "daterange",
+                "datetimerange"
+            ];
+
+            const curDateType = column.dateType
+                ? dateTypes.some(p => p === column.dateType)
+                    ? column.dateType
+                    : "date"
+                : "date";
+
+            return [
+                {
+                    filterOperation: "Equal",
+                    displayName: this.tableRoot.localeFilterEqual,
+                    placeholder: "",
+                    dateType: curDateType,
+                    icon: "equil"
+                },
+                {
+                    filterOperation: "NotEquals",
+                    displayName: this.tableRoot.localeFilterNotEqual,
+                    placeholder: "",
+                    dateType: curDateType,
+                    icon: "notequil"
+                },
+                {
+                    filterOperation: "LessThan",
+                    displayName: this.tableRoot.localeFilterLess,
+                    placeholder: "",
+                    dateType: curDateType,
+                    icon: "less"
+                },
+                {
+                    filterOperation: "GreaterThanOrEqual",
+                    displayName: this.tableRoot.localeFilterLarger,
+                    placeholder: "",
+                    dateType: curDateType,
+                    icon: "greater"
+                },
+                {
+                    filterOperation: "LessThanOrEqual",
+                    displayName: this.tableRoot.localeFilterLessEqual,
+                    placeholder: "",
+                    dateType: curDateType,
+                    icon: "lessEquil"
+                },
+                {
+                    filterOperation: "GreaterOrEquals",
+                    displayName: this.tableRoot.localeFilterLargerEqual,
+                    placeholder: "",
+                    dateType: curDateType,
+                    icon: "greaterEquil"
+                },
+                {
+                    filterOperation: "DateRange",
+                    displayName: this.tableRoot.localeFilterDateRange,
+                    placeholder: this.tableRoot
+                        .localeFilterDateRangePlaceHolder,
+                    dateType:
+                        curDateType === "date" ? "daterange" : "datetimerange",
+                    icon: "bettween"
+                },
+                {
+                    filterOperation: "Reset",
+                    displayName: this.tableRoot.localeResetFilter,
+                    placeholder: "",
+                    dateType: curDateType,
+                    icon: "search"
+                }
+            ];
+        },
+        handleInput(e, fcolumn) {
+            if (
+                e !== undefined &&
+                (e.inputType === "deleteContentBackward" ||
+                    e.inputType === "insertFromPaste")
+            ) {
+                this.onInputEvt(e, fcolumn);
+            } else {
+                if (
+                    e === undefined ||
+                    e.data === null ||
+                    e.data === "" ||
+                    e.data.replace(/(^\s*)|(\s*$)/g, "").length == 0
+                ) {
+                    fcolumn.filterValue = fcolumn._filterValue;
+
+                    this.$parent.doSortAndFilter(null, fcolumn);
+                } else {
+                    this.onInputEvt(e, fcolumn);
+                }
+            }
+        },
+        onDateOk(e, fcolumn) {
+            this.$parent.doSortAndFilter(null, fcolumn);
+        },
+        onDateClear(e, fcolumn) {
+            fcolumn._filterValue = null;
+            this.$parent.doSortAndFilter(null, fcolumn);
+        },
+        onDateChange(e, fcolumn) {
+            fcolumn._filterValue = e;
+
+            if (
+                fcolumn._filterOp.dateType === "datetimerange" ||
+                fcolumn._filterOp.dateType === "daterange"
+            ) {
+                if (e === undefined || e === null || e === "") {
+                    return;
+                } else {
+                    if (e.constructor === Array) {
+                        if (e[0] === "") return;
+                    }
+                    this.$parent.doSortAndFilter(null, fcolumn);
+                }
+            } else {
+                this.$parent.doSortAndFilter(null, fcolumn);
+            }
+        },
+        onInputEnter(e, fcolumn) {
+            fcolumn.filterValue = fcolumn._filterValue;
+            this.$parent.doSortAndFilter(null, fcolumn);
+        },
+        onInput(evt, column) {
+            column.filterValue = column._filterValue;
+            this.$parent.doSortAndFilter(null, column);
+        },
+        cellClasses(column) {
+            return [
+                `${this.prefixCls}-cell`,
+                {
+                    [`${this.prefixCls}-hidden`]:
+                        !this.fixed &&
+                        column.fixed &&
+                        (column.fixed === "left" || column.fixed === "right"),
+                    [`${this.prefixCls}-cell-with-selection`]:
+                        column.type === "selection"
+                }
+            ];
+        },
+        filterDatePickerClass(fcolumn) {
+            return [`${this.prefixCls}-filter-date-picker-content`];
+        },
+        filterDatePickerContentClass(fcolumn) {
+            return [`${this.prefixCls}-filter-date-picker`];
+        },
+        filterCellClasses(column) {
+            return [
+                `${this.prefixCls}-filter-cell`,
+                `${column.title}`,
+                {
+                    [`${this.prefixCls}-hidden`]:
+                        !this.fixed &&
+                        column.fixed &&
+                        (column.fixed === "left" || column.fixed === "right"),
+                    [`${this.prefixCls}-cell-with-selection`]:
+                        column.type === "selection",
+                    [`${this.prefixCls}-filter-hidden`]: column.hideFilter
+                }
+            ];
+        },
+        filterThClasses(fcolumn) {
+            return [
+                {
+                    [`th-filter-hidden`]:
+                        !this.fixed &&
+                        fcolumn.fixed &&
+                        (fcolumn.fixed === "left" || fcolumn.fixed === "right")
+                }
+            ];
+        },
+        filterThStyle(fcolumn) {
+            if (fcolumn.filterHeight === undefined) {
+                return {};
+            } else {
+                return {
+                    height: fcolumn.filterHeight + "px"
+                };
+            }
+        },
+        scrollBarCellClass() {
+            let hasRightFixed = false;
+            for (let i in this.headRows) {
+                for (let j in this.headRows[i]) {
+                    if (this.headRows[i][j].fixed === "right") {
+                        hasRightFixed = true;
+                        break;
+                    }
+                    if (hasRightFixed) break;
+                }
+            }
+            return [
+                {
+                    [`${this.prefixCls}-hidden`]: hasRightFixed
+                }
+            ];
+        },
+        itemClasses(column, item) {
+            return [
+                `${this.prefixCls}-filter-select-item`,
+                {
+                    [`${this.prefixCls}-hidden`]:
+                        !this.fixed &&
+                        column.fixed &&
+                        (column.fixed === "left" || column.fixed === "right"),
+                    [`${this.prefixCls}-cell-with-selection`]:
+                        column.type === "selection"
+                }
+            ];
+        },
+        itemAllClasses(column) {
+            return [
+                `${this.prefixCls}-filter-select-item`,
+                {
+                    [`${this.prefixCls}-filter-select-item-selected`]: !column
+                        ._filterChecked.length
+                }
+            ];
+        },
+        filterRowClasses() {
+            return `${this.prefixCls}-filter-row`;
+        },
+        selectAll() {
+            const status = !this.isSelectAll;
+            this.$parent.selectAll(status);
+        },
+        // handleSort(column, type) {
+        //   if (column._sortType === type) {
+        //     type = "normal";
+        //   }
+        //   column._sortType = type;
+        //   this.$parent.handleSort(column, type);
+        // },
+        handleSort(index, type) {
+            // 在固定列时，寻找正确的 index
+
+            const column = this.columns.find(item => item._index === index);
+            const _index = column._index;
+
+            if (column._sortType === type) {
+                type = "normal";
+            }
+            this.$parent.handleSort(_index, type);
+        },
+        handleSortByHead(column) {
+            if (column.sortable) {
+                const type = column._sortType;
+                if (type === "normal") {
+                    this.handleSort(column._index, "asc");
+                } else if (type === "asc") {
+                    this.handleSort(column._index, "desc");
+                } else {
+                    this.handleSort(column._index, "normal");
+                }
+            }
+        },
+        getColumn(rowIndex, index) {
+            const isGroup = this.columnRows.length > 1;
 
-    handleMouseDown(column, event) {
-      if (this.$isServer) return;
-
-      if (this.draggingColumn) {
-        this.dragging = true;
-
-        const table = this.$parent;
-        const tableEl = table.$el;
-        const tableLeft = tableEl.getBoundingClientRect().left;
-        const columnEl = this.$el.querySelector(
-          `th.bee-table-column-${column.__id}`
-        );
-        const columnRect = columnEl.getBoundingClientRect();
-        const minLeft = columnRect.left - tableLeft + 30;
-
-        table.showResizeLine = true;
-
-        this.dragState = {
-          startMouseLeft: event.clientX,
-          startLeft: columnRect.right - tableLeft,
-          startColumnLeft: columnRect.left - tableLeft,
-          tableLeft,
-        };
-
-        const resizeProxy = table.$refs.resizeLine;
-        resizeProxy.style.left = this.dragState.startLeft + "px";
-
-        document.onselectstart = function () {
-          return false;
-        };
-        document.ondragstart = function () {
-          return false;
-        };
+            if (isGroup) {
+                const id = this.headRows[rowIndex][index].__id;
+                return this.columns.filter(item => item.__id === id)[0];
+            } else {
+                const col = this.headRows[rowIndex][index];
 
-        const handleMouseMove = (event) => {
-          const deltaLeft = event.clientX - this.dragState.startMouseLeft;
-          const proxyLeft = this.dragState.startLeft + deltaLeft;
+                return col;
+            }
+        },
+        getColumnIsFiltered(column) {
+            if (column) {
+                return column._isFiltered;
+            } else {
+                return false;
+            }
+        },
+        getColumnSortType(column) {
+            if (column) {
+                return column._sortType;
+            } else {
+                return "normal";
+            }
+        },
+        handleFilter(index) {
+            this.$parent.handleFilter(index);
+        },
+        handleSelect(column, filterOp) {
+            column._filterVisible = false;
+            column._filterOp = filterOp;
+            column._filterIcon = filterOp.icon;
+            column._placeholder = filterOp.placeholder;
+
+            if (filterOp.filterOperation === "Reset") {
+                if (column._type === "string") {
+                    column._filterValue = "";
+                } else {
+                    column._filterValue = null;
+                }
+            }
 
-          resizeProxy.style.left = Math.max(minLeft, proxyLeft) + "px";
-        };
+            if (column._type === "date") {
+                column._dateType = filterOp.dateType;
+            }
 
-        const handleMouseUp = () => {
-          if (this.dragging) {
-            const { startColumnLeft, startLeft } = this.dragState;
+            this.$parent.handleFilterSelect(column, filterOp);
+        },
+        handleReset(index) {
+            this.$parent.handleFilterReset(index);
+        },
+        handleFilterHide(fcolumn) {
+            this.$parent.handleFilterHide(fcolumn);
+        },
 
-            const finalLeft = parseInt(resizeProxy.style.left, 10);
-            const columnWidth = finalLeft - startColumnLeft;
+        handleMouseDown(column, event) {
+            if (this.$isServer) return;
+
+            if (this.draggingColumn) {
+                this.dragging = true;
+
+                const table = this.$parent;
+                const tableEl = table.$el;
+                const tableLeft = tableEl.getBoundingClientRect().left;
+                const columnEl = this.$el.querySelector(
+                    `th.bee-table-column-${column.__id}`
+                );
+                const columnRect = columnEl.getBoundingClientRect();
+                const minLeft = columnRect.left - tableLeft + 30;
+
+                table.showResizeLine = true;
+
+                this.dragState = {
+                    startMouseLeft: event.clientX,
+                    startLeft: columnRect.right - tableLeft,
+                    startColumnLeft: columnRect.left - tableLeft,
+                    tableLeft
+                };
+
+                const resizeProxy = table.$refs.resizeLine;
+                resizeProxy.style.left = this.dragState.startLeft + "px";
+
+                document.onselectstart = function() {
+                    return false;
+                };
+                document.ondragstart = function() {
+                    return false;
+                };
+
+                const handleMouseMove = event => {
+                    const deltaLeft =
+                        event.clientX - this.dragState.startMouseLeft;
+                    const proxyLeft = this.dragState.startLeft + deltaLeft;
+
+                    resizeProxy.style.left =
+                        Math.max(minLeft, proxyLeft) + "px";
+                };
+
+                const handleMouseUp = () => {
+                    if (this.dragging) {
+                        const { startColumnLeft, startLeft } = this.dragState;
+
+                        const finalLeft = parseInt(resizeProxy.style.left, 10);
+                        const columnWidth = finalLeft - startColumnLeft;
+
+                        const _column = table.filterRows.find(
+                            item => item.__id === column.__id
+                        );
+
+                        const hColumn = this.columns.find(
+                            item => item.__id === column.__id
+                        );
+
+                        if (_column) {
+                            _column.width = columnWidth;
+                            hColumn.width = columnWidth;
+
+                            const cIndex = this.$parent.cloneColumns.findIndex(
+                                p => p.__id === hColumn.__id
+                            );
+
+                            this.$parent.$set(
+                                this.$parent.cloneColumns,
+                                cIndex,
+                                hColumn
+                            );
+                        }
+
+                        table.$emit(
+                            "on-column-width-resize",
+                            _column.width,
+                            startLeft - startColumnLeft,
+                            column,
+                            event
+                        );
+
+                        document.body.style.cursor = "";
+                        this.dragging = false;
+                        this.draggingColumn = null;
+                        this.dragState = {};
+
+                        table.showResizeLine = false;
+                    }
+
+                    document.removeEventListener("mousemove", handleMouseMove);
+                    document.removeEventListener("mouseup", handleMouseUp);
+                    document.onselectstart = null;
+                    document.ondragstart = null;
+                };
+
+                document.addEventListener("mousemove", handleMouseMove);
+                document.addEventListener("mouseup", handleMouseUp);
+            }
+        },
+        handleMouseMove(column, event) {
+            let target = event.target;
 
-            const _column = table.filterRows.find(
-              (item) => item.__id === column.__id
-            );
+            while (target && target.tagName !== "TH") {
+                target = target.parentNode;
+            }
 
-            const hColumn = this.columns.find(
-              (item) => item.__id === column.__id
-            );
+            if (!column || !column.resizable) return;
 
-            if (_column) {
-              _column.width = columnWidth;
-              hColumn.width = columnWidth;
+            if (!this.dragging) {
+                let rect = target.getBoundingClientRect();
 
-              const cIndex = this.$parent.cloneColumns.findIndex(
-                (p) => p.__id === hColumn.__id
-              );
+                const bodyStyle = document.body.style;
 
-              this.$parent.$set(this.$parent.cloneColumns, cIndex, hColumn);
+                if (rect.width > 12 && rect.right - event.pageX < 8) {
+                    bodyStyle.cursor = "col-resize";
+                    this.draggingColumn = column;
+                } else if (!this.dragging) {
+                    bodyStyle.cursor = "";
+                    this.draggingColumn = null;
+                }
             }
-
-            table.$emit(
-              "on-column-width-resize",
-              _column.width,
-              startLeft - startColumnLeft,
-              column,
-              event
-            );
-
+        },
+        handleMouseOut() {
+            if (this.$isServer) return;
             document.body.style.cursor = "";
-            this.dragging = false;
-            this.draggingColumn = null;
-            this.dragState = {};
-
-            table.showResizeLine = false;
-          }
-
-          document.removeEventListener("mousemove", handleMouseMove);
-          document.removeEventListener("mouseup", handleMouseUp);
-          document.onselectstart = null;
-          document.ondragstart = null;
-        };
-
-        document.addEventListener("mousemove", handleMouseMove);
-        document.addEventListener("mouseup", handleMouseUp);
-      }
-    },
-    handleMouseMove(column, event) {
-      let target = event.target;
-
-      while (target && target.tagName !== "TH") {
-        target = target.parentNode;
-      }
-
-      if (!column || !column.resizable) return;
-
-      if (!this.dragging) {
-        let rect = target.getBoundingClientRect();
-
-        const bodyStyle = document.body.style;
-
-        if (rect.width > 12 && rect.right - event.pageX < 8) {
-          bodyStyle.cursor = "col-resize";
-          this.draggingColumn = column;
-        } else if (!this.dragging) {
-          bodyStyle.cursor = "";
-          this.draggingColumn = null;
         }
-      }
-    },
-    handleMouseOut() {
-      if (this.$isServer) return;
-      document.body.style.cursor = "";
     },
-  },
 
-  created() {
-    this.onInputEvt = throttle(this.onInput, 3500);
-  },
+    created() {
+        this.onInputEvt = throttle(this.onInput, 3500);
+    }
 };
 </script>
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 19df4b0..5e37655 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -206,8 +206,9 @@
           :filterResultR="localeFilterResultR"
           ref="page"
           style="margin-left: 20px; margin-bottom: 10px"
-          :total="data.length"
-          :filterTotalData="rebuildData.length"
+          :total="total === null ? data.length:total"
+          :current="page"
+          :filterTotalData="filterTotal === null ?rebuildData.length:filterTotal"
           size="small"
           show-elevator
           show-sizer
@@ -238,10 +239,10 @@ import tableSummary from "./summary.vue";
 import Spin from "../spin/spin.vue";
 import Page from "../page/page.vue";
 import {
-  oneOf,
-  getStyle,
-  deepCopy,
-  getScrollBarSize,
+    oneOf,
+    getStyle,
+    deepCopy,
+    getScrollBarSize
 } from "../../utils/assist";
 import { on, off } from "../../utils/dom";
 import Csv from "../../utils/csv";
@@ -251,11 +252,11 @@ import Locale from "../../mixins/locale";
 import Mixin from "./mixin";
 import elementResizeDetectorMaker from "element-resize-detector";
 import {
-  getAllColumns,
-  convertToRows,
-  convertColumnOrder,
-  getRandomStr,
-  getFilterMethod,
+    getAllColumns,
+    convertToRows,
+    convertColumnOrder,
+    getRandomStr,
+    getFilterMethod
 } from "./util";
 
 const prefixCls = "bee-table";
@@ -264,1704 +265,2009 @@ let rowKey = 1;
 let columnKey = 1;
 
 export default {
-  name: "BeeGridTable",
-  mixins: [Mixin, Locale],
-  components: { tableHead, tableBody, tableSummary, Spin, Page },
-  provide() {
-    return {
-      tableRoot: this,
-    };
-  },
-  props: {
-    defaultCell: {
-      type: Boolean,
-      default: false,
-    },
-    data: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    columns: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    size: {
-      validator(value) {
-        return oneOf(value, ["small", "large", "default"]);
-      },
-      default() {
-        return !this.$BEETABLE || this.$BEETABLE.size === ""
-          ? "default"
-          : this.$BEETABLE.size;
-      },
-    },
-    width: {
-      type: [Number, String],
-    },
-    height: {
-      type: [Number, String],
-    },
-
-    maxHeight: {
-      type: [Number, String],
-    },
-    stripe: {
-      type: Boolean,
-      default: false,
-    },
-    border: {
-      type: Boolean,
-      default: false,
-    },
-    showHeader: {
-      type: Boolean,
-      default: true,
-    },
-    showFilter: {
-      type: Boolean,
-      default: true,
-    },
-    highlightRow: {
-      type: Boolean,
-      default: false,
-    },
-    rowClassName: {
-      type: Function,
-      default() {
-        return "";
-      },
-    },
-    context: {
-      type: Object,
-    },
-    noDataText: {
-      type: String,
-    },
-    noFilteredDataText: {
-      type: String,
-    },
-    disabledHover: {
-      type: Boolean,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    draggable: {
-      type: Boolean,
-      default: false,
-    },
-    tooltipTheme: {
-      validator(value) {
-        return oneOf(value, ["dark", "light"]);
-      },
-      default: "dark",
+    name: "BeeGridTable",
+    mixins: [Mixin, Locale],
+    components: { tableHead, tableBody, tableSummary, Spin, Page },
+    provide() {
+        return {
+            tableRoot: this
+        };
     },
+    props: {
+        defaultCell: {
+            type: Boolean,
+            default: false
+        },
+        data: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        columns: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        size: {
+            validator(value) {
+                return oneOf(value, ["small", "large", "default"]);
+            },
+            default() {
+                return !this.$BEETABLE || this.$BEETABLE.size === ""
+                    ? "default"
+                    : this.$BEETABLE.size;
+            }
+        },
+        width: {
+            type: [Number, String]
+        },
+        height: {
+            type: [Number, String]
+        },
 
-    rowKey: {
-      type: Boolean,
-      default: false,
-    },
+        maxHeight: {
+            type: [Number, String]
+        },
+        stripe: {
+            type: Boolean,
+            default: false
+        },
+        border: {
+            type: Boolean,
+            default: false
+        },
+        showHeader: {
+            type: Boolean,
+            default: true
+        },
+        showFilter: {
+            type: Boolean,
+            default: true
+        },
+        highlightRow: {
+            type: Boolean,
+            default: false
+        },
+        rowClassName: {
+            type: Function,
+            default() {
+                return "";
+            }
+        },
+        context: {
+            type: Object
+        },
+        noDataText: {
+            type: String
+        },
+        noFilteredDataText: {
+            type: String
+        },
+        disabledHover: {
+            type: Boolean
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        draggable: {
+            type: Boolean,
+            default: false
+        },
+        tooltipTheme: {
+            validator(value) {
+                return oneOf(value, ["dark", "light"]);
+            },
+            default: "dark"
+        },
 
-    spanMethod: {
-      type: Function,
-    },
+        rowKey: {
+            type: Boolean,
+            default: false
+        },
 
-    showSummary: {
-      type: Boolean,
-      default: false,
-    },
+        spanMethod: {
+            type: Function
+        },
+        fetchMethod: {
+            type: Function
+        },
+        showSummary: {
+            type: Boolean,
+            default: false
+        },
 
-    summaryMethod: {
-      type: Function,
-    },
+        summaryMethod: {
+            type: Function
+        },
 
-    sumText: {
-      type: String,
-    },
-    filterContain: {
-      type: String,
-    },
-    filterNotContain: {
-      type: String,
-    },
-    filterStartWith: {
-      type: String,
-    },
-    filterEndWith: {
-      type: String,
-    },
-    filterResultL: {
-      type: String,
-    },
-    filterResultR: {
-      type: String,
-    },
-    filterEqual: {
-      type: String,
-    },
-    filterNotEqual: {
-      type: String,
-    },
-    filterLess: {
-      type: String,
-    },
-    filterLessEqual: {
-      type: String,
-    },
-    filterLarger: {
-      type: String,
-    },
-    filterLargerEqual: {
-      type: String,
-    },
-    filterBetween: {
-      type: String,
-    },
-    filterBetweenPlaceHolder: {
-      type: String,
-    },
-    resetFilter: {
-      type: String,
-    },
-    showPager: {
-      type: Boolean,
-      default: true,
-    },
-    pageSize: {
-      type: Number,
-      default: 10,
-    },
-    pageCount: {
-      type: Number,
-      default: 4,
-    },
-  },
-  data() {
-    return {
-      ready: false,
-      tableWidth: 0,
-      columnsWidth: {},
-      prefixCls: prefixCls,
-      compiledUids: [],
-      objData: {}, // 增加了 checkbox , highlight-row的属性
-      rebuildDataStr: "[]", // 用于重构 sort or filter
-      renderData: [],
-      cloneColumns: [],
-      columnRows: [],
-      currentIndex: 0,
-      currentSize: 10,
-      originalData: "",
-      filterRows: [],
-      leftFixedColumnRows: [],
-      leftFixedFilterRows: [],
-      rightFixedColumnRows: [],
-      rightFixedFilterRows: [],
-      allColumns: [],
-      showSlotHeader: true,
-      showSlotFooter: true,
-      bodyHeight: 0,
-      scrollBarWidth: getScrollBarSize(),
-      currentContext: this.context,
-      showVerticalScrollBar: false,
-      showHorizontalScrollBar: false,
-      headerWidth: 0,
-      headerHeight: 0,
-      showResizeLine: false,
-    };
-  },
-  computed: {
-    rebuildData() {
-      return JSON.parse(this.rebuildDataStr);
-    },
-    localeNoDataText() {
-      if (this.noDataText === undefined) {
-        return this.t("i.table.noDataText");
-      } else {
-        return this.noDataText;
-      }
-    },
-    localeNoFilteredDataText() {
-      if (this.noFilteredDataText === undefined) {
-        return this.t("i.table.noFilteredDataText");
-      } else {
-        return this.noFilteredDataText;
-      }
-    },
-    localeSumText() {
-      if (this.sumText === undefined) {
-        return this.t("i.table.sumText");
-      } else {
-        return this.sumText;
-      }
-    },
-    localeFilterContain() {
-      if (this.filterContain === undefined) {
-        return this.t("i.table.filterContain");
-      } else {
-        return this.filterContain;
-      }
-    },
-    localeFilterNotContain() {
-      if (this.filterNotContain === undefined) {
-        return this.t("i.table.filterNotContain");
-      } else {
-        return this.filterNotContain;
-      }
-    },
-    localeFilterStartWith() {
-      if (this.filterStartWith === undefined) {
-        return this.t("i.table.filterStartWith");
-      } else {
-        return this.filterStartWith;
-      }
-    },
-    localeFilterEndWith() {
-      if (this.filterEndWith === undefined) {
-        return this.t("i.table.filterEndWith");
-      } else {
-        return this.filterEndWith;
-      }
-    },
-    localeResetFilter() {
-      if (this.resetFilter === undefined) {
-        return this.t("i.table.resetFilter");
-      } else {
-        return this.resetFilter;
-      }
-    },
-    localeFilterResultL() {
-      if (this.filterResultL === undefined) {
-        return this.t("i.table.filterResultL");
-      } else {
-        return this.filterResultL;
-      }
-    },
-    localeFilterResultR() {
-      if (this.filterResultR === undefined) {
-        return this.t("i.table.filterResultR");
-      } else {
-        return this.filterResultR;
-      }
-    },
-    localeFilterEqual() {
-      if (this.filterEqual === undefined) {
-        return this.t("i.table.filterEqual");
-      } else {
-        return this.filterEqual;
-      }
-    },
-    localeFilterNotEqual() {
-      if (this.filterNotEqual === undefined) {
-        return this.t("i.table.filterNotEqual");
-      } else {
-        return this.filterNotEqual;
-      }
-    },
-    localeFilterLess() {
-      if (this.filterLess === undefined) {
-        return this.t("i.table.filterLess");
-      } else {
-        return this.filterLess;
-      }
-    },
-    localeFilterLessEqual() {
-      if (this.filterLessEqual === undefined) {
-        return this.t("i.table.filterLessEqual");
-      } else {
-        return this.filterLessEqual;
-      }
-    },
-    localeFilterLarger() {
-      if (this.filterLarger === undefined) {
-        return this.t("i.table.filterLarger");
-      } else {
-        return this.filterLarger;
-      }
-    },
-    localeFilterLargerEqual() {
-      if (this.filterLargerEqual === undefined) {
-        return this.t("i.table.filterLargerEqual");
-      } else {
-        return this.filterLargerEqual;
-      }
-    },
-    localeFilterBetween() {
-      if (this.filterBetween === undefined) {
-        return this.t("i.table.filterBetween");
-      } else {
-        return this.filterBetween;
-      }
+        sumText: {
+            type: String
+        },
+        filterContain: {
+            type: String
+        },
+        filterNotContain: {
+            type: String
+        },
+        filterStartWith: {
+            type: String
+        },
+        filterEndWith: {
+            type: String
+        },
+        filterResultL: {
+            type: String
+        },
+        filterResultR: {
+            type: String
+        },
+        filterEqual: {
+            type: String
+        },
+        filterNotEqual: {
+            type: String
+        },
+        filterLess: {
+            type: String
+        },
+        filterLessEqual: {
+            type: String
+        },
+        filterLarger: {
+            type: String
+        },
+        filterLargerEqual: {
+            type: String
+        },
+        filterDateRange: {
+            type: String
+        },
+        filterDateRangePlaceHolder: {
+            type: String
+        },
+        resetFilter: {
+            type: String
+        },
+        showPager: {
+            type: Boolean,
+            default: true
+        },
+        pageSize: {
+            type: Number,
+            default: 10
+        },
+        pageCount: {
+            type: Number,
+            default: 4
+        },
+        page: {
+            type: Number,
+            default: 1
+        },
+        filterTotal: {
+            type: Number,
+            default: null
+        },
+        total: {
+            type: Number,
+            default: null
+        },
+        serverSide: {
+            type: Boolean,
+            default: false
+        }
     },
-    localeFilterBetweenPlaceHolder() {
-      if (this.filterBetweenPlaceHolder === undefined) {
-        return this.t("i.table.filterBetweenPlaceHolder");
-      } else {
-        return this.filterBetweenPlaceHolder;
-      }
+    data() {
+        return {
+            ready: false,
+            tableWidth: 0,
+            columnsWidth: {},
+            prefixCls: prefixCls,
+            compiledUids: [],
+            objData: {}, // 增加了 checkbox , highlight-row的属性
+            rebuildDataStr: "[]", // 用于重构 sort or filter
+            renderData: [],
+            cloneColumns: [],
+            columnRows: [],
+            currentIndex: 0,
+            currentSize: 10,
+            originalData: "",
+            filterRows: [],
+            leftFixedColumnRows: [],
+            leftFixedFilterRows: [],
+            rightFixedColumnRows: [],
+            rightFixedFilterRows: [],
+            allColumns: [],
+            showSlotHeader: true,
+            showSlotFooter: true,
+            bodyHeight: 0,
+            scrollBarWidth: getScrollBarSize(),
+            currentContext: this.context,
+            showVerticalScrollBar: false,
+            showHorizontalScrollBar: false,
+            headerWidth: 0,
+            headerHeight: 0,
+            showResizeLine: false
+        };
     },
+    computed: {
+        rebuildData() {
+            return JSON.parse(this.rebuildDataStr);
+        },
+        localeNoDataText() {
+            if (this.noDataText === undefined) {
+                return this.t("i.table.noDataText");
+            } else {
+                return this.noDataText;
+            }
+        },
+        localeNoFilteredDataText() {
+            if (this.noFilteredDataText === undefined) {
+                return this.t("i.table.noFilteredDataText");
+            } else {
+                return this.noFilteredDataText;
+            }
+        },
+        localeSumText() {
+            if (this.sumText === undefined) {
+                return this.t("i.table.sumText");
+            } else {
+                return this.sumText;
+            }
+        },
+        localeFilterContain() {
+            if (this.filterContain === undefined) {
+                return this.t("i.table.filterContain");
+            } else {
+                return this.filterContain;
+            }
+        },
+        localeFilterNotContain() {
+            if (this.filterNotContain === undefined) {
+                return this.t("i.table.filterNotContain");
+            } else {
+                return this.filterNotContain;
+            }
+        },
+        localeFilterStartWith() {
+            if (this.filterStartWith === undefined) {
+                return this.t("i.table.filterStartWith");
+            } else {
+                return this.filterStartWith;
+            }
+        },
+        localeFilterEndWith() {
+            if (this.filterEndWith === undefined) {
+                return this.t("i.table.filterEndWith");
+            } else {
+                return this.filterEndWith;
+            }
+        },
+        localeResetFilter() {
+            if (this.resetFilter === undefined) {
+                return this.t("i.table.resetFilter");
+            } else {
+                return this.resetFilter;
+            }
+        },
+        localeFilterResultL() {
+            if (this.filterResultL === undefined) {
+                return this.t("i.table.filterResultL");
+            } else {
+                return this.filterResultL;
+            }
+        },
+        localeFilterResultR() {
+            if (this.filterResultR === undefined) {
+                return this.t("i.table.filterResultR");
+            } else {
+                return this.filterResultR;
+            }
+        },
+        localeFilterEqual() {
+            if (this.filterEqual === undefined) {
+                return this.t("i.table.filterEqual");
+            } else {
+                return this.filterEqual;
+            }
+        },
+        localeFilterNotEqual() {
+            if (this.filterNotEqual === undefined) {
+                return this.t("i.table.filterNotEqual");
+            } else {
+                return this.filterNotEqual;
+            }
+        },
+        localeFilterLess() {
+            if (this.filterLess === undefined) {
+                return this.t("i.table.filterLess");
+            } else {
+                return this.filterLess;
+            }
+        },
+        localeFilterLessEqual() {
+            if (this.filterLessEqual === undefined) {
+                return this.t("i.table.filterLessEqual");
+            } else {
+                return this.filterLessEqual;
+            }
+        },
+        localeFilterLarger() {
+            if (this.filterLarger === undefined) {
+                return this.t("i.table.filterLarger");
+            } else {
+                return this.filterLarger;
+            }
+        },
+        localeFilterLargerEqual() {
+            if (this.filterLargerEqual === undefined) {
+                return this.t("i.table.filterLargerEqual");
+            } else {
+                return this.filterLargerEqual;
+            }
+        },
+        localeFilterDateRange() {
+            if (this.filterDateRange === undefined) {
+                return this.t("i.table.filterDateRange");
+            } else {
+                return this.filterDateRange;
+            }
+        },
+        localeFilterDateRangePlaceHolder() {
+            if (this.filterDateRangePlaceHolder === undefined) {
+                return this.t("i.table.filterDateRangePlaceHolder");
+            } else {
+                return this.filterDateRangePlaceHolder;
+            }
+        },
 
-    wrapClasses() {
-      return [
-        `${prefixCls}-wrapper`,
-        {
-          [`${prefixCls}-hide`]: !this.ready,
-          [`${prefixCls}-with-header`]: this.showSlotHeader,
-          [`${prefixCls}-with-footer`]: this.showSlotFooter,
-          [`${prefixCls}-with-summary`]: this.showSummary,
-          [`${prefixCls}-wrapper-with-border`]: this.border,
-        },
-      ];
-    },
-    classes() {
-      return [
-        `${prefixCls}`,
-        {
-          [`${prefixCls}-${this.size}`]: !!this.size,
-          [`${prefixCls}-border`]: this.border,
-          [`${prefixCls}-stripe`]: this.stripe,
-          [`${prefixCls}-with-fixed-top`]: !!this.height,
-        },
-      ];
-    },
-    fixedHeaderClasses() {
-      return [
-        `${prefixCls}-fixed-header`,
-        {
-          [`${prefixCls}-fixed-header-with-empty`]: !this.rebuildData.length,
+        wrapClasses() {
+            return [
+                `${prefixCls}-wrapper`,
+                {
+                    [`${prefixCls}-hide`]: !this.ready,
+                    [`${prefixCls}-with-header`]: this.showSlotHeader,
+                    [`${prefixCls}-with-footer`]: this.showSlotFooter,
+                    [`${prefixCls}-with-summary`]: this.showSummary,
+                    [`${prefixCls}-wrapper-with-border`]: this.border
+                }
+            ];
         },
-      ];
-    },
-    styles() {
-      let style = {};
-      let summaryHeight = 0;
-      let pageRowHeight = 60;
-      if (this.showSummary) {
-        if (this.size === "small") summaryHeight = 40;
-        else if (this.size === "large") summaryHeight = 60;
-        else summaryHeight = 48;
-      }
-      if (this.height) {
-        let height = parseInt(this.height) + summaryHeight;
-        if (this.showPager) {
-          style.height = `${height + pageRowHeight}px`;
-        } else {
-          style.height = `${height}px`;
-        }
-      }
-      if (this.maxHeight) {
-        const maxHeight =
-          parseInt(this.maxHeight) + summaryHeight + pageRowHeight;
-        if (this.showPager) {
-          style.maxHeight = `${maxHeight + pageRowHeight}px`;
-        } else {
-          style.maxHeight = `${maxHeight}px`;
-        }
-      }
-      if (this.width) style.width = `${this.width}px`;
-      return style;
-    },
-    tableStyle() {
-      let style = {};
-      if (this.tableWidth !== 0) {
-        let width = "";
-        if (this.bodyHeight === 0) {
-          width = this.tableWidth;
-        } else {
-          width =
-            this.tableWidth -
-            (this.showVerticalScrollBar ? this.scrollBarWidth : 0);
-        }
+        classes() {
+            return [
+                `${prefixCls}`,
+                {
+                    [`${prefixCls}-${this.size}`]: !!this.size,
+                    [`${prefixCls}-border`]: this.border,
+                    [`${prefixCls}-stripe`]: this.stripe,
+                    [`${prefixCls}-with-fixed-top`]: !!this.height
+                }
+            ];
+        },
+        fixedHeaderClasses() {
+            return [
+                `${prefixCls}-fixed-header`,
+                {
+                    [`${prefixCls}-fixed-header-with-empty`]: !this.rebuildData
+                        .length
+                }
+            ];
+        },
+        styles() {
+            let style = {};
+            let summaryHeight = 0;
+            let pageRowHeight = 60;
+            if (this.showSummary) {
+                if (this.size === "small") summaryHeight = 40;
+                else if (this.size === "large") summaryHeight = 60;
+                else summaryHeight = 48;
+            }
+            if (this.height) {
+                let height = parseInt(this.height) + summaryHeight;
+                if (this.showPager) {
+                    style.height = `${height + pageRowHeight}px`;
+                } else {
+                    style.height = `${height}px`;
+                }
+            }
+            if (this.maxHeight) {
+                const maxHeight =
+                    parseInt(this.maxHeight) + summaryHeight + pageRowHeight;
+                if (this.showPager) {
+                    style.maxHeight = `${maxHeight + pageRowHeight}px`;
+                } else {
+                    style.maxHeight = `${maxHeight}px`;
+                }
+            }
+            if (this.width) style.width = `${this.width}px`;
+            return style;
+        },
+        tableStyle() {
+            let style = {};
+            if (this.tableWidth !== 0) {
+                let width = "";
+                if (this.bodyHeight === 0) {
+                    width = this.tableWidth;
+                } else {
+                    width =
+                        this.tableWidth -
+                        (this.showVerticalScrollBar ? this.scrollBarWidth : 0);
+                }
 
-        style.width = `${width}px`;
-      }
-      return style;
-    },
-    tableHeaderStyle() {
-      let style = {};
-      if (this.tableWidth !== 0) {
-        let width = "";
-        width = this.tableWidth;
-        style.width = `${width}px`;
-      }
-      return style;
-    },
-    fixedTableStyle() {
-      let style = {};
-      let width = 0;
-      this.leftFixedColumns.forEach((col) => {
-        if (col.fixed && col.fixed === "left") width += col.width;
-      });
-      style.width = `${width}px`;
-
-      return style;
-    },
-    fixedRightTableStyle() {
-      let style = {};
-      let width = 0;
-      this.rightFixedColumns.forEach((col) => {
-        if (col.fixed && col.fixed === "right") width += col.width;
-      });
-      //width += this.scrollBarWidth;
-      style.width = `${width}px`;
-      style.right = `${this.showVerticalScrollBar ? this.scrollBarWidth : 0}px`;
-      return style;
-    },
-    fixedRightHeaderStyle() {
-      let style = {};
-      let width = 0;
-      let height = this.headerHeight + 1;
-      if (this.showVerticalScrollBar) {
-        width = this.scrollBarWidth;
-      }
-      style.width = `${width}px`;
-      style.height = `${height}px`;
-      return style;
-    },
-    bodyStyle() {
-      let style = {};
-
-      if (this.bodyHeight !== 0) {
-        const height = this.bodyHeight;
-        if (this.height) {
-          style.height = `${height}px`;
-        } else if (this.maxHeight) {
-          style.maxHeight = `${height}px`;
+                style.width = `${width}px`;
+            }
+            return style;
+        },
+        tableHeaderStyle() {
+            let style = {};
+            if (this.tableWidth !== 0) {
+                let width = "";
+                width = this.tableWidth;
+                style.width = `${width}px`;
+            }
+            return style;
+        },
+        fixedTableStyle() {
+            let style = {};
+            let width = 0;
+            this.leftFixedColumns.forEach(col => {
+                if (col.fixed && col.fixed === "left") width += col.width;
+            });
+            style.width = `${width}px`;
+
+            return style;
+        },
+        fixedRightTableStyle() {
+            let style = {};
+            let width = 0;
+            this.rightFixedColumns.forEach(col => {
+                if (col.fixed && col.fixed === "right") width += col.width;
+            });
+            //width += this.scrollBarWidth;
+            style.width = `${width}px`;
+            style.right = `${
+                this.showVerticalScrollBar ? this.scrollBarWidth : 0
+            }px`;
+            return style;
+        },
+        fixedRightHeaderStyle() {
+            let style = {};
+            let width = 0;
+            let height = this.headerHeight + 1;
+            if (this.showVerticalScrollBar) {
+                width = this.scrollBarWidth;
+            }
+            style.width = `${width}px`;
+            style.height = `${height}px`;
+            return style;
+        },
+        bodyStyle() {
+            let style = {};
+
+            if (this.bodyHeight !== 0) {
+                const height = this.bodyHeight;
+                if (this.height) {
+                    style.height = `${height}px`;
+                } else if (this.maxHeight) {
+                    style.maxHeight = `${height}px`;
+                }
+            }
+            return style;
+        },
+        fixedBodyStyle() {
+            let style = {};
+            if (this.bodyHeight !== 0) {
+                let height =
+                    this.bodyHeight -
+                    (this.showHorizontalScrollBar ? this.scrollBarWidth : 0);
+                style.height = this.showHorizontalScrollBar
+                    ? `${height}px`
+                    : `${height - 1}px`;
+            }
+            return style;
+        },
+        normalColumns() {
+            return this.cloneColumns;
+        },
+        leftFixedColumns() {
+            // return this.cloneColumns.filter((p) => p.fixed === "left");
+            return convertColumnOrder(this.cloneColumns, "left");
+        },
+        rightFixedColumns() {
+            //return this.cloneColumns.filter((p) => p.fixed === "right");
+            return convertColumnOrder(this.cloneColumns, "right");
+        },
+        isLeftFixed() {
+            return this.columns.some(col => col.fixed && col.fixed === "left");
+        },
+        isRightFixed() {
+            return this.columns.some(col => col.fixed && col.fixed === "right");
+        },
+
+        summaryData() {
+            if (!this.showSummary) return {};
+
+            let sums = {};
+
+            if (
+                this.filterRows[0] !== undefined &&
+                this.filterRows[0] !== null
+            ) {
+                sums[this.filterRows[0].key] = {
+                    key: this.filterRows[0].key.key,
+                    value: this.localeSumText
+                };
+            }
+
+            if (this.summaryMethod) {
+                sums = this.summaryMethod({
+                    columns: this.filterRows,
+                    data: this.rebuildData
+                });
+            } else {
+                for (let index = 1; index < this.filterRows.length; index++) {
+                    const column = this.filterRows[index];
+
+                    if (!column.showSummary) {
+                        sums[column.key] = {
+                            key: column.key,
+                            value: ""
+                        };
+                        continue;
+                    }
+                    const key = column.key;
+                    if (index === 0) {
+                        sums[column.key] = {
+                            key: column.key,
+                            value: this.localeSumText
+                        };
+                        return;
+                    }
+
+                    if (this.rebuildData !== undefined) {
+                        const values = this.rebuildData.map(item =>
+                            Number(item[column.key])
+                        );
+                        const precisions = [];
+                        let notNumber = true;
+                        values.forEach(value => {
+                            if (!isNaN(value)) {
+                                notNumber = false;
+                                let decimal = ("" + value).split(".")[1];
+                                precisions.push(decimal ? decimal.length : 0);
+                            }
+                        });
+                        const precision = Math.max.apply(null, precisions);
+                        if (!notNumber) {
+                            const currentValue = values.reduce((prev, curr) => {
+                                const value = Number(curr);
+                                if (!isNaN(value)) {
+                                    return parseFloat(
+                                        (prev + curr).toFixed(
+                                            Math.min(precision, 20)
+                                        )
+                                    );
+                                } else {
+                                    return prev;
+                                }
+                            }, 0);
+                            sums[column.key] = {
+                                key: column.key,
+                                value: currentValue
+                            };
+                        } else {
+                            sums[column.key] = {
+                                key: column.key,
+                                value: ""
+                            };
+                        }
+                    }
+                }
+            }
+
+            return sums;
         }
-      }
-      return style;
-    },
-    fixedBodyStyle() {
-      let style = {};
-      if (this.bodyHeight !== 0) {
-        let height =
-          this.bodyHeight -
-          (this.showHorizontalScrollBar ? this.scrollBarWidth : 0);
-        style.height = this.showHorizontalScrollBar
-          ? `${height}px`
-          : `${height - 1}px`;
-      }
-      return style;
-    },
-    normalColumns() {
-      return this.cloneColumns;
-    },
-    leftFixedColumns() {
-      // return this.cloneColumns.filter((p) => p.fixed === "left");
-      return convertColumnOrder(this.cloneColumns, "left");
-    },
-    rightFixedColumns() {
-      //return this.cloneColumns.filter((p) => p.fixed === "right");
-      return convertColumnOrder(this.cloneColumns, "right");
-    },
-    isLeftFixed() {
-      return this.columns.some((col) => col.fixed && col.fixed === "left");
-    },
-    isRightFixed() {
-      return this.columns.some((col) => col.fixed && col.fixed === "right");
     },
+    methods: {
+        onPageChange(pageIndex) {
+            //TODO：如果是服务端渲染，则由服务端提供排序和过滤
+            if (this.serverSide) {
+                //收集每列的排序过滤信息
+
+                if (this.fetchMethod) {
+                    this.fetchMethod(
+                        this.getSortInfo(),
+                        this.getFilterInfo(),
+                        this.$refs.page.currentPage,
+                        this.$refs.page.currentPageSize
+                    );
+                } else {
+                    console.log("not define fetchMethod!");
+                }
+                return;
+            }
+            this.currentIndex = this.$refs.page.currentPage;
+            this.currentSize = this.$refs.page.currentPageSize;
+            this.getRenderData();
+        },
+        onPageSizeChange(pageSize) {
+            //TODO：如果是服务端渲染，则由服务端提供排序和过滤
+            if (this.serverSide) {
+                //收集每列的排序过滤信息
+
+                if (this.fetchMethod) {
+                    this.fetchMethod(
+                        this.getSortInfo(),
+                        this.getFilterInfo(),
+                        this.$refs.page.currentPage,
+                        this.$refs.page.currentPageSize
+                    );
+                } else {
+                    console.log("not define fetchMethod!");
+                }
+                return;
+            }
+            this.currentIndex = this.$refs.page.currentPage;
+            this.currentSize = this.$refs.page.currentPageSize;
+            this.getRenderData();
+        },
+        getRenderData() {
+            if (this.showPager) {
+                var skipNum = (this.currentIndex - 1) * this.currentSize;
+
+                this.renderData =
+                    skipNum + this.currentSize >= this.rebuildData.length
+                        ? this.rebuildData.slice(
+                              skipNum,
+                              this.rebuildData.length
+                          )
+                        : this.rebuildData.slice(
+                              skipNum,
+                              skipNum + this.currentSize
+                          );
+            } else {
+                this.renderData = this.rebuildData;
+            }
+        },
+        makeFilterRows(tempColRows) {
+            let hRows = [];
+            const curColRows = tempColRows;
+            const isGroup = curColRows.length > 1;
+            if (isGroup) {
+                let fRows = [];
+                hRows = this.fixed ? this.fixedColumnRows : curColRows;
+                fRows.push(...this.getFilterColumns(...hRows));
+                hRows = fRows;
+            } else {
+                hRows = [...tempColRows[0]];
+
+                for (var i = 0; i < hRows.length; i++) {
+                    if (
+                        hRows[i].dateType !== null &&
+                        hRows[i].dateType !== undefined &&
+                        hRows[i].type === "date"
+                    ) {
+                        hRows[i]._dateType = hRows[i].dateType;
+                    }
+                }
+            }
+            return hRows;
+        },
+        getFilterColumns(hRows) {
+            let fRows = [];
+            if (hRows !== undefined && hRows !== null) {
+                for (var i = 0; i < hRows.length; i++) {
+                    if (
+                        hRows[i].children === undefined ||
+                        hRows[i].children === null ||
+                        hRows[i].children.length === 0
+                    ) {
+                        if (
+                            hRows[i].dateType !== null &&
+                            hRows[i].dateType !== undefined &&
+                            hRows[i].type === "date"
+                        ) {
+                            hRows[i]._dateType = hRows[i].dateType;
+                        }
+                        fRows.push(hRows[i]);
+                    } else {
+                        fRows.push(...this.getFilterColumns(hRows[i].children));
+                    }
+                }
+            }
+
+            return fRows;
+        },
+        rowClsName(index) {
+            return this.rowClassName(this.data[index], index);
+        },
+        handleResize() {
+            let tableWidth = this.$el.offsetWidth - 1;
+            let columnsWidth = {};
+            let sumMinWidth = 0;
+            let hasWidthColumns = [];
+            let noWidthColumns = [];
+            let maxWidthColumns = [];
+            let noMaxWidthColumns = [];
+            this.filterRows.forEach(col => {
+                if (col.width) {
+                    hasWidthColumns.push(col);
+                } else {
+                    noWidthColumns.push(col);
+                    if (col.minWidth) {
+                        sumMinWidth += col.minWidth;
+                    }
+                    if (col.maxWidth) {
+                        maxWidthColumns.push(col);
+                    } else {
+                        noMaxWidthColumns.push(col);
+                    }
+                }
+                col._width = null;
+            });
+
+            let unUsableWidth = hasWidthColumns
+                .map(cell => cell.width)
+                .reduce((a, b) => a + b, 0);
+            let usableWidth =
+                tableWidth -
+                unUsableWidth -
+                sumMinWidth -
+                (this.showVerticalScrollBar ? this.scrollBarWidth : 0) -
+                1;
+            let usableLength = noWidthColumns.length;
+            let columnWidth = 0;
+            if (usableWidth > 0 && usableLength > 0) {
+                columnWidth = parseInt(usableWidth / usableLength);
+            }
+
+            for (let i = 0; i < this.filterRows.length; i++) {
+                const column = this.filterRows[i];
+                let width =
+                    columnWidth + (column.minWidth ? column.minWidth : 0);
+                if (column.width) {
+                    width = column.width;
+                } else {
+                    if (column._width) {
+                        width = column._width;
+                    } else {
+                        if (column.minWidth > width) {
+                            width = column.minWidth;
+                        } else if (column.maxWidth < width) {
+                            width = column.maxWidth;
+                        }
+
+                        if (usableWidth > 0) {
+                            usableWidth -=
+                                width - (column.minWidth ? column.minWidth : 0);
+                            usableLength--;
+                            if (usableLength > 0) {
+                                columnWidth = parseInt(
+                                    usableWidth / usableLength
+                                );
+                            } else {
+                                columnWidth = 0;
+                            }
+                        } else {
+                            columnWidth = 0;
+                        }
+                    }
+                }
+
+                column._width = width;
+
+                columnsWidth[column._index] = {
+                    width: width
+                };
+            }
+            if (usableWidth > 0) {
+                usableLength = noMaxWidthColumns.length;
+                columnWidth = parseInt(usableWidth / usableLength);
+                for (let i = 0; i < noMaxWidthColumns.length; i++) {
+                    const column = noMaxWidthColumns[i];
+                    let width = column._width + columnWidth;
+                    if (usableLength > 1) {
+                        usableLength--;
+                        usableWidth -= columnWidth;
+                        columnWidth = parseInt(usableWidth / usableLength);
+                    } else {
+                        columnWidth = 0;
+                    }
+
+                    column._width = width;
+
+                    columnsWidth[column._index] = {
+                        width: width
+                    };
+                }
+            }
+
+            this.tableWidth =
+                this.filterRows
+                    .map(cell => cell._width)
+                    .reduce((a, b) => a + b, 0) +
+                (this.showVerticalScrollBar ? this.scrollBarWidth : 0) +
+                1;
+            this.columnsWidth = columnsWidth;
+            this.fixedHeader();
+        },
+        handleMouseIn(_index) {
+            if (this.disabledHover) return;
+            if (this.objData[_index]._isHover) return;
+            this.objData[_index]._isHover = true;
+        },
+        handleMouseOut(_index) {
+            if (this.disabledHover) return;
+            this.objData[_index]._isHover = false;
+        },
+
+        handleCurrentRow(type, _index) {
+            let oldIndex = -1;
+            for (let i in this.objData) {
+                if (this.objData[i]._isHighlight) {
+                    oldIndex = parseInt(i);
+                    this.objData[i]._isHighlight = false;
+                }
+            }
+            if (type === "highlight") this.objData[_index]._isHighlight = true;
+            const oldData =
+                oldIndex < 0
+                    ? null
+                    : JSON.parse(JSON.stringify(this.rebuildData[oldIndex]));
+            const newData =
+                type === "highlight"
+                    ? JSON.parse(JSON.stringify(this.rebuildData[_index]))
+                    : null;
+            this.$emit("on-current-change", newData, oldData);
+        },
+        highlightCurrentRow(_index) {
+            if (!this.highlightRow || this.objData[_index]._isHighlight) return;
+            this.handleCurrentRow("highlight", _index);
+        },
+        clearCurrentRow() {
+            if (!this.highlightRow) return;
+            this.handleCurrentRow("clear");
+        },
+        clickCurrentRow(_index) {
+            this.highlightCurrentRow(_index);
+            this.$emit(
+                "on-row-click",
+                JSON.parse(this.originalData)[_index],
+                _index
+            );
+        },
+        dblclickCurrentRow(_index) {
+            this.highlightCurrentRow(_index);
+            this.$emit(
+                "on-row-dblclick",
+                JSON.parse(this.originalData)[_index],
+                _index
+            );
+        },
+        getSelection() {
+            let selectionIndexes = [];
+            for (let i in this.objData) {
+                if (this.objData[i]._isChecked)
+                    selectionIndexes.push(parseInt(i));
+            }
+            return JSON.parse(
+                JSON.stringify(
+                    this.data.filter(
+                        (data, index) => selectionIndexes.indexOf(index) > -1
+                    )
+                )
+            );
+        },
+        toggleSelect(_index) {
+            let data = {};
+
+            for (let i in this.objData) {
+                if (parseInt(i) === _index) {
+                    data = this.objData[i];
+                    break;
+                }
+            }
+            const status = !data._isChecked;
+
+            this.objData[_index]._isChecked = status;
+
+            const selection = this.getSelection();
+            this.$emit(
+                status ? "on-select" : "on-select-cancel",
+                selection,
+                JSON.parse(JSON.stringify(this.data[_index]))
+            );
+            this.$emit("on-selection-change", selection);
+        },
+        toggleExpand(_index) {
+            let data = {};
+
+            for (let i in this.objData) {
+                if (parseInt(i) === _index) {
+                    data = this.objData[i];
+                    break;
+                }
+            }
+            const status = !data._isExpanded;
+            this.objData[_index]._isExpanded = status;
+            this.$emit(
+                "on-expand",
+                JSON.parse(JSON.stringify(this.rebuildData[_index])),
+                status
+            );
+
+            if (this.height || this.maxHeight) {
+                this.$nextTick(() => this.fixedBody());
+            }
+        },
+        selectAll(status) {
+            for (const data of this.rebuildData) {
+                if (this.objData[data._index]._isDisabled) {
+                    continue;
+                } else {
+                    this.objData[data._index]._isChecked = status;
+                }
+            }
+            const selection = this.getSelection();
+            if (status) {
+                this.$emit("on-select-all", selection);
+            } else {
+                this.$emit("on-select-all-cancel", selection);
+            }
+            this.$emit("on-selection-change", selection);
+        },
+
+        fixedHeader() {
+            if (this.height || this.maxHeight) {
+                this.$nextTick(() => {
+                    const titleHeight =
+                        parseInt(getStyle(this.$refs.title, "height")) || 0;
+                    const headerHeight =
+                        parseInt(getStyle(this.$refs.header, "height")) || 0;
+                    const footerHeight =
+                        parseInt(getStyle(this.$refs.footer, "height")) || 0;
+                    if (this.height) {
+                        this.bodyHeight =
+                            this.height -
+                            titleHeight -
+                            headerHeight -
+                            footerHeight;
+                    } else if (this.maxHeight) {
+                        this.bodyHeight =
+                            this.maxHeight -
+                            titleHeight -
+                            headerHeight -
+                            footerHeight;
+                    }
+                    this.$nextTick(() => this.fixedBody());
+                });
+            } else {
+                this.bodyHeight = 0;
+                this.$nextTick(() => this.fixedBody());
+            }
+        },
+        fixedBody() {
+            if (this.$refs.header) {
+                this.headerWidth = this.$refs.header.children[0].offsetWidth;
+                this.headerHeight = this.$refs.header.children[0].offsetHeight;
+                //this.showHorizontalScrollBar = this.headerWidth>this.$refs.header.offsetWidth;
+            }
+
+            if (!this.$refs.tbody || !this.data || this.data.length === 0) {
+                this.showVerticalScrollBar = false;
+            } else {
+                let bodyContentEl = this.$refs.tbody.$el;
+                let bodyEl = bodyContentEl.parentElement;
+                let bodyContentHeight = bodyContentEl.offsetHeight;
+                let bodyHeight = bodyEl.offsetHeight;
+
+                this.showHorizontalScrollBar =
+                    bodyEl.offsetWidth <
+                    bodyContentEl.offsetWidth +
+                        (this.showVerticalScrollBar ? this.scrollBarWidth : 0);
+                this.showVerticalScrollBar = this.bodyHeight
+                    ? bodyHeight -
+                          (this.showHorizontalScrollBar
+                              ? this.scrollBarWidth
+                              : 0) <
+                      bodyContentHeight
+                    : false;
+
+                if (this.showVerticalScrollBar) {
+                    bodyEl.classList.add(this.prefixCls + "-overflowY");
+                } else {
+                    bodyEl.classList.remove(this.prefixCls + "-overflowY");
+                }
+                if (this.showHorizontalScrollBar) {
+                    bodyEl.classList.add(this.prefixCls + "-overflowX");
+                } else {
+                    bodyEl.classList.remove(this.prefixCls + "-overflowX");
+                }
+            }
+        },
+
+        hideColumnFilter() {
+            this.cloneColumns.forEach(col => (col._filterVisible = false));
+        },
+        handleBodyScroll(event) {
+            if (this.showHeader)
+                this.$refs.header.scrollLeft = event.target.scrollLeft;
+            if (this.isLeftFixed)
+                this.$refs.fixedBody.scrollTop = event.target.scrollTop;
+            if (this.isRightFixed)
+                this.$refs.fixedRightBody.scrollTop = event.target.scrollTop;
+            if (this.showSummary)
+                this.$refs.summary.$el.scrollLeft = event.target.scrollLeft;
+            this.hideColumnFilter();
+        },
+        handleFixedMousewheel(event) {
+            let deltaY = event.deltaY;
+            if (!deltaY && event.detail) {
+                deltaY = event.detail * 40;
+            }
+            if (!deltaY && event.wheelDeltaY) {
+                deltaY = -event.wheelDeltaY;
+            }
+            if (!deltaY && event.wheelDelta) {
+                deltaY = -event.wheelDelta;
+            }
+            if (!deltaY) return;
+            const body = this.$refs.body;
+            const currentScrollTop = body.scrollTop;
+            if (deltaY < 0 && currentScrollTop !== 0) {
+                event.preventDefault();
+            }
+            if (
+                deltaY > 0 &&
+                body.scrollHeight - body.clientHeight > currentScrollTop
+            ) {
+                event.preventDefault();
+            }
+            //body.scrollTop += deltaY;
+            let step = 0;
+            let timeId = setInterval(() => {
+                step += 5;
+                if (deltaY > 0) {
+                    body.scrollTop += 2;
+                } else {
+                    body.scrollTop -= 2;
+                }
+                if (step >= Math.abs(deltaY)) {
+                    clearInterval(timeId);
+                }
+            }, 5);
+        },
+        handleMouseWheel(event) {
+            const deltaX = event.deltaX;
+            const $body = this.$refs.body;
+
+            if (deltaX > 0) {
+                $body.scrollLeft = $body.scrollLeft + 10;
+            } else {
+                $body.scrollLeft = $body.scrollLeft - 10;
+            }
+        },
+        sortData(data, type, index) {
+            const key = this.cloneColumns[index].key;
+            data.sort((a, b) => {
+                if (this.cloneColumns[index].sortMethod) {
+                    return this.cloneColumns[index].sortMethod(
+                        a[key],
+                        b[key],
+                        type
+                    );
+                } else {
+                    if (type === "asc") {
+                        return a[key] > b[key] ? 1 : -1;
+                    } else if (type === "desc") {
+                        return a[key] < b[key] ? 1 : -1;
+                    }
+                }
+            });
+            for (let i = 0; i < data.length; i++) {
+                if (data[i].children && data[i].children.length) {
+                    data[i].children = this.sortData(
+                        data[i].children,
+                        type,
+                        index
+                    );
+                }
+            }
+            return data;
+        },
+        makeDataWithSort(rows) {
+            let data = rows;
+            let sortType = "normal";
+            let sortIndex = -1;
+            let isCustom = false;
+            for (let i = 0; i < this.cloneColumns.length; i++) {
+                if (this.cloneColumns[i]._sortType !== "normal") {
+                    sortType = this.cloneColumns[i]._sortType;
+                    sortIndex = i;
+                    isCustom = this.cloneColumns[i].sortable === "custom";
+                    break;
+                }
+            }
+            if (sortType !== "normal" && !isCustom)
+                data = this.sortData(data, sortType, sortIndex);
+            return data;
+        },
+        getSortInfo() {
+            //获取排序信息
+            const sortInfos = [];
+
+            for (let i = 0; i < this.leftFixedFilterRows.length; i++) {
+                if (this.leftFixedFilterRows[i].fixed === "left") {
+                    if (
+                        this.leftFixedFilterRows[i]._sortType === "desc" ||
+                        this.leftFixedFilterRows[i]._sortType === "asc"
+                    ) {
+                        sortInfos.push({
+                            field: this.leftFixedFilterRows[i].key,
+                            sortType: this.leftFixedFilterRows[i]._sortType
+                        });
+                    }
+                }
+            }
+
+            for (let i = 0; i < this.filterRows.length; i++) {
+                if (
+                    this.filterRows[i].fixed === "right" ||
+                    this.filterRows[i].fixed === "left"
+                ) {
+                    continue;
+                }
+                if (
+                    this.filterRows[i]._sortType === "desc" ||
+                    this.filterRows[i]._sortType === "asc"
+                ) {
+                    sortInfos.push({
+                        field: this.filterRows[i].key,
+                        sortType: this.filterRows[i]._sortType
+                    });
+                }
+            }
+
+            for (let i = 0; i < this.rightFixedFilterRows.length; i++) {
+                if (this.leftFixedFilterRows[i].fixed === "right") {
+                    if (
+                        this.rightFixedFilterRows[i]._sortType === "desc" ||
+                        this.rightFixedFilterRows[i]._sortType === "asc"
+                    ) {
+                        sortInfos.push({
+                            field: this.rightFixedFilterRows[i].key,
+                            sortType: this.rightFixedFilterRows[i]._sortType
+                        });
+                    }
+                }
+            }
+            return sortInfos;
+        },
+        getFilterInfo() {
+            //获取过滤信息
+            const filterInfos = [];
+
+            for (let i = 0; i < this.leftFixedFilterRows.length; i++) {
+                if (this.leftFixedFilterRows[i].fixed === "left") {
+                    if (
+                        this.leftFixedFilterRows[i]._filterValue !== null &&
+                        this.leftFixedFilterRows[i]._filterValue !==
+                            undefined &&
+                        this.leftFixedFilterRows[i]._filterValue !== ""
+                    ) {
+                        filterInfos.push({
+                            field: this.leftFixedFilterRows[i].key,
+                            type: this.leftFixedFilterRows[i]._type,
+                            operation: this.leftFixedFilterRows[i]._filterOp
+                                .filterOperation,
+                            value: this.leftFixedFilterRows[i]._filterValue
+                        });
+                    }
+                }
+            }
+
+            this.filterRows.forEach(column => {
+                if (
+                    column._filterValue !== null &&
+                    column._filterValue !== undefined &&
+                    column._filterValue !== ""
+                ) {
+                    filterInfos.push({
+                        field: column.key,
+                        type: column._type,
+                        operation: column._filterOp.filterOperation,
+                        value: column._filterValue
+                    });
+                } else {
+                }
+            });
+            for (let i = 0; i < this.rightFixedFilterRows.length; i++) {
+                if (this.rightFixedFilterRows[i].fixed === "right") {
+                    if (
+                        this.rightFixedFilterRows[i]._filterValue !== null &&
+                        this.rightFixedFilterRows[i]._filterValue !==
+                            undefined &&
+                        this.rightFixedFilterRows[i]._filterValue !== ""
+                    ) {
+                        filterInfos.push({
+                            field: this.rightFixedFilterRows[i].key,
+                            type: this.rightFixedFilterRows[i]._type,
+                            operation: this.rightFixedFilterRows[i]._filterOp
+                                .filterOperation,
+                            value: this.rightFixedFilterRows[i]._filterValue
+                        });
+                    }
+                }
+            }
+            return filterInfos;
+        },
 
-    summaryData() {
-      if (!this.showSummary) return {};
+        handleSort(_index, type) {
+            //TODO：如果是服务端渲染，则由服务端提供排序
+            if (this.serverSide) {
+                //收集每列的排序过滤信息
+                if (this.fetchMethod) {
+                    const index = this.GetOriginalIndex(_index);
+                    this.cloneColumns[index]._sortType = type;
+
+                    this.updateColumnSortType(this.cloneColumns[index], type);
+
+                    this.fetchMethod(
+                        this.getSortInfo(),
+                        this.getFilterInfo(),
+                        this.$refs.page.currentPage,
+                        this.$refs.page.currentPageSize
+                    );
+                } else {
+                    console.log("not define fetchMethod!");
+                }
 
-      let sums = {};
+                return;
+            }
+            const index = this.GetOriginalIndex(_index);
+            this.cloneColumns.forEach(col => (col._sortType = "normal"));
+
+            const key = this.cloneColumns[index].key;
+            if (this.cloneColumns[index].sortable !== "custom") {
+                // custom is for remote sort
+                if (type === "normal") {
+                    // this.rebuildData = this.makeDataWithFilter();
+                    this.rebuildDataStr = JSON.stringify(
+                        this.makeDataWithFilter()
+                    );
+                } else {
+                    // this.rebuildData = this.sortData(this.rebuildData, type, index);
+                    const sortData = this.sortData(
+                        this.rebuildData,
+                        type,
+                        index
+                    );
+                    this.rebuildDataStr = JSON.stringify(sortData);
+                }
+            }
+            this.cloneColumns[index]._sortType = type;
 
-      if (this.filterRows[0] !== undefined && this.filterRows[0] !== null) {
-        sums[this.filterRows[0].key] = {
-          key: this.filterRows[0].key.key,
-          value: this.localeSumText,
-        };
-      }
+            this.updateColumnSortType(this.cloneColumns[index], type);
 
-      if (this.summaryMethod) {
-        sums = this.summaryMethod({
-          columns: this.filterRows,
-          data: this.rebuildData,
-        });
-      } else {
-        for (let index = 1; index < this.filterRows.length; index++) {
-          const column = this.filterRows[index];
-
-          if (!column.showSummary) {
-            sums[column.key] = {
-              key: column.key,
-              value: "",
-            };
-            continue;
-          }
-          const key = column.key;
-          if (index === 0) {
-            sums[column.key] = {
-              key: column.key,
-              value: this.localeSumText,
-            };
-            return;
-          }
-
-          if (this.rebuildData !== undefined) {
-            const values = this.rebuildData.map((item) =>
-              Number(item[column.key])
-            );
-            const precisions = [];
-            let notNumber = true;
-            values.forEach((value) => {
-              if (!isNaN(value)) {
-                notNumber = false;
-                let decimal = ("" + value).split(".")[1];
-                precisions.push(decimal ? decimal.length : 0);
-              }
+            this.getRenderData();
+            this.$emit("on-sort-change", {
+                column: JSON.parse(
+                    JSON.stringify(
+                        this.allColumns[this.cloneColumns[index]._index]
+                    )
+                ),
+                key: key,
+                order: type
+            });
+        },
+        updateColumnSortType(column, type) {
+            this.columnRows.forEach(ele => {
+                ele.forEach(col => {
+                    if (col.__id === column.__id && col.key === column.key) {
+                        col._sortType = column._sortType;
+                    }
+                });
+            });
+            this.leftFixedColumnRows.forEach(ele => {
+                ele.forEach(col => {
+                    if (col.__id === column.__id && col.key === column.key) {
+                        col._sortType = column._sortType;
+                    }
+                });
+            });
+            this.rightFixedColumnRows.forEach(ele => {
+                ele.forEach(col => {
+                    if (col.__id === column.__id && col.key === column.key) {
+                        col._sortType = column._sortType;
+                    }
+                });
+            });
+
+            this.leftFixedColumns.forEach(col => {
+                if (col.__id === column.__id && col.key === column.key) {
+                    col._sortType = column._sortType;
+                }
+            });
+            this.rightFixedColumnRows.forEach(col => {
+                if (col.__id === column.__id && col.key === column.key) {
+                    col._sortType = column._sortType;
+                }
             });
-            const precision = Math.max.apply(null, precisions);
-            if (!notNumber) {
-              const currentValue = values.reduce((prev, curr) => {
-                const value = Number(curr);
-                if (!isNaN(value)) {
-                  return parseFloat(
-                    (prev + curr).toFixed(Math.min(precision, 20))
-                  );
+        },
+        filterData(data, column) {
+            if (
+                column._filterOp !== undefined &&
+                column._filterOp.filterOperation !== "Custom"
+            ) {
+                if (
+                    typeof column._filterMethod !== "function" ||
+                    typeof column.filterRemote === "function"
+                ) {
+                    return data;
+                }
+                if (column._type === "number" || column._type === "string") {
+                    if (
+                        column._filterValue === null ||
+                        column._filterValue === undefined ||
+                        column._filterValue === ""
+                    ) {
+                        return data;
+                    }
+                } else if (column._type === "date") {
+                    if (
+                        column._dateType === undefined ||
+                        column._dateType === null
+                    ) {
+                        return data;
+                    }
+                    if (column._dateType.includes("range")) {
+                        if (
+                            JSON.stringify(column._filterValue) ===
+                                JSON.stringify(["", ""]) ||
+                            column._filterValue === null
+                        ) {
+                            return data;
+                        }
+                    } else {
+                        if (
+                            column._filterValue === null ||
+                            column._filterValue === ""
+                        ) {
+                            return data;
+                        }
+                    }
                 } else {
-                  return prev;
+                    if (
+                        column._filterValue !== undefined &&
+                        column._filterValue !== null &&
+                        column._filterValue.constructor === Array
+                    ) {
+                        if (column._filterValue[0] === "") {
+                            return data;
+                        }
+                    } else {
+                        if (
+                            column._filterValue === null ||
+                            column._filterValue === undefined ||
+                            column._filterValue.replace(/(^s*)|(s*$)/g, "")
+                                .length === 0
+                        ) {
+                            return data;
+                        }
+                    }
                 }
-              }, 0);
-              sums[column.key] = {
-                key: column.key,
-                value: currentValue,
-              };
             } else {
-              sums[column.key] = {
-                key: column.key,
-                value: "",
-              };
+                if (
+                    column._filterValue === undefined ||
+                    column._filterValue === null
+                ) {
+                    return data;
+                }
             }
-          }
-        }
-      }
 
-      return sums;
-    },
-  },
-  methods: {
-    onPageChange(pageIndex) {
-      this.currentIndex = this.$refs.page.currentPage;
-      this.currentSize = this.$refs.page.currentPageSize;
-      this.getRenderData();
-    },
-    onPageSizeChange(pageSize) {
-      this.currentIndex = this.$refs.page.currentPage;
-      this.currentSize = this.$refs.page.currentPageSize;
-      this.getRenderData();
-    },
-    getRenderData() {
-      if (this.showPager) {
-        var skipNum = (this.currentIndex - 1) * this.currentSize;
-
-        this.renderData =
-          skipNum + this.currentSize >= this.rebuildData.length
-            ? this.rebuildData.slice(skipNum, this.rebuildData.length)
-            : this.rebuildData.slice(skipNum, skipNum + this.currentSize);
-      } else {
-        this.renderData = this.rebuildData;
-      }
-    },
-    makeFilterRows(tempColRows) {
-      let hRows = [];
-      const curColRows = tempColRows;
-      const isGroup = curColRows.length > 1;
-      if (isGroup) {
-        let fRows = [];
-        hRows = this.fixed ? this.fixedColumnRows : curColRows;
-        fRows.push(...this.getFilterColumns(...hRows));
-        hRows = fRows;
-      } else {
-        hRows = [...tempColRows[0]];
-
-        for (var i = 0; i < hRows.length; i++) {
-          if (
-            hRows[i].dateType !== null &&
-            hRows[i].dateType !== undefined &&
-            hRows[i].type === "date"
-          ) {
-            hRows[i]._dateType = hRows[i].dateType;
-          }
-        }
-      }
-      return hRows;
-    },
-    getFilterColumns(hRows) {
-      let fRows = [];
-      if (hRows !== undefined && hRows !== null) {
-        for (var i = 0; i < hRows.length; i++) {
-          if (
-            hRows[i].children === undefined ||
-            hRows[i].children === null ||
-            hRows[i].children.length === 0
-          ) {
-            if (
-              hRows[i].dateType !== null &&
-              hRows[i].dateType !== undefined &&
-              hRows[i].type === "date"
-            ) {
-              hRows[i]._dateType = hRows[i].dateType;
+            return data.filter(row => {
+                return column._filterMethod(
+                    column,
+                    column.key,
+                    column._filterValue,
+                    row
+                );
+            });
+        },
+        filterOtherData(data, index) {
+            let column = this.cloneColumns[index];
+            if (typeof column.filterRemote === "function") {
+                column.filterRemote.call(
+                    this.$parent,
+                    column._filterChecked,
+                    column.key,
+                    column
+                );
             }
-            fRows.push(hRows[i]);
-          } else {
-            fRows.push(...this.getFilterColumns(hRows[i].children));
-          }
-        }
-      }
 
-      return fRows;
-    },
-    rowClsName(index) {
-      return this.rowClassName(this.data[index], index);
-    },
-    handleResize() {
-      let tableWidth = this.$el.offsetWidth - 1;
-      let columnsWidth = {};
-      let sumMinWidth = 0;
-      let hasWidthColumns = [];
-      let noWidthColumns = [];
-      let maxWidthColumns = [];
-      let noMaxWidthColumns = [];
-      this.filterRows.forEach((col) => {
-        if (col.width) {
-          hasWidthColumns.push(col);
-        } else {
-          noWidthColumns.push(col);
-          if (col.minWidth) {
-            sumMinWidth += col.minWidth;
-          }
-          if (col.maxWidth) {
-            maxWidthColumns.push(col);
-          } else {
-            noMaxWidthColumns.push(col);
-          }
-        }
-        col._width = null;
-      });
-
-      let unUsableWidth = hasWidthColumns
-        .map((cell) => cell.width)
-        .reduce((a, b) => a + b, 0);
-      let usableWidth =
-        tableWidth -
-        unUsableWidth -
-        sumMinWidth -
-        (this.showVerticalScrollBar ? this.scrollBarWidth : 0) -
-        1;
-      let usableLength = noWidthColumns.length;
-      let columnWidth = 0;
-      if (usableWidth > 0 && usableLength > 0) {
-        columnWidth = parseInt(usableWidth / usableLength);
-      }
-
-      for (let i = 0; i < this.filterRows.length; i++) {
-        const column = this.filterRows[i];
-        let width = columnWidth + (column.minWidth ? column.minWidth : 0);
-        if (column.width) {
-          width = column.width;
-        } else {
-          if (column._width) {
-            width = column._width;
-          } else {
-            if (column.minWidth > width) {
-              width = column.minWidth;
-            } else if (column.maxWidth < width) {
-              width = column.maxWidth;
-            }
+            this.cloneColumns.forEach((col, colIndex) => {
+                if (colIndex !== index) {
+                    data = this.filterData(data, col);
+                }
+            });
+            return data;
+        },
+        handleFilter(index) {
+            const column = this.cloneColumns[index];
+            let filterData = this.makeDataWithSort(
+                JSON.parse(this.originalData)
+            );
 
-            if (usableWidth > 0) {
-              usableWidth -= width - (column.minWidth ? column.minWidth : 0);
-              usableLength--;
-              if (usableLength > 0) {
-                columnWidth = parseInt(usableWidth / usableLength);
-              } else {
-                columnWidth = 0;
-              }
-            } else {
-              columnWidth = 0;
-            }
-          }
-        }
+            filterData = this.filterOtherData(filterData, index);
+            this.rebuildDataStr = JSON.stringify(
+                this.filterData(filterData, column)
+            );
+            this.getRenderData();
 
-        column._width = width;
+            this.cloneColumns[index]._isFiltered = true;
 
-        columnsWidth[column._index] = {
-          width: width,
-        };
-      }
-      if (usableWidth > 0) {
-        usableLength = noMaxWidthColumns.length;
-        columnWidth = parseInt(usableWidth / usableLength);
-        for (let i = 0; i < noMaxWidthColumns.length; i++) {
-          const column = noMaxWidthColumns[i];
-          let width = column._width + columnWidth;
-          if (usableLength > 1) {
-            usableLength--;
-            usableWidth -= columnWidth;
-            columnWidth = parseInt(usableWidth / usableLength);
-          } else {
-            columnWidth = 0;
-          }
-
-          column._width = width;
-
-          columnsWidth[column._index] = {
-            width: width,
-          };
-        }
-      }
-
-      this.tableWidth =
-        this.filterRows.map((cell) => cell._width).reduce((a, b) => a + b, 0) +
-        (this.showVerticalScrollBar ? this.scrollBarWidth : 0) +
-        1;
-      this.columnsWidth = columnsWidth;
-      this.fixedHeader();
-    },
-    handleMouseIn(_index) {
-      if (this.disabledHover) return;
-      if (this.objData[_index]._isHover) return;
-      this.objData[_index]._isHover = true;
-    },
-    handleMouseOut(_index) {
-      if (this.disabledHover) return;
-      this.objData[_index]._isHover = false;
-    },
+            this.cloneColumns[index]._filterVisible = false;
+            this.$emit("on-filter-change", column);
+        },
+        GetOriginalIndex(_index) {
+            return this.cloneColumns.findIndex(item => item._index === _index);
+        },
+        handleFilterSelect(column, filterOp) {
+            const curColumn = this.filterRows.find(
+                p => p.__id === column.__id && p.key === column.key
+            );
 
-    handleCurrentRow(type, _index) {
-      let oldIndex = -1;
-      for (let i in this.objData) {
-        if (this.objData[i]._isHighlight) {
-          oldIndex = parseInt(i);
-          this.objData[i]._isHighlight = false;
-        }
-      }
-      if (type === "highlight") this.objData[_index]._isHighlight = true;
-      const oldData =
-        oldIndex < 0
-          ? null
-          : JSON.parse(JSON.stringify(this.rebuildData[oldIndex]));
-      const newData =
-        type === "highlight"
-          ? JSON.parse(JSON.stringify(this.rebuildData[_index]))
-          : null;
-      this.$emit("on-current-change", newData, oldData);
-    },
-    highlightCurrentRow(_index) {
-      if (!this.highlightRow || this.objData[_index]._isHighlight) return;
-      this.handleCurrentRow("highlight", _index);
-    },
-    clearCurrentRow() {
-      if (!this.highlightRow) return;
-      this.handleCurrentRow("clear");
-    },
-    clickCurrentRow(_index) {
-      this.highlightCurrentRow(_index);
-      this.$emit("on-row-click", JSON.parse(this.originalData)[_index], _index);
-    },
-    dblclickCurrentRow(_index) {
-      this.highlightCurrentRow(_index);
-      this.$emit(
-        "on-row-dblclick",
-        JSON.parse(this.originalData)[_index],
-        _index
-      );
-    },
-    getSelection() {
-      let selectionIndexes = [];
-      for (let i in this.objData) {
-        if (this.objData[i]._isChecked) selectionIndexes.push(parseInt(i));
-      }
-      return JSON.parse(
-        JSON.stringify(
-          this.data.filter(
-            (data, index) => selectionIndexes.indexOf(index) > -1
-          )
-        )
-      );
-    },
-    toggleSelect(_index) {
-      let data = {};
+            curColumn._filterIcon = filterOp.icon;
+            curColumn._filterOp = filterOp;
+            curColumn._filterMethod = getFilterMethod(column.type, filterOp);
 
-      for (let i in this.objData) {
-        if (parseInt(i) === _index) {
-          data = this.objData[i];
-          break;
-        }
-      }
-      const status = !data._isChecked;
-
-      this.objData[_index]._isChecked = status;
-
-      const selection = this.getSelection();
-      this.$emit(
-        status ? "on-select" : "on-select-cancel",
-        selection,
-        JSON.parse(JSON.stringify(this.data[_index]))
-      );
-      this.$emit("on-selection-change", selection);
-    },
-    toggleExpand(_index) {
-      let data = {};
+            this.doSortAndFilter(null, curColumn);
+        },
+        handleFilterReset(_index) {
+            const index = this.GetOriginalIndex(_index);
+            this.cloneColumns[index]._isFiltered = false;
 
-      for (let i in this.objData) {
-        if (parseInt(i) === _index) {
-          data = this.objData[i];
-          break;
-        }
-      }
-      const status = !data._isExpanded;
-      this.objData[_index]._isExpanded = status;
-      this.$emit(
-        "on-expand",
-        JSON.parse(JSON.stringify(this.rebuildData[_index])),
-        status
-      );
-
-      if (this.height || this.maxHeight) {
-        this.$nextTick(() => this.fixedBody());
-      }
-    },
-    selectAll(status) {
-      for (const data of this.rebuildData) {
-        if (this.objData[data._index]._isDisabled) {
-          continue;
-        } else {
-          this.objData[data._index]._isChecked = status;
-        }
-      }
-      const selection = this.getSelection();
-      if (status) {
-        this.$emit("on-select-all", selection);
-      } else {
-        this.$emit("on-select-all-cancel", selection);
-      }
-      this.$emit("on-selection-change", selection);
-    },
+            this.cloneColumns[index]._filterVisible = false;
+            this.cloneColumns[index]._filterChecked = [];
 
-    fixedHeader() {
-      if (this.height || this.maxHeight) {
-        this.$nextTick(() => {
-          const titleHeight =
-            parseInt(getStyle(this.$refs.title, "height")) || 0;
-          const headerHeight =
-            parseInt(getStyle(this.$refs.header, "height")) || 0;
-          const footerHeight =
-            parseInt(getStyle(this.$refs.footer, "height")) || 0;
-          if (this.height) {
-            this.bodyHeight =
-              this.height - titleHeight - headerHeight - footerHeight;
-          } else if (this.maxHeight) {
-            this.bodyHeight =
-              this.maxHeight - titleHeight - headerHeight - footerHeight;
-          }
-          this.$nextTick(() => this.fixedBody());
-        });
-      } else {
-        this.bodyHeight = 0;
-        this.$nextTick(() => this.fixedBody());
-      }
-    },
-    fixedBody() {
-      if (this.$refs.header) {
-        this.headerWidth = this.$refs.header.children[0].offsetWidth;
-        this.headerHeight = this.$refs.header.children[0].offsetHeight;
-        //this.showHorizontalScrollBar = this.headerWidth>this.$refs.header.offsetWidth;
-      }
-
-      if (!this.$refs.tbody || !this.data || this.data.length === 0) {
-        this.showVerticalScrollBar = false;
-      } else {
-        let bodyContentEl = this.$refs.tbody.$el;
-        let bodyEl = bodyContentEl.parentElement;
-        let bodyContentHeight = bodyContentEl.offsetHeight;
-        let bodyHeight = bodyEl.offsetHeight;
-
-        this.showHorizontalScrollBar =
-          bodyEl.offsetWidth <
-          bodyContentEl.offsetWidth +
-            (this.showVerticalScrollBar ? this.scrollBarWidth : 0);
-        this.showVerticalScrollBar = this.bodyHeight
-          ? bodyHeight -
-              (this.showHorizontalScrollBar ? this.scrollBarWidth : 0) <
-            bodyContentHeight
-          : false;
-
-        if (this.showVerticalScrollBar) {
-          bodyEl.classList.add(this.prefixCls + "-overflowY");
-        } else {
-          bodyEl.classList.remove(this.prefixCls + "-overflowY");
-        }
-        if (this.showHorizontalScrollBar) {
-          bodyEl.classList.add(this.prefixCls + "-overflowX");
-        } else {
-          bodyEl.classList.remove(this.prefixCls + "-overflowX");
-        }
-      }
-    },
+            let filterData = this.makeDataWithSort(
+                JSON.parse(this.originalData)
+            );
+            filterData = this.filterOtherData(filterData, index);
+            this.rebuildDataStr = JSON.stringify(filterData);
+            this.getRenderData();
+            this.$emit("on-filter-change", this.cloneColumns[index]);
+        },
+        makeData() {
+            let data = deepCopy(this.data);
+            data.forEach((row, index) => {
+                row._index = index;
+                row._rowKey = rowKey++;
+            });
+            return JSON.stringify(data);
+        },
+        makeDataWithFilter() {
+            let data = JSON.parse(this.originalData);
+            this.cloneColumns.forEach(
+                col => (data = this.filterData(data, col))
+            );
+            return data;
+        },
+        //全部计算排序一遍
+        makeDataWithSortAndFilter(sender, column) {
+            let data = JSON.parse(this.originalData);
+            const filterExecRows = [];
+
+            filterExecRows.push(
+                ...this.leftFixedFilterRows.filter(col => {
+                    if (col.fixed !== undefined && col.fixed !== null) {
+                        if (col.fixed === "left") {
+                            return true;
+                        }
+                    }
+                    return false;
+                })
+            );
 
-    hideColumnFilter() {
-      this.cloneColumns.forEach((col) => (col._filterVisible = false));
-    },
-    handleBodyScroll(event) {
-      if (this.showHeader)
-        this.$refs.header.scrollLeft = event.target.scrollLeft;
-      if (this.isLeftFixed)
-        this.$refs.fixedBody.scrollTop = event.target.scrollTop;
-      if (this.isRightFixed)
-        this.$refs.fixedRightBody.scrollTop = event.target.scrollTop;
-      if (this.showSummary)
-        this.$refs.summary.$el.scrollLeft = event.target.scrollLeft;
-      this.hideColumnFilter();
-    },
-    handleFixedMousewheel(event) {
-      let deltaY = event.deltaY;
-      if (!deltaY && event.detail) {
-        deltaY = event.detail * 40;
-      }
-      if (!deltaY && event.wheelDeltaY) {
-        deltaY = -event.wheelDeltaY;
-      }
-      if (!deltaY && event.wheelDelta) {
-        deltaY = -event.wheelDelta;
-      }
-      if (!deltaY) return;
-      const body = this.$refs.body;
-      const currentScrollTop = body.scrollTop;
-      if (deltaY < 0 && currentScrollTop !== 0) {
-        event.preventDefault();
-      }
-      if (
-        deltaY > 0 &&
-        body.scrollHeight - body.clientHeight > currentScrollTop
-      ) {
-        event.preventDefault();
-      }
-      //body.scrollTop += deltaY;
-      let step = 0;
-      let timeId = setInterval(() => {
-        step += 5;
-        if (deltaY > 0) {
-          body.scrollTop += 2;
-        } else {
-          body.scrollTop -= 2;
-        }
-        if (step >= Math.abs(deltaY)) {
-          clearInterval(timeId);
-        }
-      }, 5);
-    },
-    handleMouseWheel(event) {
-      const deltaX = event.deltaX;
-      const $body = this.$refs.body;
-
-      if (deltaX > 0) {
-        $body.scrollLeft = $body.scrollLeft + 10;
-      } else {
-        $body.scrollLeft = $body.scrollLeft - 10;
-      }
-    },
-    // sortData(data, column) {
-    //   data.sort((a, b) => {
-    //     if (column.sortMethod) {
-    //       return column.sortMethod(
-    //         a[column.key],
-    //         b[column.key],
-    //         column._sortType
-    //       );
-    //     } else {
-    //       if (column._sortType === "asc") {
-    //         return a[column.key] > b[column.key] ? 1 : -1;
-    //       } else if (column._sortType === "desc") {
-    //         return a[column.key] < b[column.key] ? 1 : -1;
-    //       }
-    //     }
-    //   });
-    //   return data;
-    // },
-    sortData(data, type, index) {
-      const key = this.cloneColumns[index].key;
-      data.sort((a, b) => {
-        if (this.cloneColumns[index].sortMethod) {
-          return this.cloneColumns[index].sortMethod(a[key], b[key], type);
-        } else {
-          if (type === "asc") {
-            return a[key] > b[key] ? 1 : -1;
-          } else if (type === "desc") {
-            return a[key] < b[key] ? 1 : -1;
-          }
-        }
-      });
-      for (let i = 0; i < data.length; i++) {
-        if (data[i].children && data[i].children.length) {
-          data[i].children = this.sortData(data[i].children, type, index);
-        }
-      }
-      return data;
-    },
-    makeDataWithSort(rows) {
-      let data = rows;
-      let sortType = "normal";
-      let sortIndex = -1;
-      let isCustom = false;
-      for (let i = 0; i < this.cloneColumns.length; i++) {
-        if (this.cloneColumns[i]._sortType !== "normal") {
-          sortType = this.cloneColumns[i]._sortType;
-          sortIndex = i;
-          isCustom = this.cloneColumns[i].sortable === "custom";
-          break;
-        }
-      }
-      if (sortType !== "normal" && !isCustom)
-        data = this.sortData(data, sortType, sortIndex);
-      return data;
-    },
-    // handleSort(column, type) {
-    //   console.log(column);
-    //   if (column.sortable !== "custom") {
-    //     if (column._sortType === "normal") {
-    //       this.rebuildDataStr = JSON.stringify(this.makeDataWithFilter());
-    //     } else {
-    //       this.rebuildDataStr = JSON.stringify(
-    //         this.sortData(this.rebuildData, column)
-    //       );
-    //     }
-    //   }
-
-    //   this.getRenderData();
-
-    //   this.$emit("on-sort-change", {
-    //     column,
-    //   });
-    // },
-    handleSort(_index, type) {
-      const index = this.GetOriginalIndex(_index);
-      this.cloneColumns.forEach((col) => (col._sortType = "normal"));
-
-      const key = this.cloneColumns[index].key;
-      if (this.cloneColumns[index].sortable !== "custom") {
-        // custom is for remote sort
-        if (type === "normal") {
-          // this.rebuildData = this.makeDataWithFilter();
-          this.rebuildDataStr = JSON.stringify(this.makeDataWithFilter());
-        } else {
-          // this.rebuildData = this.sortData(this.rebuildData, type, index);
-          const sortData = this.sortData(this.rebuildData, type, index);
-          this.rebuildDataStr = JSON.stringify(sortData);
-        }
-      }
-      this.cloneColumns[index]._sortType = type;
-
-      this.updateColumnSortType(this.cloneColumns[index], type);
-
-      this.getRenderData();
-      this.$emit("on-sort-change", {
-        column: JSON.parse(
-          JSON.stringify(this.allColumns[this.cloneColumns[index]._index])
-        ),
-        key: key,
-        order: type,
-      });
-    },
-    updateColumnSortType(column, type) {
-      this.columnRows.forEach((ele) => {
-        ele.forEach((col) => {
-          if (col.__id === column.__id && col.key === column.key) {
-            col._sortType = column._sortType;
-          }
-        });
-      });
-      this.leftFixedColumnRows.forEach((ele) => {
-        ele.forEach((col) => {
-          if (col.__id === column.__id && col.key === column.key) {
-            col._sortType = column._sortType;
-          }
-        });
-      });
-      this.rightFixedColumnRows.forEach((ele) => {
-        ele.forEach((col) => {
-          if (col.__id === column.__id && col.key === column.key) {
-            col._sortType = column._sortType;
-          }
-        });
-      });
+            filterExecRows.push(
+                ...this.filterRows.filter(col => {
+                    if (col.fixed !== undefined && col.fixed !== null) {
+                        if (col.fixed === "left" || col.fixed === "right") {
+                            return false;
+                        }
+                    }
+                    return true;
+                })
+            );
 
-      this.leftFixedColumns.forEach((col) => {
-        if (col.__id === column.__id && col.key === column.key) {
-          col._sortType = column._sortType;
-        }
-      });
-      this.rightFixedColumnRows.forEach((col) => {
-        if (col.__id === column.__id && col.key === column.key) {
-          col._sortType = column._sortType;
-        }
-      });
-    },
-    filterData(data, column) {
-      if (
-        column._filterOp !== undefined &&
-        column._filterOp.filterOperation !== "Custom"
-      ) {
-        if (
-          typeof column._filterMethod !== "function" ||
-          typeof column.filterRemote === "function"
-        ) {
-          return data;
-        }
-        if (column._type === "number" || column._type === "string") {
-          if (
-            column._filterValue === null ||
-            column._filterValue === undefined ||
-            column._filterValue === ""
-          ) {
-            return data;
-          }
-        } else if (column._type === "date") {
-          if (column._dateType === undefined || column._dateType === null) {
+            filterExecRows.push(
+                ...this.rightFixedFilterRows.filter(col => {
+                    if (col.fixed !== undefined && col.fixed !== null) {
+                        if (col.fixed === "right") {
+                            return true;
+                        }
+                    }
+                    return false;
+                })
+            );
+
+            filterExecRows.forEach(col => {
+                if (column) {
+                    if (col.__id === column.__id && col.key === column.key) {
+                        if (column._filterOp.filterOperation === "Custom") {
+                            let curCol = this.columns.find(
+                                p => p.key === column.key
+                            );
+                            col._filterMethod = curCol.filterMethod;
+                            col._filterValue = column.filterValue;
+                            col.filterValue = column.filterValue;
+                        } else {
+                            col._filterMethod = getFilterMethod(
+                                column._type,
+                                column._filterOp
+                            );
+
+                            if (column.filterValue !== undefined) {
+                                column._filterValue = column.filterValue;
+                            }
+
+                            col._filterValue = column._filterValue;
+                        }
+                    }
+                }
+
+                data = this.filterData(data, col);
+            });
+
+            data = this.makeDataWithSort(data);
             return data;
-          }
-          if (column._dateType.includes("range")) {
-            if (
-              JSON.stringify(column._filterValue) ===
-                JSON.stringify(["", ""]) ||
-              column._filterValue === null
-            ) {
-              return data;
-            }
-          } else {
-            if (column._filterValue === null || column._filterValue === "") {
-              return data;
-            }
-          }
-        } else {
-          if (
-            column._filterValue !== undefined &&
-            column._filterValue !== null &&
-            column._filterValue.constructor === Array
-          ) {
-            if (column._filterValue[0] === "") {
-              return data;
-            }
-          } else {
-            if (
-              column._filterValue === null ||
-              column._filterValue === undefined ||
-              column._filterValue.replace(/(^s*)|(s*$)/g, "").length === 0
-            ) {
-              return data;
+        },
+        doSortAndFilter(sender, column) {
+            //TODO：如果是服务端渲染，则由服务端提供排序和过滤
+            if (this.serverSide) {
+                //收集每列的排序过滤信息
+
+                if (this.fetchMethod) {
+                    this.fetchMethod(
+                        this.getSortInfo(),
+                        this.getFilterInfo(),
+                        this.$refs.page.currentPage,
+                        this.$refs.page.currentPageSize
+                    );
+                } else {
+                    console.log("not define fetchMethod!");
+                }
+                return;
             }
-          }
-        }
-      } else {
-        if (column._filterValue === undefined || column._filterValue === null) {
-          return data;
-        }
-      }
-
-      return data.filter((row) => {
-        return column._filterMethod(
-          column,
-          column.key,
-          column._filterValue,
-          row
-        );
-      });
-    },
-    filterOtherData(data, index) {
-      let column = this.cloneColumns[index];
-      if (typeof column.filterRemote === "function") {
-        column.filterRemote.call(
-          this.$parent,
-          column._filterChecked,
-          column.key,
-          column
-        );
-      }
-
-      this.cloneColumns.forEach((col, colIndex) => {
-        if (colIndex !== index) {
-          data = this.filterData(data, col);
-        }
-      });
-      return data;
-    },
-    handleFilter(index) {
-      const column = this.cloneColumns[index];
-      let filterData = this.makeDataWithSort(JSON.parse(this.originalData));
-
-      filterData = this.filterOtherData(filterData, index);
-      this.rebuildDataStr = JSON.stringify(this.filterData(filterData, column));
-      this.getRenderData();
+            this.rebuildDataStr = JSON.stringify(
+                this.makeDataWithSortAndFilter(sender, column)
+            );
 
-      this.cloneColumns[index]._isFiltered = true;
+            if (this.showPager) {
+                this.$refs.page.currentPage = 1;
 
-      this.cloneColumns[index]._filterVisible = false;
-      this.$emit("on-filter-change", column);
-    },
-    GetOriginalIndex(_index) {
-      return this.cloneColumns.findIndex((item) => item._index === _index);
-    },
-    handleFilterSelect(column, filterOp) {
-      const curColumn = this.filterRows.find(
-        (p) => p.__id === column.__id && p.key === column.key
-      );
+                this.currentIndex = 1;
+            }
+            this.getRenderData();
+        },
+        makeObjData() {
+            let data = {};
+            this.data.forEach((row, index) => {
+                const newRow = deepCopy(row);
+                newRow._isHover = false;
+                if (newRow._disabled) {
+                    newRow._isDisabled = newRow._disabled;
+                } else {
+                    newRow._isDisabled = false;
+                }
+                if (newRow._checked) {
+                    newRow._isChecked = newRow._checked;
+                } else {
+                    newRow._isChecked = false;
+                }
+                if (newRow._expanded) {
+                    newRow._isExpanded = newRow._expanded;
+                } else {
+                    newRow._isExpanded = false;
+                }
+                if (newRow._highlight) {
+                    newRow._isHighlight = newRow._highlight;
+                } else {
+                    newRow._isHighlight = false;
+                }
+                data[index] = newRow;
+            });
+            return data;
+        },
 
-      curColumn._filterIcon = filterOp.icon;
-      curColumn._filterOp = filterOp;
-      curColumn._filterMethod = getFilterMethod(column.type, filterOp);
+        makeColumnsId(columns) {
+            return columns.map(item => {
+                if ("children" in item) this.makeColumnsId(item.children);
+                item.__id = getRandomStr(6);
+                return item;
+            });
+        },
+        makeColumns(cols) {
+            let columns = deepCopy(getAllColumns(cols));
+            let left = [];
+            let right = [];
+            let center = [];
+
+            columns.forEach((column, index) => {
+                column._index = index;
+                column._columnKey = columnKey++;
+                column.width = parseInt(column.width);
+                column._width = column.width ? column.width : "";
+                column._sortType = "normal";
+                column._filterVisible = false;
+                column._isFiltered = false;
+
+                column._filterValue = null;
+                column._filterIcon = "search";
+                column._type =
+                    column.type === undefined ? "string" : column.type;
+
+                column._filterMethod = column.filterMethod;
+                if (
+                    column.filterMethod === undefined ||
+                    column.filterMethod === null
+                ) {
+                    column._filterMethod = getFilterMethod(column.type, {
+                        filterOperation: "Reset",
+                        displayName: "重置",
+                        icon: "search"
+                    });
+                }
 
-      this.doSortAndFilter(null, curColumn);
-    },
-    handleFilterReset(_index) {
-      const index = this.GetOriginalIndex(_index);
-      this.cloneColumns[index]._isFiltered = false;
-
-      this.cloneColumns[index]._filterVisible = false;
-      this.cloneColumns[index]._filterChecked = [];
-
-      let filterData = this.makeDataWithSort(JSON.parse(this.originalData));
-      filterData = this.filterOtherData(filterData, index);
-      this.rebuildDataStr = JSON.stringify(filterData);
-      this.getRenderData();
-      this.$emit("on-filter-change", this.cloneColumns[index]);
-    },
-    makeData() {
-      let data = deepCopy(this.data);
-      data.forEach((row, index) => {
-        row._index = index;
-        row._rowKey = rowKey++;
-      });
-      return JSON.stringify(data);
-    },
-    makeDataWithFilter() {
-      let data = JSON.parse(this.originalData);
-      this.cloneColumns.forEach((col) => (data = this.filterData(data, col)));
-      return data;
-    },
-    //全部计算排序一遍
-    makeDataWithSortAndFilter(sender, column) {
-      let data = JSON.parse(this.originalData);
-      const filterExecRows = [];
-
-      filterExecRows.push(
-        ...this.leftFixedFilterRows.filter((col) => {
-          if (col.fixed !== undefined && col.fixed !== null) {
-            if (col.fixed === "left") {
-              return true;
-            }
-          }
-          return false;
-        })
-      );
-
-      filterExecRows.push(
-        ...this.filterRows.filter((col) => {
-          if (col.fixed !== undefined && col.fixed !== null) {
-            if (col.fixed === "left" || col.fixed === "right") {
-              return false;
-            }
-          }
-          return true;
-        })
-      );
-
-      filterExecRows.push(
-        ...this.rightFixedFilterRows.filter((col) => {
-          if (col.fixed !== undefined && col.fixed !== null) {
-            if (col.fixed === "right") {
-              return true;
-            }
-          }
-          return false;
-        })
-      );
-
-      filterExecRows.forEach((col) => {
-        if (column) {
-          if (col.__id === column.__id && col.key === column.key) {
-            if (column._filterOp.filterOperation === "Custom") {
-              let curCol = this.columns.find((p) => p.key === column.key);
-              col._filterMethod = curCol.filterMethod;
-              col._filterValue = column.filterValue;
-              col.filterValue = column.filterValue;
-            } else {
-              col._filterMethod = getFilterMethod(
-                column._type,
-                column._filterOp
-              );
+                if ("sortType" in column) {
+                    column._sortType = column.sortType;
+                }
 
-              if (column.filterValue !== undefined) {
-                column._filterValue = column.filterValue;
-              }
+                if (column.fixed && column.fixed === "left") {
+                    left.push(column);
+                } else if (column.fixed && column.fixed === "right") {
+                    right.push(column);
+                } else {
+                    center.push(column);
+                }
+            });
+            return left.concat(center).concat(right);
+        },
 
-              col._filterValue = column._filterValue;
+        makeColumnRows(fixedType, cols) {
+            return convertToRows(cols, fixedType);
+        },
+        exportCsv(params) {
+            if (params.filename) {
+                if (params.filename.indexOf(".csv") === -1) {
+                    params.filename += ".csv";
+                }
+            } else {
+                params.filename = "table.csv";
             }
-          }
-        }
 
-        data = this.filterData(data, col);
-      });
-
-      data = this.makeDataWithSort(data);
-      return data;
-    },
-    doSortAndFilter(sender, column) {
-      this.rebuildDataStr = JSON.stringify(
-        this.makeDataWithSortAndFilter(sender, column)
-      );
+            let columns = [];
+            let datas = [];
+            if (params.columns && params.data) {
+                columns = params.columns;
+                datas = params.data;
+            } else {
+                columns = this.allColumns;
+                if (!("original" in params)) params.original = true;
+                datas = params.original ? this.data : this.rebuildData;
+            }
 
-      if (this.showPager) {
-        this.$refs.page.currentPage = 1;
+            let noHeader = false;
+            if ("noHeader" in params) noHeader = params.noHeader;
 
-        this.currentIndex = 1;
-      }
-      this.getRenderData();
-    },
-    makeObjData() {
-      let data = {};
-      this.data.forEach((row, index) => {
-        const newRow = deepCopy(row);
-        newRow._isHover = false;
-        if (newRow._disabled) {
-          newRow._isDisabled = newRow._disabled;
-        } else {
-          newRow._isDisabled = false;
-        }
-        if (newRow._checked) {
-          newRow._isChecked = newRow._checked;
-        } else {
-          newRow._isChecked = false;
-        }
-        if (newRow._expanded) {
-          newRow._isExpanded = newRow._expanded;
-        } else {
-          newRow._isExpanded = false;
-        }
-        if (newRow._highlight) {
-          newRow._isHighlight = newRow._highlight;
-        } else {
-          newRow._isHighlight = false;
-        }
-        data[index] = newRow;
-      });
-      return data;
-    },
+            const data = Csv(columns, datas, params, noHeader);
+            if (params.callback) params.callback(data);
+            else ExportCsv.download(params.filename, data);
+        },
+        exportXlsx({
+            fileName,
+            header,
+            headerDisplay,
+            rows,
+            formats,
+            dataType = "json"
+        }) {
+            if (dataType === "json") {
+                this.exportXlsxJson({
+                    fileName,
+                    header,
+                    headerDisplay,
+                    rows,
+                    formats
+                });
+            }
+            if (dataType === "array") {
+                this.exportXlsxAoa({
+                    fileName,
+                    header,
+                    rows
+                });
+            }
+        },
+        exportXlsxAoa({ fileName, header, rows }) {
+            let defaultHeader = [];
+            for (let i = 0; i < this.columns.length; i++) {
+                defaultHeader.push(this.columns[i].key);
+            }
+            let exportRows = [];
 
-    makeColumnsId(columns) {
-      return columns.map((item) => {
-        if ("children" in item) this.makeColumnsId(item.children);
-        item.__id = getRandomStr(6);
-        return item;
-      });
-    },
-    makeColumns(cols) {
-      let columns = deepCopy(getAllColumns(cols));
-      let left = [];
-      let right = [];
-      let center = [];
-
-      columns.forEach((column, index) => {
-        column._index = index;
-        column._columnKey = columnKey++;
-        column.width = parseInt(column.width);
-        column._width = column.width ? column.width : "";
-        column._sortType = "normal";
-        column._filterVisible = false;
-        column._isFiltered = false;
-
-        column._filterValue = null;
-        column._filterIcon = "search";
-        column._type = column.type === undefined ? "string" : column.type;
-
-        column._filterMethod = column.filterMethod;
-        if (column.filterMethod === undefined || column.filterMethod === null) {
-          column._filterMethod = getFilterMethod(column.type, {
-            filterOperation: "Reset",
-            displayName: "重置",
-            icon: "search",
-          });
-        }
+            for (let m = 0; m < this.rebuildData.length; m++) {
+                let row = [];
+                for (let n = 0; n < defaultHeader.length; n++) {
+                    row.push(this.rebuildData[m][defaultHeader[n]]);
+                }
+                exportRows.push(row);
+            }
+            ExportXlsx.outPutAoA({
+                header: header ? header : defaultHeader,
+                rows: rows ? rows : exportRows,
+                name: fileName ? fileName : "xlsxfile"
+            });
+        },
+        exportXlsxJson({ fileName, header, headerDisplay, rows, formats }) {
+            let defaultHeader = [];
+            let defaultDisplayHeader = {};
+            if (header !== null && header !== undefined) {
+                defaultHeader = header;
+            } else {
+                for (let i = 0; i < this.columns.length; i++) {
+                    defaultHeader.push(this.columns[i].key);
+                    defaultDisplayHeader[this.columns[i].key] = this.columns[
+                        i
+                    ].title;
+                }
+            }
 
-        if ("sortType" in column) {
-          column._sortType = column.sortType;
-        }
+            if (headerDisplay !== null && headerDisplay !== undefined) {
+                defaultDisplayHeader = headerDisplay;
+            }
+            for (let i = 0; i < this.columns.length; i++) {
+                if (defaultHeader.some(p => p === this.columns[i].key)) {
+                    if (
+                        !defaultDisplayHeader.hasOwnProperty(
+                            this.columns[i].key
+                        )
+                    ) {
+                        defaultDisplayHeader[
+                            this.columns[i].key
+                        ] = this.columns[i].title;
+                    }
+                }
+            }
 
-        if (column.fixed && column.fixed === "left") {
-          left.push(column);
-        } else if (column.fixed && column.fixed === "right") {
-          right.push(column);
-        } else {
-          center.push(column);
+            let exportRows = [];
+
+            if (rows !== undefined && rows !== null) {
+                for (let m = 0; m < rows.length; m++) {
+                    let row = {};
+                    for (let n = 0; n < defaultHeader.length; n++) {
+                        row[defaultHeader[n]] = rows[m][defaultHeader[n]];
+
+                        if (formats !== null && formats !== undefined) {
+                            if (
+                                formats[defaultHeader[n]] !== undefined &&
+                                formats[defaultHeader[n]] !== null &&
+                                formats[defaultHeader[n]].constructor ===
+                                    Function
+                            ) {
+                                try {
+                                    row[defaultHeader[n]] = formats[
+                                        defaultHeader[n]
+                                    ](
+                                        rows[m],
+                                        this.columns.find(
+                                            p => p.key === defaultHeader[n]
+                                        ),
+                                        rows[m][defaultHeader[n]]
+                                    );
+                                } catch (e) {
+                                    console.log(
+                                        "format method of defaultHeader[n] not valid",
+                                        e
+                                    );
+                                }
+                            }
+                        }
+                    }
+                    exportRows.push(row);
+                }
+            } else {
+                for (let m = 0; m < this.rebuildData.length; m++) {
+                    let row = {};
+                    for (let n = 0; n < defaultHeader.length; n++) {
+                        row[defaultHeader[n]] = this.rebuildData[m][
+                            defaultHeader[n]
+                        ];
+
+                        if (formats !== null && formats !== undefined) {
+                            if (
+                                formats[defaultHeader[n]] !== undefined &&
+                                formats[defaultHeader[n]] !== null &&
+                                formats[defaultHeader[n]].constructor ===
+                                    Function
+                            ) {
+                                try {
+                                    row[defaultHeader[n]] = formats[
+                                        defaultHeader[n]
+                                    ](
+                                        this.rebuildData[m],
+                                        this.columns.find(
+                                            p => p.key === defaultHeader[n]
+                                        ),
+                                        this.rebuildData[m][defaultHeader[n]]
+                                    );
+                                } catch (e) {
+                                    console.log(
+                                        "format method of defaultHeader[n] not valid",
+                                        e
+                                    );
+                                }
+                            }
+                        }
+                    }
+                    exportRows.push(row);
+                }
+            }
+            ExportXlsx.outPutJson({
+                header: defaultHeader,
+                headerDisplay: defaultDisplayHeader,
+                rows: exportRows,
+                name: fileName ? fileName : "xlsxfile"
+            });
+        },
+        dragAndDrop(a, b) {
+            this.$emit("on-drag-drop", a, b);
+        },
+        initColumns() {
+            //初始化列
+            const colsWithId = this.makeColumnsId(this.columns);
+            this.cloneColumns = this.makeColumns(colsWithId);
+            this.leftFixedColumnRows = this.makeColumnRows("left", colsWithId);
+            this.rightFixedColumnRows = this.makeColumnRows(
+                "right",
+                colsWithId
+            );
+            this.columnRows = this.makeColumnRows(false, colsWithId);
+            this.filterRows = this.makeFilterRows(this.columnRows);
+            this.leftFixedFilterRows = this.makeFilterRows(
+                this.leftFixedColumnRows
+            );
+            this.rightFixedFilterRows = this.makeFilterRows(
+                this.rightFixedColumnRows
+            );
+            this.allColumns = getAllColumns(colsWithId);
         }
-      });
-      return left.concat(center).concat(right);
     },
+    created() {
+        if (!this.context) this.currentContext = this.$parent;
+        this.showSlotHeader = this.$slots.header !== undefined;
+        this.showSlotFooter = this.$slots.footer !== undefined;
 
-    makeColumnRows(fixedType, cols) {
-      return convertToRows(cols, fixedType);
-    },
-    exportCsv(params) {
-      if (params.filename) {
-        if (params.filename.indexOf(".csv") === -1) {
-          params.filename += ".csv";
-        }
-      } else {
-        params.filename = "table.csv";
-      }
-
-      let columns = [];
-      let datas = [];
-      if (params.columns && params.data) {
-        columns = params.columns;
-        datas = params.data;
-      } else {
-        columns = this.allColumns;
-        if (!("original" in params)) params.original = true;
-        datas = params.original ? this.data : this.rebuildData;
-      }
-
-      let noHeader = false;
-      if ("noHeader" in params) noHeader = params.noHeader;
-
-      const data = Csv(columns, datas, params, noHeader);
-      if (params.callback) params.callback(data);
-      else ExportCsv.download(params.filename, data);
-    },
-    exportXlsx({
-      fileName,
-      header,
-      headerDisplay,
-      rows,
-      formats,
-      dataType = "json",
-    }) {
-      if (dataType === "json") {
-        this.exportXlsxJson({
-          fileName,
-          header,
-          headerDisplay,
-          rows,
-          formats,
-        });
-      }
-      if (dataType === "array") {
-        this.exportXlsxAoa({
-          fileName,
-          header,
-          rows,
-        });
-      }
-    },
-    exportXlsxAoa({ fileName, header, rows }) {
-      let defaultHeader = [];
-      for (let i = 0; i < this.columns.length; i++) {
-        defaultHeader.push(this.columns[i].key);
-      }
-      let exportRows = [];
-
-      for (let m = 0; m < this.rebuildData.length; m++) {
-        let row = [];
-        for (let n = 0; n < defaultHeader.length; n++) {
-          row.push(this.rebuildData[m][defaultHeader[n]]);
-        }
-        exportRows.push(row);
-      }
-      ExportXlsx.outPutAoA({
-        header: header ? header : defaultHeader,
-        rows: rows ? rows : exportRows,
-        name: fileName ? fileName : "xlsxfile",
-      });
-    },
-    exportXlsxJson({ fileName, header, headerDisplay, rows, formats }) {
-      let defaultHeader = [];
-      let defaultDisplayHeader = {};
-      if (header !== null && header !== undefined) {
-        defaultHeader = header;
-      } else {
-        for (let i = 0; i < this.columns.length; i++) {
-          defaultHeader.push(this.columns[i].key);
-          defaultDisplayHeader[this.columns[i].key] = this.columns[i].title;
-        }
-      }
-
-      if (headerDisplay !== null && headerDisplay !== undefined) {
-        defaultDisplayHeader = headerDisplay;
-      }
-      for (let i = 0; i < this.columns.length; i++) {
-        if (defaultHeader.some((p) => p === this.columns[i].key)) {
-          if (!defaultDisplayHeader.hasOwnProperty(this.columns[i].key)) {
-            defaultDisplayHeader[this.columns[i].key] = this.columns[i].title;
-          }
-        }
-      }
+        setTimeout(() => {
+            this.objData = this.makeObjData();
+            this.originalData = this.makeData();
+            this.rebuildDataStr = JSON.stringify(
+                this.makeDataWithSortAndFilter()
+            );
 
-      let exportRows = [];
+            if (this.rebuildData !== undefined) {
+                const oldDataLen = this.rebuildData.length;
 
-      for (let m = 0; m < this.rebuildData.length; m++) {
-        let row = {};
-        for (let n = 0; n < defaultHeader.length; n++) {
-          row[defaultHeader[n]] = this.rebuildData[m][defaultHeader[n]];
+                if (this.$refs.page !== undefined) {
+                    this.currentIndex = this.$refs.page.currentPage;
+                    this.currentSize = this.$refs.page.currentPageSize;
+                } else {
+                    this.currentIndex = 0;
+                    this.currentSize = 10;
+                }
 
-          if (formats !== null && formats !== undefined) {
-            if (
-              formats[defaultHeader[n]] !== undefined &&
-              formats[defaultHeader[n]] !== null &&
-              formats[defaultHeader[n]].constructor === Function
-            ) {
-              try {
-                row[defaultHeader[n]] = formats[defaultHeader[n]](
-                  this.rebuildData[m],
-                  this.columns.find((p) => p.key === defaultHeader[n]),
-                  this.rebuildData[m][defaultHeader[n]]
-                );
-              } catch (e) {
-                console.log("format method of defaultHeader[n] not valid", e);
-              }
+                this.getRenderData();
+                // this.handleResize();
+                // if (!oldDataLen) {
+                //   this.fixedHeader();
+                // }
+            } else {
+                console.log("undefined rebuildData!");
             }
-          }
-        }
-        exportRows.push(row);
-      }
-
-      ExportXlsx.outPutJson({
-        header: defaultHeader,
-        headerDisplay: defaultDisplayHeader,
-        rows: rows ? rows : exportRows,
-        name: fileName ? fileName : "xlsxfile",
-      });
-    },
-    dragAndDrop(a, b) {
-      this.$emit("on-drag-drop", a, b);
-    },
-    initColumns() {
-      //初始化列
-      const colsWithId = this.makeColumnsId(this.columns);
-      this.cloneColumns = this.makeColumns(colsWithId);
-      this.leftFixedColumnRows = this.makeColumnRows("left", colsWithId);
-      this.rightFixedColumnRows = this.makeColumnRows("right", colsWithId);
-      this.columnRows = this.makeColumnRows(false, colsWithId);
-      this.filterRows = this.makeFilterRows(this.columnRows);
-      this.leftFixedFilterRows = this.makeFilterRows(this.leftFixedColumnRows);
-      this.rightFixedFilterRows = this.makeFilterRows(
-        this.rightFixedColumnRows
-      );
-      this.allColumns = getAllColumns(colsWithId);
+        }, 0);
     },
-  },
-  created() {
-    if (!this.context) this.currentContext = this.$parent;
-    this.showSlotHeader = this.$slots.header !== undefined;
-    this.showSlotFooter = this.$slots.footer !== undefined;
-
-    setTimeout(() => {
-      this.objData = this.makeObjData();
-      this.originalData = this.makeData();
-      this.rebuildDataStr = JSON.stringify(this.makeDataWithSortAndFilter());
-
-      if (this.rebuildData !== undefined) {
-        const oldDataLen = this.rebuildData.length;
-
-        if (this.$refs.page !== undefined) {
-          this.currentIndex = this.$refs.page.currentPage;
-          this.currentSize = this.$refs.page.currentPageSize;
-        } else {
-          this.currentIndex = 0;
-          this.currentSize = 10;
-        }
 
-        this.getRenderData();
-        // this.handleResize();
-        // if (!oldDataLen) {
-        //   this.fixedHeader();
-        // }
-      } else {
-        console.log("undefined rebuildData!");
-      }
-    }, 0);
-  },
-
-  beforeMount() {
-    this.initColumns();
-  },
-  mounted() {
-    this.handleResize();
-    this.$nextTick(() => {
-      this.ready = true;
-    });
-
-    on(window, "resize", this.handleResize);
-    this.observer = elementResizeDetectorMaker();
-    this.observer.listenTo(this.$el, this.handleResize);
-
-    this.$on("on-visible-change", (val) => {
-      if (val) {
-        this.$nextTick(() => {
-          this.handleResize();
-        });
-      }
-    });
-  },
-  beforeDestroy() {
-    off(window, "resize", this.handleResize);
-    this.observer.removeListener(this.$el, this.handleResize);
-  },
-  watch: {
-    columns: {
-      handler(nVal, oVal) {
+    beforeMount() {
         this.initColumns();
-      },
-      deep: true,
     },
-    data: {
-      handler(nVal, oVal) {
-        // here will trigger before clickCurrentRow, so use async
-        setTimeout(() => {
-          this.objData = this.makeObjData();
-          this.originalData = this.makeData();
-          this.rebuildDataStr = JSON.stringify(
-            this.makeDataWithSortAndFilter()
-          );
-
-          if (this.rebuildData !== undefined) {
-            const oldDataLen = this.rebuildData.length;
-
-            if (this.$refs.page !== undefined) {
-              this.currentIndex = this.$refs.page.currentPage;
-              this.currentSize = this.$refs.page.currentPageSize;
-            } else {
-              this.currentIndex = 0;
-              this.currentSize = 10;
-            }
+    mounted() {
+        this.handleResize();
+        this.$nextTick(() => {
+            this.ready = true;
+        });
 
-            this.getRenderData();
-            this.handleResize();
-            if (!oldDataLen) {
-              this.fixedHeader();
+        on(window, "resize", this.handleResize);
+        this.observer = elementResizeDetectorMaker();
+        this.observer.listenTo(this.$el, this.handleResize);
+
+        this.$on("on-visible-change", val => {
+            if (val) {
+                this.$nextTick(() => {
+                    this.handleResize();
+                });
             }
-          } else {
-            console.log("undefined rebuildData!");
-          }
-        }, 0);
-      },
-      deep: true,
-    },
-    height() {
-      this.handleResize();
-    },
-    maxHeight() {
-      this.handleResize();
-    },
-    showHorizontalScrollBar() {
-      this.handleResize();
+        });
     },
-    showVerticalScrollBar() {
-      this.handleResize();
+    beforeDestroy() {
+        off(window, "resize", this.handleResize);
+        this.observer.removeListener(this.$el, this.handleResize);
     },
-  },
+    watch: {
+        columns: {
+            handler(nVal, oVal) {
+                this.initColumns();
+            },
+            deep: true
+        },
+        data: {
+            handler(nVal, oVal) {
+                if (this.serverSide) {
+                    setTimeout(() => {
+                        this.objData = this.makeObjData();
+                        this.rebuildDataStr = this.makeData();
+
+                        if (this.rebuildData !== undefined) {
+                            this.renderData = this.rebuildData;
+                        }
+                    }, 0);
+                } else {
+                    // here will trigger before clickCurrentRow, so use async
+                    setTimeout(() => {
+                        this.objData = this.makeObjData();
+                        this.originalData = this.makeData();
+                        this.rebuildDataStr = JSON.stringify(
+                            this.makeDataWithSortAndFilter()
+                        );
+
+                        if (this.rebuildData !== undefined) {
+                            const oldDataLen = this.rebuildData.length;
+
+                            if (this.$refs.page !== undefined) {
+                                this.currentIndex = this.$refs.page.currentPage;
+                                this.currentSize = this.$refs.page.currentPageSize;
+                            } else {
+                                this.currentIndex = 0;
+                                this.currentSize = 10;
+                            }
+
+                            this.getRenderData();
+                            this.handleResize();
+                            if (!oldDataLen) {
+                                this.fixedHeader();
+                            }
+                        } else {
+                            console.log("undefined rebuildData!");
+                        }
+                    }, 0);
+                }
+            },
+            deep: true
+        },
+        height() {
+            this.handleResize();
+        },
+        maxHeight() {
+            this.handleResize();
+        },
+        showHorizontalScrollBar() {
+            this.handleResize();
+        },
+        showVerticalScrollBar() {
+            this.handleResize();
+        }
+    }
 };
 </script>
diff --git a/src/components/table/util.js b/src/components/table/util.js
index 1ff3dba..d559613 100644
--- a/src/components/table/util.js
+++ b/src/components/table/util.js
@@ -44,7 +44,7 @@ const jumUndefinedCol = (row, field) => {
 //field,filterValue,row
 const getNumberFilter = filterOp => {
     switch (filterOp.filterOperation) {
-        case "Equals":
+        case "Equal":
             return (column, field, filterValue, row) => {
                 if (jumUndefinedCol(row, field)) {
                     return true;
@@ -67,7 +67,7 @@ const getNumberFilter = filterOp => {
                 return row[field] !== Number.parseFloat(filterValue);
             };
 
-        case "Less":
+        case "LessThan":
             return (column, field, filterValue, row) => {
                 if (jumUndefinedCol(row, field)) {
                     return true;
@@ -79,7 +79,7 @@ const getNumberFilter = filterOp => {
                 return row[field] < Number.parseFloat(filterValue);
             };
 
-        case "Greater":
+        case "GreaterThanOrEqual":
             return (column, field, filterValue, row) => {
                 if (jumUndefinedCol(row, field)) {
                     return true;
@@ -90,7 +90,7 @@ const getNumberFilter = filterOp => {
                 return row[field] > Number.parseFloat(filterValue);
             };
 
-        case "LessOrEquals":
+        case "LessThanOrEqual":
             return (column, field, filterValue, row) => {
                 if (jumUndefinedCol(row, field)) {
                     return true;
@@ -112,7 +112,7 @@ const getNumberFilter = filterOp => {
                 return row[field] >= Number.parseFloat(filterValue);
             };
 
-        case "Between":
+        case "DateRange":
             return (column, field, filterValue, row) => {
                 if (jumUndefinedCol(row, field)) {
                     return true;
@@ -126,7 +126,7 @@ const getNumberFilter = filterOp => {
                 );
             };
 
-        case "AnyOf":
+        case "Any":
             return (column, field, filterValue, row) => {
                 if (jumUndefinedCol(row, field)) {
                     return true;
@@ -137,7 +137,7 @@ const getNumberFilter = filterOp => {
                 return filterValue.search(row[field]) !== -1;
             };
 
-        case "NoneOf":
+        case "NotAny":
             return (column, field, filterValue, row) => {
                 if (jumUndefinedCol(row, field)) {
                     return true;
@@ -212,7 +212,7 @@ const getDate = timeStamp => {
 
 const getDateFilter = filterOp => {
     switch (filterOp.filterOperation) {
-        case "Equals":
+        case "Equal":
             return (column, field, filterValue, row) => {
                 if (jumUndefinedCol(row, field)) {
                     return true;
@@ -245,7 +245,7 @@ const getDateFilter = filterOp => {
                 );
             };
 
-        case "Less":
+        case "LessThan":
             return (column, field, filterValue, row) => {
                 if (jumUndefinedCol(row, field)) {
                     return true;
@@ -261,7 +261,7 @@ const getDateFilter = filterOp => {
                 );
             };
 
-        case "Greater":
+        case "GreaterThanOrEqual":
             return (column, field, filterValue, row) => {
                 if (jumUndefinedCol(row, field)) {
                     return true;
@@ -278,7 +278,7 @@ const getDateFilter = filterOp => {
                 );
             };
 
-        case "LessOrEquals":
+        case "LessThanOrEqual":
             return (column, field, filterValue, row) => {
                 if (jumUndefinedCol(row, field)) {
                     return true;
@@ -310,7 +310,7 @@ const getDateFilter = filterOp => {
                 );
             };
 
-        case "Between":
+        case "DateRange":
             return (column, field, filterValue, row) => {
                 if (jumUndefinedCol(row, field)) {
                     return true;
@@ -319,7 +319,7 @@ const getDateFilter = filterOp => {
                 if (row[field].length === "yyyy-MM-dd".length) {
                     curDate += " 00:00:00";
                 }
-                
+
                 return (
                     new Date(curDate).getTime() >=
                         new Date(filterValue[0]).getTime() &&
@@ -357,8 +357,16 @@ const getStrFilter = filterOp => {
                     return false;
                 }
 
-                if(column.phoneticMatch !== undefined && column.phoneticMatch !== null){
-                    return column.phoneticMatch(column, field, filterValue, row)
+                if (
+                    column.phoneticMatch !== undefined &&
+                    column.phoneticMatch !== null
+                ) {
+                    return column.phoneticMatch(
+                        column,
+                        field,
+                        filterValue,
+                        row
+                    );
                 }
 
                 return (
@@ -426,7 +434,7 @@ const getStrFilter = filterOp => {
                 );
             };
 
-        case "Equals":
+        case "Equal":
             return (column, field, filterValue, row) => {
                 const filterValueIsEmpty =
                     filterValue === undefined ||
@@ -496,7 +504,7 @@ const getStrFilter = filterOp => {
                 return !filterValueIsEmpty;
             };
 
-        case "AnyOf":
+        case "Any":
             return (column, field, filterValue, row) => {
                 const filterValueIsEmpty =
                     filterValue === undefined ||
@@ -516,7 +524,7 @@ const getStrFilter = filterOp => {
                 });
             };
 
-        case "NoneOf":
+        case "NotAny":
             return (column, field, filterValue, row) => {
                 const filterValueIsEmpty =
                     filterValue === undefined ||
@@ -549,8 +557,16 @@ const getStrFilter = filterOp => {
                     return false;
                 }
 
-                if(column.phoneticMatch !== undefined && column.phoneticMatch !== null){
-                    return column.phoneticMatch(column, field, filterValue, row)
+                if (
+                    column.phoneticMatch !== undefined &&
+                    column.phoneticMatch !== null
+                ) {
+                    return column.phoneticMatch(
+                        column,
+                        field,
+                        filterValue,
+                        row
+                    );
                 }
                 return row[field].toString().search(filterValue.trim()) !== -1;
             };
@@ -678,7 +694,7 @@ const convertToRows = (columns, fixedType = false) => {
 
     const allColumns = getAllColumns(originColumns, true);
 
-    allColumns.forEach((column) => {
+    allColumns.forEach(column => {
         if (!column.children) {
             column.rowSpan = maxLevel - column.level + 1;
         } else {
diff --git a/src/locale/lang/en-US.js b/src/locale/lang/en-US.js
index 692506c..b1bfcd9 100644
--- a/src/locale/lang/en-US.js
+++ b/src/locale/lang/en-US.js
@@ -21,14 +21,14 @@ const lang = {
             filterEndWith: "EndWith",
             filterResultL: ", the filter result ",
             filterResultR: " items",
-            filterEqual:"equal",
-            filterNotEqual:"not equal",
-            filterLess:"less",
-            filterLessEqual:"less or equal",
-            filterLarger:"greater",
-            filterLargerEqual:"greater or equal",
-            filterBetween:"between",
-            filterBetweenPlaceHolder:"from...to...",
+            filterEqual: "equal",
+            filterNotEqual: "not equal",
+            filterLess: "less",
+            filterLessEqual: "less or equal",
+            filterLarger: "greater",
+            filterLargerEqual: "greater or equal",
+            filterDateRange: "DateRange",
+            filterDateRangePlaceHolder: "from...to..."
         },
         datepicker: {
             selectDate: "Select date",
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index 97cf63d..3941ded 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -21,14 +21,14 @@ const lang = {
             filterEndWith: "结束于",
             filterResultL: "，筛选结果共",
             filterResultR: "条",
-            filterEqual:"等于",
-            filterNotEqual:"不等于",
-            filterLess:"小于",
-            filterLessEqual:"小于等于",
-            filterLarger:"大于",
-            filterLargerEqual:"大于等于",
-            filterBetween:"之间",
-            filterBetweenPlaceHolder:"从...到...",
+            filterEqual: "等于",
+            filterNotEqual: "不等于",
+            filterLess: "小于",
+            filterLessEqual: "小于等于",
+            filterLarger: "大于",
+            filterLargerEqual: "大于等于",
+            filterDateRange: "之间",
+            filterDateRangePlaceHolder: "从...到..."
         },
         datepicker: {
             selectDate: "选择日期",
diff --git a/types/table.d.ts b/types/table.d.ts
index caf1496..d062b80 100644
--- a/types/table.d.ts
+++ b/types/table.d.ts
@@ -71,11 +71,11 @@ export declare class Table extends Vue {
     /**
      * 表格分页每页大小
      */
-    "page-size"?: number | string;
+    "page-size": number | string;
     /**
      * 表格分页下拉选择
      */
-    "page-count"?: number | string;
+    "page-count": number | string;
     /**
      * 数据为空时显示的提示内容
      * @default 暂无数据
@@ -101,6 +101,10 @@ export declare class Table extends Vue {
      * @default false
      */
     "row-key": boolean;
+    /**
+     * 是否服务端分页筛选排序
+     */
+    "server-side": boolean;
     /**
      * 开启 highlight-row 后有效，当表格的当前行发生变化的时候会触发
      * currentRow：当前高亮行的数据