diff --git a/app/Domains/Real/Repositories/OrderRepository.php b/app/Domains/Real/Repositories/OrderRepository.php
index 7d5d31d5..50c1c4f9 100644
--- a/app/Domains/Real/Repositories/OrderRepository.php
+++ b/app/Domains/Real/Repositories/OrderRepository.php
@@ -2,6 +2,7 @@
 
 namespace App\Domains\Real\Repositories;
 
+use Carbon\Carbon;
 use App\Core\Repository;
 use App\Models\Real\Order as Model;
 
diff --git a/frontend/src/components/table/assist.js b/frontend/src/components/table/assist.js
new file mode 100644
index 00000000..b6bd5500
--- /dev/null
+++ b/frontend/src/components/table/assist.js
@@ -0,0 +1,329 @@
+import Vue from 'vue';
+const isServer = Vue.prototype.$isServer;
+// 判断参数是否是其中之一
+export function oneOf(value, validList) {
+  for (let i = 0; i < validList.length; i++) {
+    if (value === validList[i]) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function camelcaseToHyphen(str) {
+  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+// For Modal scrollBar hidden
+let cached;
+export function getScrollBarSize(fresh) {
+  if (isServer) return 0;
+  if (fresh || cached === undefined) {
+    const inner = document.createElement('div');
+    inner.style.width = '100%';
+    inner.style.height = '200px';
+
+    const outer = document.createElement('div');
+    const outerStyle = outer.style;
+
+    outerStyle.position = 'absolute';
+    outerStyle.top = 0;
+    outerStyle.left = 0;
+    outerStyle.pointerEvents = 'none';
+    outerStyle.visibility = 'hidden';
+    outerStyle.width = '200px';
+    outerStyle.height = '150px';
+    outerStyle.overflow = 'hidden';
+
+    outer.appendChild(inner);
+
+    document.body.appendChild(outer);
+
+    const widthContained = inner.offsetWidth;
+    outer.style.overflow = 'scroll';
+    let widthScroll = inner.offsetWidth;
+
+    if (widthContained === widthScroll) {
+      widthScroll = outer.clientWidth;
+    }
+
+    document.body.removeChild(outer);
+
+    cached = widthContained - widthScroll;
+  }
+  return cached;
+}
+
+// watch DOM change
+export const MutationObserver = isServer ? false : window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver || false;
+
+const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
+const MOZ_HACK_REGEXP = /^moz([A-Z])/;
+
+function camelCase(name) {
+  return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
+    return offset ? letter.toUpperCase() : letter;
+  }).replace(MOZ_HACK_REGEXP, 'Moz$1');
+}
+// getStyle
+export function getStyle(element, styleName) {
+  if (!element || !styleName) return null;
+  styleName = camelCase(styleName);
+  if (styleName === 'float') {
+    styleName = 'cssFloat';
+  }
+  try {
+    const computed = document.defaultView.getComputedStyle(element, '');
+    return element.style[styleName] || computed ? computed[styleName] : null;
+  } catch (e) {
+    return element.style[styleName];
+  }
+}
+
+// firstUpperCase
+function firstUpperCase(str) {
+  return str.toString()[0].toUpperCase() + str.toString().slice(1);
+}
+export { firstUpperCase };
+
+// Warn
+export function warnProp(component, prop, correctType, wrongType) {
+  correctType = firstUpperCase(correctType);
+  wrongType = firstUpperCase(wrongType);
+  console.error(`[iView warn]: Invalid prop: type check failed for prop ${prop}. Expected ${correctType}, got ${wrongType}. (found in component: ${component})`); // eslint-disable-line
+}
+
+function typeOf(obj) {
+  const toString = Object.prototype.toString;
+  const map = {
+    '[object Boolean]': 'boolean',
+    '[object Number]': 'number',
+    '[object String]': 'string',
+    '[object Function]': 'function',
+    '[object Array]': 'array',
+    '[object Date]': 'date',
+    '[object RegExp]': 'regExp',
+    '[object Undefined]': 'undefined',
+    '[object Null]': 'null',
+    '[object Object]': 'object'
+  };
+  return map[toString.call(obj)];
+}
+
+// deepCopy
+function deepCopy(data) {
+  const t = typeOf(data);
+  let o;
+
+  if (t === 'array') {
+    o = [];
+  } else if (t === 'object') {
+    o = {};
+  } else {
+    return data;
+  }
+
+  if (t === 'array') {
+    for (let i = 0; i < data.length; i++) {
+      o.push(deepCopy(data[i]));
+    }
+  } else if (t === 'object') {
+    for (let i in data) {
+      o[i] = deepCopy(data[i]);
+    }
+  }
+  return o;
+}
+
+export { deepCopy };
+
+// scrollTop animation
+export function scrollTop(el, from = 0, to, duration = 500, endCallback) {
+  if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = (
+      window.webkitRequestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      window.msRequestAnimationFrame ||
+      function(callback) {
+        return window.setTimeout(callback, 1000 / 60);
+      }
+    );
+  }
+  const difference = Math.abs(from - to);
+  const step = Math.ceil(difference / duration * 50);
+
+  function scroll(start, end, step) {
+    if (start === end) {
+      endCallback && endCallback();
+      return;
+    }
+
+    let d = (start + step > end) ? end : start + step;
+    if (start > end) {
+      d = (start - step < end) ? end : start - step;
+    }
+
+    if (el === window) {
+      window.scrollTo(d, d);
+    } else {
+      el.scrollTop = d;
+    }
+    window.requestAnimationFrame(() => scroll(d, end, step));
+  }
+  scroll(from, to, step);
+}
+
+// Find components upward
+function findComponentUpward(context, componentName, componentNames) {
+  if (typeof componentName === 'string') {
+    componentNames = [componentName];
+  } else {
+    componentNames = componentName;
+  }
+
+  let parent = context.$parent;
+  let name = parent.$options.name;
+  while (parent && (!name || componentNames.indexOf(name) < 0)) {
+    parent = parent.$parent;
+    if (parent) name = parent.$options.name;
+  }
+  return parent;
+}
+export { findComponentUpward };
+
+// Find component downward
+export function findComponentDownward(context, componentName) {
+  const childrens = context.$children;
+  let children = null;
+
+  if (childrens.length) {
+    for (const child of childrens) {
+      const name = child.$options.name;
+      if (name === componentName) {
+        children = child;
+        break;
+      } else {
+        children = findComponentDownward(child, componentName);
+        if (children) break;
+      }
+    }
+  }
+  return children;
+}
+
+// Find components downward
+export function findComponentsDownward(context, componentName) {
+  return context.$children.reduce((components, child) => {
+    if (child.$options.name === componentName) components.push(child);
+    const foundChilds = findComponentsDownward(child, componentName);
+    return components.concat(foundChilds);
+  }, []);
+}
+
+// Find components upward
+export function findComponentsUpward(context, componentName) {
+  let parents = [];
+  const parent = context.$parent;
+  if (parent) {
+    if (parent.$options.name === componentName) parents.push(parent);
+    return parents.concat(findComponentsUpward(parent, componentName));
+  } else {
+    return [];
+  }
+}
+
+// Find brothers components
+export function findBrothersComponents(context, componentName, exceptMe = true) {
+  let res = context.$parent.$children.filter(item => {
+    return item.$options.name === componentName;
+  });
+  let index = res.findIndex(item => item._uid === context._uid);
+  if (exceptMe) res.splice(index, 1);
+  return res;
+}
+
+/* istanbul ignore next */
+const trim = function(string) {
+  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+};
+
+/* istanbul ignore next */
+export function hasClass(el, cls) {
+  if (!el || !cls) return false;
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
+  if (el.classList) {
+    return el.classList.contains(cls);
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
+  }
+}
+
+/* istanbul ignore next */
+export function addClass(el, cls) {
+  if (!el) return;
+  let curClass = el.className;
+  const classes = (cls || '').split(' ');
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else {
+      if (!hasClass(el, clsName)) {
+        curClass += ' ' + clsName;
+      }
+    }
+  }
+  if (!el.classList) {
+    el.className = curClass;
+  }
+}
+
+/* istanbul ignore next */
+export function removeClass(el, cls) {
+  if (!el || !cls) return;
+  const classes = cls.split(' ');
+  let curClass = ' ' + el.className + ' ';
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else {
+      if (hasClass(el, clsName)) {
+        curClass = curClass.replace(' ' + clsName + ' ', ' ');
+      }
+    }
+  }
+  if (!el.classList) {
+    el.className = trim(curClass);
+  }
+}
+
+export const dimensionMap = {
+  xs: '480px',
+  sm: '768px',
+  md: '992px',
+  lg: '1200px',
+  xl: '1600px'
+};
+
+export function setMatchMedia() {
+  if (typeof window !== 'undefined') {
+    const matchMediaPolyfill = mediaQuery => {
+      return {
+        media: mediaQuery,
+        matches: false,
+        on() {},
+        off() {}
+      };
+    };
+    window.matchMedia = window.matchMedia || matchMediaPolyfill;
+  }
+}
+
+export const sharpMatcherRegx = /#([^#]+)$/;
diff --git a/frontend/src/components/table/cell.vue b/frontend/src/components/table/cell.vue
new file mode 100644
index 00000000..f30ad940
--- /dev/null
+++ b/frontend/src/components/table/cell.vue
@@ -0,0 +1,137 @@
+<template>
+  <div :class="classes" ref="cell">
+    <template v-if="renderType === 'index'">
+      <span>{{ column.indexMethod ? column.indexMethod(row) : (naturalIndex + 1) }}</span>
+    </template>
+    <template v-if="renderType === 'selection'">
+      <Checkbox
+        :value="checked"
+        @click.native.stop="handleClick"
+        @on-change="toggleSelect"
+        :disabled="disabled"
+      ></Checkbox>
+    </template>
+    <template v-if="renderType === 'html'">
+      <span v-html="row[column.key]"></span>
+    </template>
+    <template v-if="renderType === 'normal'">
+      <template v-if="column.tooltip">
+        <Tooltip
+          transfer
+          :content="row[column.key]"
+          :disabled="!showTooltip"
+          :max-width="300"
+          class="ivu-table-cell-tooltip"
+        >
+          <span
+            ref="content"
+            @mouseenter="handleTooltipIn"
+            @mouseleave="handleTooltipOut"
+            class="ivu-table-cell-tooltip-content"
+          >{{ row[column.key] }}</span>
+        </Tooltip>
+      </template>
+      <span v-else>{{row[column.key]}}</span>
+    </template>
+    <template v-if="renderType === 'expand' && !row._disableExpand">
+      <div :class="expandCls" @click="toggleExpand">
+        <Icon type="ios-arrow-forward"></Icon>
+      </div>
+    </template>
+    <Cell
+      v-if="renderType === 'render'"
+      :row="row"
+      :column="column"
+      :index="index"
+      :render="column.render"
+    ></Cell>
+  </div>
+</template>
+<script>
+import Cell from "./expand";
+
+export default {
+  name: "TableCell",
+  components: { Cell },
+  props: {
+    prefixCls: String,
+    row: Object,
+    column: Object,
+    naturalIndex: Number, // index of rebuildData
+    index: Number, // _index of data
+    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 // 鼠标滑过overflow文本时，再检查是否需要显示
+    };
+  },
+  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"
+        }
+      ];
+    },
+    expandCls() {
+      return [
+        `${this.prefixCls}-cell-expand`,
+        {
+          [`${this.prefixCls}-cell-expand-expanded`]: this.expanded
+        }
+      ];
+    }
+  },
+  methods: {
+    toggleSelect() {
+      this.$parent.$parent.$parent.toggleSelect(this.index);
+    },
+    toggleExpand() {
+      this.$parent.$parent.$parent.toggleExpand(this.index);
+    },
+    handleClick() {
+      // 放置 Checkbox 冒泡
+    },
+    handleTooltipIn() {
+      const $content = this.$refs.content;
+      this.showTooltip = $content.scrollWidth > $content.offsetWidth;
+    },
+    handleTooltipOut() {
+      this.showTooltip = 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 {
+      this.renderType = "normal";
+    }
+  }
+};
+</script>
diff --git a/frontend/src/components/table/csv.js b/frontend/src/components/table/csv.js
new file mode 100644
index 00000000..b0605415
--- /dev/null
+++ b/frontend/src/components/table/csv.js
@@ -0,0 +1,59 @@
+/*
+  inspired by https://www.npmjs.com/package/react-csv-downloader
+  now removed from Github
+*/
+
+const newLine = '\r\n';
+const appendLine = (content, row, { separator, quoted }) => {
+    const line = row.map(data => {
+        if (!quoted) return data;
+        // quote data
+        data = typeof data === 'string' ? data.replace(/"/g, '"') : data;
+        return `"${data}"`;
+    });
+    content.push(line.join(separator));
+};
+
+const defaults = {
+    separator: ',',
+    quoted: false
+};
+
+export default function csv(columns, datas, options, noHeader = false) {
+    options = Object.assign({}, defaults, options);
+    let columnOrder;
+    const content = [];
+    const column = [];
+
+    if (columns) {
+        columnOrder = columns.map(v => {
+            if (typeof v === 'string') return v;
+            if (!noHeader) {
+                column.push(typeof v.title !== 'undefined' ? v.title : v.key);
+            }
+            return v.key;
+        });
+        if (column.length > 0) appendLine(content, column, options);
+    } else {
+        columnOrder = [];
+        datas.forEach(v => {
+            if (!Array.isArray(v)) {
+                columnOrder = columnOrder.concat(Object.keys(v));
+            }
+        });
+        if (columnOrder.length > 0) {
+            columnOrder = columnOrder.filter((value, index, self) => self.indexOf(value) === index);
+            if (!noHeader) appendLine(content, columnOrder, options);
+        }
+    }
+
+    if (Array.isArray(datas)) {
+        datas.forEach(row => {
+            if (!Array.isArray(row)) {
+                row = columnOrder.map(k => (typeof row[k] !== 'undefined' ? row[k] : ''));
+            }
+            appendLine(content, row, options);
+        });
+    }
+    return content.join(newLine);
+}
diff --git a/frontend/src/components/table/dom.js b/frontend/src/components/table/dom.js
new file mode 100644
index 00000000..26a228e0
--- /dev/null
+++ b/frontend/src/components/table/dom.js
@@ -0,0 +1,36 @@
+import Vue from 'vue';
+const isServer = Vue.prototype.$isServer;
+
+/* istanbul ignore next */
+export const on = (function() {
+    if (!isServer && document.addEventListener) {
+        return function(element, event, handler) {
+            if (element && event && handler) {
+                element.addEventListener(event, handler, false);
+            }
+        };
+    } else {
+        return function(element, event, handler) {
+            if (element && event && handler) {
+                element.attachEvent('on' + event, handler);
+            }
+        };
+    }
+})();
+
+/* istanbul ignore next */
+export const off = (function() {
+    if (!isServer && document.removeEventListener) {
+        return function(element, event, handler) {
+            if (element && event) {
+                element.removeEventListener(event, handler, false);
+            }
+        };
+    } else {
+        return function(element, event, handler) {
+            if (element && event) {
+                element.detachEvent('on' + event, handler);
+            }
+        };
+    }
+})();
diff --git a/frontend/src/components/table/expand.js b/frontend/src/components/table/expand.js
new file mode 100644
index 00000000..2c855946
--- /dev/null
+++ b/frontend/src/components/table/expand.js
@@ -0,0 +1,21 @@
+export default {
+  name: 'TableExpand',
+  functional: true,
+  props: {
+    row: Object,
+    render: Function,
+    index: Number,
+    column: {
+      type: Object,
+      default: null
+    }
+  },
+  render: (h, ctx) => {
+    const params = {
+      row: ctx.props.row,
+      index: ctx.props.index
+    };
+    if (ctx.props.column) params.column = ctx.props.column;
+    return ctx.props.render(h, params);
+  }
+};
diff --git a/frontend/src/components/table/export-csv.js b/frontend/src/components/table/export-csv.js
new file mode 100644
index 00000000..c76c726f
--- /dev/null
+++ b/frontend/src/components/table/export-csv.js
@@ -0,0 +1,76 @@
+function has(browser) {
+  const ua = navigator.userAgent;
+  if (browser === 'ie') {
+    const isIE = ua.indexOf('compatible') > -1 && ua.indexOf('MSIE') > -1;
+    if (isIE) {
+      const reIE = new RegExp('MSIE (\\d+\\.\\d+);');
+      reIE.test(ua);
+      return parseFloat(RegExp['$1']);
+    } else {
+      return false;
+    }
+  } else {
+    return ua.indexOf(browser) > -1;
+  }
+}
+
+const csv = {
+  _isIE11() {
+    let iev = 0;
+    const ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
+    const trident = !!navigator.userAgent.match(/Trident\/7.0/);
+    const rv = navigator.userAgent.indexOf('rv:11.0');
+
+    if (ieold) {
+      iev = Number(RegExp.$1);
+    }
+    if (navigator.appVersion.indexOf('MSIE 10') !== -1) {
+      iev = 10;
+    }
+    if (trident && rv !== -1) {
+      iev = 11;
+    }
+
+    return iev === 11;
+  },
+
+  _isEdge() {
+    return /Edge/.test(navigator.userAgent);
+  },
+
+  _getDownloadUrl(text) {
+    const BOM = '\uFEFF';
+    // Add BOM to text for open in excel correctly
+    if (window.Blob && window.URL && window.URL.createObjectURL) {
+      const csvData = new Blob([BOM + text], { type: 'text/csv' });
+      return URL.createObjectURL(csvData);
+    } else {
+      return 'data:attachment/csv;charset=utf-8,' + BOM + encodeURIComponent(text);
+    }
+  },
+
+  download(filename, text) {
+    if (has('ie') && has('ie') < 10) {
+      // has module unable identify ie11 and Edge
+      const oWin = window.top.open('about:blank', '_blank');
+      oWin.document.charset = 'utf-8';
+      oWin.document.write(text);
+      oWin.document.close();
+      oWin.document.execCommand('SaveAs', filename);
+      oWin.close();
+    } else if (has('ie') === 10 || this._isIE11() || this._isEdge()) {
+      const BOM = '\uFEFF';
+      const csvData = new Blob([BOM + text], { type: 'text/csv' });
+      navigator.msSaveBlob(csvData, filename);
+    } else {
+      const link = document.createElement('a');
+      link.download = filename;
+      link.href = this._getDownloadUrl(text);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }
+};
+
+export default csv;
diff --git a/frontend/src/components/table/header.js b/frontend/src/components/table/header.js
new file mode 100644
index 00000000..0c31c6ac
--- /dev/null
+++ b/frontend/src/components/table/header.js
@@ -0,0 +1,16 @@
+export default {
+  name: 'TableRenderHeader',
+  functional: true,
+  props: {
+    render: Function,
+    column: Object,
+    index: Number
+  },
+  render: (h, ctx) => {
+    const params = {
+      column: ctx.props.column,
+      index: ctx.props.index
+    };
+    return ctx.props.render(h, params);
+  }
+};
diff --git a/frontend/src/components/table/index.js b/frontend/src/components/table/index.js
new file mode 100644
index 00000000..087b4c9e
--- /dev/null
+++ b/frontend/src/components/table/index.js
@@ -0,0 +1,2 @@
+import Table from './table.vue';
+export default Table;
diff --git a/frontend/src/components/table/mixin.js b/frontend/src/components/table/mixin.js
new file mode 100644
index 00000000..ecafae2d
--- /dev/null
+++ b/frontend/src/components/table/mixin.js
@@ -0,0 +1,31 @@
+export default {
+  methods: {
+    alignCls(column, row = {}) {
+      let cellClassName = '';
+      if (row.cellClassName && column.key && row.cellClassName[column.key]) {
+        cellClassName = row.cellClassName[column.key];
+      }
+      return [
+        {
+          [`${cellClassName}`]: cellClassName, // cell className
+          [`${column.className}`]: column.className, // column className
+          [`${this.prefixCls}-column-${column.align}`]: column.align,
+          [`${this.prefixCls}-hidden`]: (this.fixed === 'left' && column.fixed !== 'left') || (this.fixed === 'right' && column.fixed !== 'right') || (!this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'))
+        }
+      ];
+    },
+    isPopperShow(column) {
+      return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
+    },
+    setCellWidth(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;
+    }
+  }
+};
diff --git a/frontend/src/components/table/table-body.vue b/frontend/src/components/table/table-body.vue
new file mode 100644
index 00000000..6dc5ad85
--- /dev/null
+++ b/frontend/src/components/table/table-body.vue
@@ -0,0 +1,245 @@
+<template>
+  <table cellspacing="0" cellpadding="0" border="0" :style="styleObject">
+    <colgroup>
+      <col v-for="(column, index) in columns" :width="setCellWidth(column)">
+    </colgroup>
+    <tbody :class="[prefixCls + '-tbody']">
+      <div :style="{height: `${topPlaceholderHeight}px`}"></div>
+
+      <template v-for="table in showData">
+        <template v-for="(row, index) in table">
+          <table-tr
+            :row="row"
+            :key="row._rowKey"
+            :prefix-cls="prefixCls"
+            @mouseenter.native.stop="handleMouseIn(row._index)"
+            @mouseleave.native.stop="handleMouseOut(row._index)"
+            @click.native="clickCurrentRow(row._index)"
+            @dblclick.native.stop="dblclickCurrentRow(row._index)"
+          >
+            <td v-for="column in columns" :class="alignCls(column, row)">
+              <Cell
+                :fixed="fixed"
+                :prefix-cls="prefixCls"
+                :row="row"
+                :key="column._columnKey"
+                :column="column"
+                :natural-index="index"
+                :index="row._index"
+                :checked="rowChecked(row._index)"
+                :disabled="rowDisabled(row._index)"
+                :expanded="rowExpanded(row._index)"
+              ></Cell>
+            </td>
+          </table-tr>
+          <tr v-if="rowExpanded(row._index)" :class="{[prefixCls + '-expanded-hidden']: fixed}">
+            <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
+              <Expand :key="row._rowKey" :row="row" :render="expandRender" :index="row._index"></Expand>
+            </td>
+          </tr>
+        </template>
+      </template>
+      <div :style="{height: `${bottomPlaceholderHeight}px`}"></div>
+    </tbody>
+  </table>
+</template>
+<script>
+// todo :key="row"
+import TableTr from "./table-tr.vue";
+import Cell from "./cell.vue";
+import Expand from "./expand.js";
+import Mixin from "./mixin";
+
+export default {
+  name: "TableBody",
+  mixins: [Mixin],
+  components: { Cell, Expand, TableTr },
+  props: {
+    prefixCls: String,
+    styleObject: Object,
+    columns: Array,
+    data: Array, // rebuildData
+    objData: Object,
+    columnsWidth: Object,
+    fixed: {
+      type: [Boolean, String],
+      default: false
+    }
+  },
+  data() {
+    return {
+      times0: 0, // 当前是第几轮
+      times1: 0,
+      times2: -1,
+      placeholderHeight: 0, // 占位容器的总高度(上 + 下)
+      topPlaceholderHeight: 0, // 顶部占位容器高度
+      bottomPlaceholderHeight: 0, // 底部占位容器高度
+      currentIndex: -1, // 当前展示的表格是第几个
+      showData: []
+    };
+  },
+  watch: {
+    data: {
+      handler() {
+        this.clear();
+        this.$nextTick(() => {
+          this.handleStyle();
+        });
+      }
+    },
+    scrollTop: {
+      handler() {
+        this.$nextTick(() => {
+          this.handleStyle();
+        });
+      }
+    },
+    currentIndex: {
+      handler() {
+        this.setTopPlace();
+      }
+    }
+  },
+  computed: {
+    scrollTop() {
+      return this.$parent.scrollTop;
+    },
+    bodyHeight() {
+      return this.$parent.bodyHeight; // 表格高度
+    },
+    rowHeight() {
+      let height = { small: 40, large: 60, default: 48 };
+      return height[this.$parent.size]; // 行高
+    },
+    showRowNum() {
+      return parseInt(this.bodyHeight / this.rowHeight) + 15; // 一次显示多少行
+    },
+    moduleHeight() {
+      return this.showRowNum * this.rowHeight; // 容器高度
+    },
+    totalRowHeight() {
+      return this.data.length * this.rowHeight; // 内容总高
+    },
+    expandRender() {
+      let render = function() {
+        return "";
+      };
+      for (let i = 0; i < this.columns.length; i++) {
+        const column = this.columns[i];
+        if (column.type && column.type === "expand") {
+          if (column.render) render = column.render;
+        }
+      }
+      return render;
+    }
+  },
+  methods: {
+    rowChecked(_index) {
+      return this.objData[_index] && this.objData[_index]._isChecked;
+    },
+    rowDisabled(_index) {
+      return this.objData[_index] && this.objData[_index]._isDisabled;
+    },
+    rowExpanded(_index) {
+      return this.objData[_index] && this.objData[_index]._isExpanded;
+    },
+    handleMouseIn(_index) {
+      this.$parent.handleMouseIn(_index);
+    },
+    handleMouseOut(_index) {
+      this.$parent.handleMouseOut(_index);
+    },
+    clickCurrentRow(_index) {
+      this.$parent.clickCurrentRow(_index);
+    },
+    dblclickCurrentRow(_index) {
+      this.$parent.dblclickCurrentRow(_index);
+    },
+    handleStyle() {
+      this.placeholderHeight = this.totalRowHeight - this.moduleHeight * 3; // 占位容器的总高度(上 + 下)
+
+      this.topPlaceholderHeight =
+        parseInt(this.scrollTop / this.moduleHeight) * this.moduleHeight;
+
+      this.bottomPlaceholderHeight =
+        this.placeholderHeight - this.topPlaceholderHeight < 0
+          ? 0
+          : this.placeholderHeight - this.topPlaceholderHeight;
+
+      this.currentIndex = parseInt(
+        (this.scrollTop % (this.moduleHeight * 3)) / this.moduleHeight
+      );
+    },
+    clear() {
+      this.showData = [];
+      this.currentIndex = -1;
+      this.placeholderHeight = 0;
+      this.topPlaceholderHeight = 0;
+      this.bottomPlaceholderHeight = 0;
+    },
+    setTopPlace() {
+      let scrollTop = this.scrollTop;
+      let t0 = 0;
+      let t1 = 0;
+      let t2 = 0;
+      if (scrollTop > this.moduleHeight) {
+        switch (this.currentIndex) {
+          case 0:
+            t0 = parseInt(scrollTop / (this.moduleHeight * 3));
+            t1 = t2 = t0;
+            break;
+          case 1:
+            t1 = parseInt(
+              (scrollTop - this.moduleHeight) / (this.moduleHeight * 3)
+            );
+            t0 = t1 + 1;
+            t2 = t1;
+            break;
+          case 2:
+            t2 = parseInt(
+              (scrollTop - this.moduleHeight * 2) / (this.moduleHeight * 3)
+            );
+            t0 = t1 = t2 + 1;
+        }
+      }
+      this.times0 = t0;
+      this.times1 = t1;
+      this.times2 = t2;
+      this.setTableData();
+    },
+    setTableData() {
+      let count1 = this.times0 * this.showRowNum * 3;
+      let table1 = this.data.slice(count1, count1 + this.showRowNum);
+      let count2 = this.times1 * this.showRowNum * 3;
+      let table2 = this.data.slice(
+        count2 + this.showRowNum,
+        count2 + this.showRowNum * 2
+      );
+      let count3 = this.times2 * this.showRowNum * 3;
+      let table3 = this.data.slice(
+        count3 + this.showRowNum * 2,
+        count3 + this.showRowNum * 3
+      );
+
+      switch (this.currentIndex) {
+        case 0:
+          this.showData = [table1, table2, table3];
+          break;
+        case 1:
+          this.showData = [table2, table3, table1];
+          break;
+        case 2:
+          this.showData = [table3, table1, table2];
+      }
+    }
+  }
+};
+</script>
+
+
+<style scoped>
+>>> .ivu-table td {
+  word-break: keep-all;
+  white-space: nowrap;
+}
+</style>
diff --git a/frontend/src/components/table/table-head.vue b/frontend/src/components/table/table-head.vue
new file mode 100644
index 00000000..e5877e0c
--- /dev/null
+++ b/frontend/src/components/table/table-head.vue
@@ -0,0 +1,265 @@
+<template>
+  <table cellspacing="0" cellpadding="0" border="0" :style="styles">
+    <colgroup>
+      <col v-for="(column, index) in columns" :width="setCellWidth(column)">
+      <col v-if="$parent.showVerticalScrollBar" :width="$parent.scrollBarWidth">
+    </colgroup>
+    <thead>
+      <tr v-for="(cols, rowIndex) in headRows">
+        <th
+          v-for="(column, index) in cols"
+          :colspan="column.colSpan"
+          :rowspan="column.rowSpan"
+          :class="alignCls(column)"
+        >
+          <div :class="cellClasses(column)">
+            <template v-if="column.type === 'expand'">
+              <span v-if="!column.renderHeader">{{ column.title || '' }}</span>
+              <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
+            </template>
+            <template v-else-if="column.type === 'selection'">
+              <Checkbox :value="isSelectAll" :disabled="!data.length" @on-change="selectAll"></Checkbox>
+            </template>
+            <template v-else>
+              <span
+                v-if="!column.renderHeader"
+                :class="{[prefixCls + '-cell-sort']: column.sortable}"
+                @click="handleSortByHead(getColumn(rowIndex, index)._index)"
+              >{{ column.title || '#' }}</span>
+              <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
+              <span :class="[prefixCls + '-sort']" v-if="column.sortable">
+                <i
+                  class="ivu-icon ivu-icon-md-arrow-dropup"
+                  :class="{on: getColumn(rowIndex, index)._sortType === 'asc'}"
+                  @click="handleSort(getColumn(rowIndex, index)._index, 'asc')"
+                ></i>
+                <i
+                  class="ivu-icon ivu-icon-md-arrow-dropdown"
+                  :class="{on: getColumn(rowIndex, index)._sortType === 'desc'}"
+                  @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"
+                ></i>
+              </span>
+              <Poptip
+                v-if="isPopperShow(column)"
+                v-model="getColumn(rowIndex, index)._filterVisible"
+                placement="bottom"
+                popper-class="ivu-table-popper"
+                transfer
+                @on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)"
+              >
+                <span :class="[prefixCls + '-filter']">
+                  <i
+                    class="ivu-icon ivu-icon-ios-funnel"
+                    :class="{on: getColumn(rowIndex, index)._isFiltered}"
+                  ></i>
+                </span>
+
+                <div
+                  slot="content"
+                  :class="[prefixCls + '-filter-list']"
+                  v-if="getColumn(rowIndex, index)._filterMultiple"
+                >
+                  <div :class="[prefixCls + '-filter-list-item']">
+                    <checkbox-group v-model="getColumn(rowIndex, index)._filterChecked">
+                      <checkbox
+                        v-for="(item, index) in column.filters"
+                        :key="index"
+                        :label="item.value"
+                      >{{ item.label }}</checkbox>
+                    </checkbox-group>
+                  </div>
+                  <div :class="[prefixCls + '-filter-footer']">
+                    <i-button
+                      type="text"
+                      size="small"
+                      :disabled="!getColumn(rowIndex, index)._filterChecked.length"
+                      @click.native="handleFilter(getColumn(rowIndex, index)._index)"
+                    >{{ t('i.table.confirmFilter') }}</i-button>
+                    <i-button
+                      type="text"
+                      size="small"
+                      @click.native="handleReset(getColumn(rowIndex, index)._index)"
+                    >{{ t('i.table.resetFilter') }}</i-button>
+                  </div>
+                </div>
+                <div slot="content" :class="[prefixCls + '-filter-list']" v-else>
+                  <ul :class="[prefixCls + '-filter-list-single']">
+                    <li
+                      :class="itemAllClasses(getColumn(rowIndex, index))"
+                      @click="handleReset(getColumn(rowIndex, index)._index)"
+                    >{{ t('i.table.clearFilter') }}</li>
+                    <li
+                      :class="itemClasses(getColumn(rowIndex, index), item)"
+                      v-for="item in column.filters"
+                      @click="handleSelect(getColumn(rowIndex, index)._index, item.value)"
+                    >{{ item.label }}</li>
+                  </ul>
+                </div>
+              </Poptip>
+            </template>
+          </div>
+        </th>
+
+        <th
+          v-if="$parent.showVerticalScrollBar && rowIndex===0"
+          :class="scrollBarCellClass()"
+          :rowspan="headRows.length"
+        ></th>
+      </tr>
+    </thead>
+  </table>
+</template>
+<script>
+import renderHeader from "./header";
+import Mixin from "./mixin";
+
+export default {
+  name: "TableHead",
+  mixins: [Mixin],
+  components: { renderHeader },
+  props: {
+    prefixCls: String,
+    styleObject: Object,
+    columns: Array,
+    objData: Object,
+    data: Array, // rebuildData
+    columnsWidth: Object,
+    fixed: {
+      type: [Boolean, String],
+      default: false
+    },
+    columnRows: Array,
+    fixedColumnRows: Array
+  },
+  computed: {
+    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; // #1751
+      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;
+    },
+    headRows() {
+      const isGroup = this.columnRows.length > 1;
+      if (isGroup) {
+        return this.fixed ? this.fixedColumnRows : this.columnRows;
+      } else {
+        return [this.columns];
+      }
+    }
+  },
+  methods: {
+    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"
+        }
+      ];
+    },
+    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}-filter-select-item-selected`]:
+            column._filterChecked[0] === item.value
+        }
+      ];
+    },
+    itemAllClasses(column) {
+      return [
+        `${this.prefixCls}-filter-select-item`,
+        {
+          [`${this.prefixCls}-filter-select-item-selected`]: !column
+            ._filterChecked.length
+        }
+      ];
+    },
+    selectAll() {
+      const status = !this.isSelectAll;
+      this.$parent.selectAll(status);
+    },
+    handleSort(index, type) {
+      const column = this.columns[index];
+      const _index = column._index;
+
+      if (column._sortType === type) {
+        type = "normal";
+      }
+      this.$parent.handleSort(_index, type);
+    },
+    handleSortByHead(index) {
+      const column = this.columns[index];
+      if (column.sortable) {
+        const type = column._sortType;
+        if (type === "normal") {
+          this.handleSort(index, "asc");
+        } else if (type === "asc") {
+          this.handleSort(index, "desc");
+        } else {
+          this.handleSort(index, "normal");
+        }
+      }
+    },
+    handleFilter(index) {
+      this.$parent.handleFilter(index);
+    },
+    handleSelect(index, value) {
+      this.$parent.handleFilterSelect(index, value);
+    },
+    handleReset(index) {
+      this.$parent.handleFilterReset(index);
+    },
+    handleFilterHide(index) {
+      this.$parent.handleFilterHide(index);
+    },
+    // 因为表头嵌套不是深拷贝，所以没有 _ 开头的方法，在 isGroup 下用此列
+    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 {
+        return this.headRows[rowIndex][index];
+      }
+    }
+  }
+};
+</script>
diff --git a/frontend/src/components/table/table-tr.vue b/frontend/src/components/table/table-tr.vue
new file mode 100644
index 00000000..8d07bfec
--- /dev/null
+++ b/frontend/src/components/table/table-tr.vue
@@ -0,0 +1,35 @@
+<template>
+  <tr :class="rowClasses(row._index)">
+    <slot></slot>
+  </tr>
+</template>
+<script>
+export default {
+  props: {
+    row: Object,
+    prefixCls: String
+  },
+  computed: {
+    objData() {
+      return this.$parent.objData;
+    }
+  },
+  methods: {
+    rowClasses(_index) {
+      return [
+        `${this.prefixCls}-row`,
+        this.rowClsName(_index),
+        {
+          [`${this.prefixCls}-row-highlight`]:
+            this.objData[_index] && this.objData[_index]._isHighlight,
+          [`${this.prefixCls}-row-hover`]:
+            this.objData[_index] && this.objData[_index]._isHover
+        }
+      ];
+    },
+    rowClsName(_index) {
+      return this.$parent.$parent.rowClassName(this.objData[_index], _index);
+    }
+  }
+};
+</script>
diff --git a/frontend/src/components/table/table.vue b/frontend/src/components/table/table.vue
new file mode 100644
index 00000000..f4d0394b
--- /dev/null
+++ b/frontend/src/components/table/table.vue
@@ -0,0 +1,1081 @@
+<template>
+  <div :class="wrapClasses" :style="styles">
+    <div :class="classes">
+      <div :class="[prefixCls + '-title']" v-if="showSlotHeader" ref="title">
+        <slot name="header"></slot>
+      </div>
+      <div
+        :class="[prefixCls + '-header']"
+        v-if="showHeader"
+        ref="header"
+        @mousewheel="handleMouseWheel"
+      >
+        <table-head
+          :prefix-cls="prefixCls"
+          :styleObject="tableHeaderStyle"
+          :columns="cloneColumns"
+          :column-rows="columnRows"
+          :obj-data="objData"
+          :columns-width="columnsWidth"
+          :data="rebuildData"
+        ></table-head>
+      </div>
+      <div
+        :class="[prefixCls + '-body']"
+        :style="bodyStyle"
+        ref="body"
+        @scroll="handleBodyScroll"
+        v-show="!((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))"
+      >
+        <table-body
+          ref="tbody"
+          :prefix-cls="prefixCls"
+          :styleObject="tableStyle"
+          :columns="cloneColumns"
+          :data="rebuildData"
+          :columns-width="columnsWidth"
+          :obj-data="objData"
+        ></table-body>
+      </div>
+      <div
+        :class="[prefixCls + '-tip']"
+        :style="bodyStyle"
+        @scroll="handleBodyScroll"
+        v-show="((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))"
+      >
+        <table cellspacing="0" cellpadding="0" border="0">
+          <tbody>
+            <tr>
+              <td :style="{'height':bodyStyle.height,'width':`${this.headerWidth}px`}">
+                <span v-html="localeNoDataText" v-if="!data || data.length === 0"></span>
+                <span v-html="localeNoFilteredDataText" v-else></span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle" v-if="isLeftFixed">
+        <div :class="fixedHeaderClasses" v-if="showHeader">
+          <table-head
+            fixed="left"
+            :prefix-cls="prefixCls"
+            :styleObject="fixedTableStyle"
+            :columns="leftFixedColumns"
+            :column-rows="columnRows"
+            :fixed-column-rows="leftFixedColumnRows"
+            :obj-data="objData"
+            :columns-width="columnsWidth"
+            :data="rebuildData"
+          ></table-head>
+        </div>
+        <div
+          :class="[prefixCls + '-fixed-body']"
+          :style="fixedBodyStyle"
+          ref="fixedBody"
+          @mousewheel="handleFixedMousewheel"
+          @DOMMouseScroll="handleFixedMousewheel"
+        >
+          <table-body
+            fixed="left"
+            :prefix-cls="prefixCls"
+            :styleObject="fixedTableStyle"
+            :columns="leftFixedColumns"
+            :data="rebuildData"
+            :columns-width="columnsWidth"
+            :obj-data="objData"
+            :scrollTop="scrollTop"
+          ></table-body>
+        </div>
+      </div>
+      <div :class="[prefixCls + '-fixed-right']" :style="fixedRightTableStyle" v-if="isRightFixed">
+        <div :class="fixedHeaderClasses" v-if="showHeader">
+          <table-head
+            fixed="right"
+            :prefix-cls="prefixCls"
+            :styleObject="fixedRightTableStyle"
+            :columns="rightFixedColumns"
+            :column-rows="columnRows"
+            :fixed-column-rows="rightFixedColumnRows"
+            :obj-data="objData"
+            :columns-width="columnsWidth"
+            :data="rebuildData"
+          ></table-head>
+        </div>
+        <div
+          :class="[prefixCls + '-fixed-body']"
+          :style="fixedBodyStyle"
+          ref="fixedRightBody"
+          @mousewheel="handleFixedMousewheel"
+          @DOMMouseScroll="handleFixedMousewheel"
+        >
+          <table-body
+            fixed="right"
+            :prefix-cls="prefixCls"
+            :styleObject="fixedRightTableStyle"
+            :columns="rightFixedColumns"
+            :data="rebuildData"
+            :columns-width="columnsWidth"
+            :obj-data="objData"
+          ></table-body>
+        </div>
+      </div>
+      <div
+        :class="[prefixCls + '-fixed-right-header']"
+        :style="fixedRightHeaderStyle"
+        v-if="isRightFixed"
+      ></div>
+      <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" ref="footer">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+    <Spin fix size="large" v-if="loading">
+      <slot name="loading"></slot>
+    </Spin>
+  </div>
+</template>
+<script>
+import tableHead from "./table-head.vue";
+import tableBody from "./table-body.vue";
+import { oneOf, getStyle, deepCopy, getScrollBarSize } from "./assist";
+import { on, off } from "./dom";
+import Csv from "./csv";
+import ExportCsv from "./export-csv";
+import elementResizeDetectorMaker from "element-resize-detector";
+import {
+  getAllColumns,
+  convertToRows,
+  convertColumnOrder,
+  getRandomStr
+} from "./util";
+
+const prefixCls = "ivu-table";
+
+let rowKey = 1;
+let columnKey = 1;
+
+export default {
+  name: "Table",
+  components: { tableHead, tableBody },
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    size: {
+      validator(value) {
+        return oneOf(value, ["small", "large", "default"]);
+      },
+      default() {
+        return !this.$IVIEW || this.$IVIEW.size === ""
+          ? "default"
+          : this.$IVIEW.size;
+      }
+    },
+    width: {
+      type: [Number, String]
+    },
+    height: {
+      type: [Number, String]
+    },
+    stripe: {
+      type: Boolean,
+      default: false
+    },
+    border: {
+      type: Boolean,
+      default: false
+    },
+    showHeader: {
+      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
+    }
+  },
+  data() {
+    const colsWithId = this.makeColumnsId(this.columns);
+    return {
+      ready: false,
+      tableWidth: 0,
+      columnsWidth: {},
+      prefixCls: prefixCls,
+      compiledUids: [],
+      objData: this.makeObjData(), // checkbox or highlight-row
+      rebuildData: [], // for sort or filter
+      cloneColumns: this.makeColumns(colsWithId),
+      columnRows: this.makeColumnRows(false, colsWithId),
+      leftFixedColumnRows: this.makeColumnRows("left", colsWithId),
+      rightFixedColumnRows: this.makeColumnRows("right", colsWithId),
+      allColumns: getAllColumns(colsWithId), // for multiple table-head, get columns that have no children
+      showSlotHeader: true,
+      showSlotFooter: true,
+      bodyHeight: 0,
+      scrollBarWidth: getScrollBarSize(),
+      currentContext: this.context,
+      cloneData: deepCopy(this.data), // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
+      showVerticalScrollBar: false,
+      showHorizontalScrollBar: false,
+      headerWidth: 0,
+      headerHeight: 0,
+      scrollTop: 0
+    };
+  },
+  computed: {
+    localeNoDataText() {
+      if (this.noDataText === undefined) {
+        return "暂无数据";
+      } else {
+        return this.noDataText;
+      }
+    },
+    localeNoFilteredDataText() {
+      if (this.noFilteredDataText === undefined) {
+        return "暂无数据";
+      } else {
+        return this.noFilteredDataText;
+      }
+    },
+    wrapClasses() {
+      return [
+        `${prefixCls}-wrapper`,
+        {
+          [`${prefixCls}-hide`]: !this.ready,
+          [`${prefixCls}-with-header`]: this.showSlotHeader,
+          [`${prefixCls}-with-footer`]: this.showSlotFooter
+        }
+      ];
+    },
+    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 = {};
+      if (this.height) {
+        const height = parseInt(this.height);
+        style.height = `${height}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);
+        }
+        //                    const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
+        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;
+        style.height = `${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;
+    },
+    leftFixedColumns() {
+      return convertColumnOrder(this.cloneColumns, "left");
+    },
+    rightFixedColumns() {
+      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: {
+    rowClsName(index) {
+      return this.rowClassName(this.data[index], index);
+    },
+    handleResize() {
+      //let tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
+      let tableWidth = this.$el.offsetWidth - 1;
+      let columnsWidth = {};
+      let sumMinWidth = 0;
+      let hasWidthColumns = [];
+      let noWidthColumns = [];
+      let maxWidthColumns = [];
+      let noMaxWidthColumns = [];
+      this.cloneColumns.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.cloneColumns.length; i++) {
+        const column = this.cloneColumns[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.cloneColumns.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;
+    },
+    // 通用处理 highlightCurrentRow 和 clearCurrentRow
+    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.cloneData[oldIndex]));
+      const newData =
+        type === "highlight"
+          ? JSON.parse(JSON.stringify(this.cloneData[_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(JSON.stringify(this.cloneData[_index])),
+        _index
+      );
+    },
+    dblclickCurrentRow(_index) {
+      this.highlightCurrentRow(_index);
+      this.$emit(
+        "on-row-dblclick",
+        JSON.parse(JSON.stringify(this.cloneData[_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.cloneData[_index])),
+        status
+      );
+
+      if (this.height) {
+        this.$nextTick(() => this.fixedBody());
+      }
+    },
+    selectAll(status) {
+      // this.rebuildData.forEach((data) => {
+      //     if(this.objData[data._index]._isDisabled){
+      //         this.objData[data._index]._isChecked = false;
+      //     }else{
+      //         this.objData[data._index]._isChecked = 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.$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;
+          this.bodyHeight =
+            this.height - 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;
+      this.hideColumnFilter();
+
+      this.scrollTop = event.target.scrollTop;
+    },
+    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;
+          }
+        }
+      });
+      return data;
+    },
+    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();
+        } else {
+          this.rebuildData = this.sortData(this.rebuildData, type, index);
+        }
+      }
+      this.cloneColumns[index]._sortType = type;
+
+      this.$emit("on-sort-change", {
+        column: JSON.parse(
+          JSON.stringify(this.allColumns[this.cloneColumns[index]._index])
+        ),
+        key: key,
+        order: type
+      });
+    },
+    handleFilterHide(index) {
+      // clear checked that not filter now
+      if (!this.cloneColumns[index]._isFiltered)
+        this.cloneColumns[index]._filterChecked = [];
+    },
+    filterData(data, column) {
+      return data.filter(row => {
+        //如果定义了远程过滤方法则忽略此方法
+        if (typeof column.filterRemote === "function") return true;
+
+        let status = !column._filterChecked.length;
+        for (let i = 0; i < column._filterChecked.length; i++) {
+          status = column.filterMethod(column._filterChecked[i], row);
+          if (status) break;
+        }
+        return status;
+      });
+    },
+    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();
+
+      // filter others first, after filter this column
+      filterData = this.filterOtherData(filterData, index);
+      this.rebuildData = this.filterData(filterData, column);
+
+      this.cloneColumns[index]._isFiltered = true;
+      this.cloneColumns[index]._filterVisible = false;
+      this.$emit("on-filter-change", column);
+    },
+    /**
+     * #2832
+     * 应该区分当前表头的 column 是左固定还是右固定
+     * 否则执行到 $parent 时，方法的 index 与 cloneColumns 的 index 是不对应的
+     * 左固定和右固定，要区分对待
+     * 所以，此方法用来获取正确的 index
+     * */
+    GetOriginalIndex(_index) {
+      return this.cloneColumns.findIndex(item => item._index === _index);
+    },
+    handleFilterSelect(_index, value) {
+      const index = this.GetOriginalIndex(_index);
+      this.cloneColumns[index]._filterChecked = [value];
+      this.handleFilter(index);
+    },
+    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();
+      filterData = this.filterOtherData(filterData, index);
+      this.rebuildData = filterData;
+      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 data;
+    },
+    makeDataWithSort() {
+      let data = this.makeData();
+      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;
+    },
+    makeDataWithFilter() {
+      let data = this.makeData();
+      this.cloneColumns.forEach(col => (data = this.filterData(data, col)));
+      return data;
+    },
+    makeDataWithSortAndFilter() {
+      let data = this.makeDataWithSort();
+      this.cloneColumns.forEach(col => (data = this.filterData(data, col)));
+      return data;
+    },
+    makeObjData() {
+      let data = {};
+      this.data.forEach((row, index) => {
+        const newRow = deepCopy(row); // todo 直接替换
+        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;
+    },
+    // 修改列，设置一个隐藏的 id，便于后面的多级表头寻找对应的列，否则找不到
+    makeColumnsId(columns) {
+      return columns.map(item => {
+        if ("children" in item)
+          item.children = this.makeColumnsId(item.children);
+        item.__id = getRandomStr(6);
+        return item;
+      });
+    },
+    makeColumns(cols) {
+      // 在 data 时，this.allColumns 暂时为 undefined
+      let columns = deepCopy(getAllColumns(cols));
+      let left = [];
+      let right = [];
+      let center = [];
+
+      columns.forEach((column, index) => {
+        column._index = index;
+        column._columnKey = columnKey++;
+        column._width = column.width ? column.width : ""; // update in handleResize()
+        column._sortType = "normal";
+        column._filterVisible = false;
+        column._isFiltered = false;
+        column._filterChecked = [];
+
+        if ("filterMultiple" in column) {
+          column._filterMultiple = column.filterMultiple;
+        } else {
+          column._filterMultiple = true;
+        }
+        if ("filteredValue" in column) {
+          column._filterChecked = column.filteredValue;
+          column._isFiltered = true;
+        }
+
+        if ("sortType" in column) {
+          column._sortType = column.sortType;
+        }
+
+        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);
+    },
+    // create a multiple table-head
+    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);
+    }
+  },
+  created() {
+    if (!this.context) this.currentContext = this.$parent;
+    this.showSlotHeader = this.$slots.header !== undefined;
+    this.showSlotFooter = this.$slots.footer !== undefined;
+    this.rebuildData = this.makeDataWithSortAndFilter();
+  },
+  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.handleResize();
+      }
+    });
+  },
+  beforeDestroy() {
+    off(window, "resize", this.handleResize);
+    this.observer.removeListener(this.$el, this.handleResize);
+  },
+  watch: {
+    data: {
+      handler() {
+        const oldDataLen = this.rebuildData.length;
+        this.objData = this.makeObjData();
+        this.rebuildData = this.makeDataWithSortAndFilter();
+        this.handleResize();
+        if (!oldDataLen) {
+          this.fixedHeader();
+        }
+        // here will trigger before clickCurrentRow, so use async
+        setTimeout(() => {
+          this.cloneData = deepCopy(this.data);
+        }, 0);
+      },
+      deep: true
+    },
+    columns: {
+      handler() {
+        // todo 这里有性能问题，可能是左右固定计算属性影响的
+        const colsWithId = this.makeColumnsId(this.columns);
+        this.allColumns = getAllColumns(colsWithId);
+        this.cloneColumns = this.makeColumns(colsWithId);
+
+        this.columnRows = this.makeColumnRows(false, colsWithId);
+        this.leftFixedColumnRows = this.makeColumnRows("left", colsWithId);
+        this.rightFixedColumnRows = this.makeColumnRows("right", colsWithId);
+        this.rebuildData = this.makeDataWithSortAndFilter();
+        this.handleResize();
+      },
+      deep: true
+    },
+    height() {
+      this.handleResize();
+    },
+    showHorizontalScrollBar() {
+      this.handleResize();
+    },
+    showVerticalScrollBar() {
+      this.handleResize();
+    }
+  }
+};
+</script>
diff --git a/frontend/src/components/table/util.js b/frontend/src/components/table/util.js
new file mode 100644
index 00000000..c45d51a7
--- /dev/null
+++ b/frontend/src/components/table/util.js
@@ -0,0 +1,93 @@
+import { deepCopy } from './assist';
+
+const convertColumnOrder = (columns, fixedType) => {
+  let list = [];
+  let other = [];
+  columns.forEach((col) => {
+    if (col.fixed && col.fixed === fixedType) {
+      list.push(col);
+    } else {
+      other.push(col);
+    }
+  });
+  return list.concat(other);
+};
+
+export { convertColumnOrder };
+
+// set forTableHead to true when convertToRows, false in normal cases like table.vue
+const getAllColumns = (cols, forTableHead = false) => {
+  const columns = deepCopy(cols);
+  const result = [];
+  columns.forEach((column) => {
+    if (column.children) {
+      if (forTableHead) result.push(column);
+      result.push.apply(result, getAllColumns(column.children, forTableHead));
+    } else {
+      result.push(column);
+    }
+  });
+  return result;
+};
+
+export { getAllColumns };
+
+const convertToRows = (columns, fixedType = false) => {
+  const originColumns = fixedType ? fixedType === 'left' ? deepCopy(convertColumnOrder(columns, 'left')) : deepCopy(convertColumnOrder(columns, 'right')) : deepCopy(columns);
+  let maxLevel = 1;
+  const traverse = (column, parent) => {
+    if (parent) {
+      column.level = parent.level + 1;
+      if (maxLevel < column.level) {
+        maxLevel = column.level;
+      }
+    }
+    if (column.children) {
+      let colSpan = 0;
+      column.children.forEach((subColumn) => {
+        traverse(subColumn, column);
+        colSpan += subColumn.colSpan;
+      });
+      column.colSpan = colSpan;
+    } else {
+      column.colSpan = 1;
+    }
+  };
+
+  originColumns.forEach((column) => {
+    column.level = 1;
+    traverse(column);
+  });
+
+  const rows = [];
+  for (let i = 0; i < maxLevel; i++) {
+    rows.push([]);
+  }
+
+  const allColumns = getAllColumns(originColumns, true);
+
+  allColumns.forEach((column) => {
+    if (!column.children) {
+      column.rowSpan = maxLevel - column.level + 1;
+    } else {
+      column.rowSpan = 1;
+    }
+    rows[column.level - 1].push(column);
+  });
+
+  return rows;
+};
+
+export { convertToRows };
+
+const getRandomStr = function(len = 32) {
+  const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
+  const maxPos = $chars.length;
+  let str = '';
+  for (let i = 0; i < len; i++) {
+    str += $chars.charAt(Math.floor(Math.random() * maxPos));
+  }
+  return str;
+};
+
+export { getRandomStr };
diff --git a/frontend/src/components/vue-bigdata-table/components/button.vue b/frontend/src/components/vue-bigdata-table/components/button.vue
new file mode 100644
index 00000000..a4a473c3
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/components/button.vue
@@ -0,0 +1,81 @@
+<template>
+  <button class="vue-bigdata-table-button" @click="handleClick">
+    <span v-if="type === 'confirm'" class="icon confirm-icon">
+      <i class="line confirm-icon-line1 line1"></i>
+      <i class="line confirm-icon-line2 line2"></i>
+    </span>
+    <span v-else class="icon cancel-icon">
+      <i class="line cancel-icon-line1 line1"></i>
+      <i class="line cancel-icon-line2 line2"></i>
+    </span>
+  </button>
+</template>
+<script>
+export default {
+  name: "Button",
+  props: {
+    type: String
+  },
+  methods: {
+    handleClick(e) {
+      this.$emit("click", e);
+    }
+  }
+};
+</script>
+<style lang="less">
+.vue-bigdata-table-button {
+  padding: 2px 7px;
+  width: 20px;
+  background: transparent;
+  border: none;
+  vertical-align: middle;
+  outline: none;
+  transform: translateY(3px);
+  cursor: pointer;
+  &:hover {
+    .line {
+      background: #2d8cf0;
+      transition: background 0.2s ease;
+    }
+  }
+  .icon {
+    position: relative;
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    i {
+      display: inline-block;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      background: #000000;
+      border-radius: 1px;
+      height: 2px;
+    }
+  }
+  .line {
+    transition: background 0.2s ease;
+  }
+  .confirm-icon {
+    &-line1 {
+      width: 7px;
+      transform: rotateZ(45deg) translate(3px, 0px);
+    }
+    &-line2 {
+      width: 10px;
+      transform: rotateZ(-45deg) translate(5px, 4px);
+    }
+  }
+  .cancel-icon {
+    &-line1 {
+      width: 12px;
+      transform: rotateZ(45deg);
+    }
+    &-line2 {
+      width: 12px;
+      transform: rotateZ(-45deg);
+    }
+  }
+}
+</style>
diff --git a/frontend/src/components/vue-bigdata-table/components/input-render.js b/frontend/src/components/vue-bigdata-table/components/input-render.js
new file mode 100644
index 00000000..6f0f28cc
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/components/input-render.js
@@ -0,0 +1,59 @@
+import Input from './input.vue';
+import Button from './button.vue';
+export default (h, { row, col, value, beforeSave, initRowIndex }, table) => {
+  return h('div', {
+    'class': 'edit-item-con'
+  }, [
+    h(Input, {
+      'class': 'edit-item-input',
+      props: {
+        value: value
+      },
+      on: {
+        input(res) {
+          table.editContent = res;
+        }
+      }
+    }),
+    h('div', {
+      'class': 'edit-item-btn-con'
+    }, [
+      h(Button, {
+        'class': 'edit-btn',
+        props: {
+          type: 'confirm'
+        },
+        on: {
+          click() {
+            if (beforeSave({ row, col, value, initRowIndex })) {
+              table.$emit('on-success-save', {
+                row: row,
+                col: col,
+                value: table.editContent,
+                initRowIndex: initRowIndex
+              });
+            } else {
+              table.$emit('on-fail-save', {
+                row: row,
+                col: col,
+                value: table.editContent,
+                initRowIndex: initRowIndex
+              });
+            }
+          }
+        }
+      }),
+      h(Button, {
+        'class': 'edit-btn',
+        props: {
+          type: 'cancel'
+        },
+        on: {
+          click() {
+            table.$emit('on-cancel-edit');
+          }
+        }
+      })
+    ])
+  ]);
+};
diff --git a/frontend/src/components/vue-bigdata-table/components/input.vue b/frontend/src/components/vue-bigdata-table/components/input.vue
new file mode 100644
index 00000000..7b68ab32
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/components/input.vue
@@ -0,0 +1,46 @@
+<template>
+  <input class="vue-bigdata-table-input" :value="value" @input="handleInput">
+</template>
+<script>
+export default {
+  name: "Input",
+  props: {
+    value: [String, Number]
+  },
+  methods: {
+    handleInput(e) {
+      this.$emit("input", e.target.value);
+    }
+  },
+  mounted() {
+    this.$emit("input", this.value);
+  }
+};
+</script>
+<style lang="less">
+.vue-bigdata-table-input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 32px;
+  line-height: 1.5;
+  padding: 4px 7px;
+  font-size: 12px;
+  border: 1px solid #dddee1;
+  border-radius: 4px;
+  color: #495060;
+  background-color: #fff;
+  background-image: none;
+  position: relative;
+  cursor: text;
+  outline: none;
+  transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
+  &:hover {
+    border-color: #57a3f3;
+  }
+  &:focus {
+    border-color: #57a3f3;
+    box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
+  }
+}
+</style>
diff --git a/frontend/src/components/vue-bigdata-table/components/item-table.vue b/frontend/src/components/vue-bigdata-table/components/item-table.vue
new file mode 100755
index 00000000..ce8911c9
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/components/item-table.vue
@@ -0,0 +1,279 @@
+<template>
+  <div class="vue-bigdata-table-item-table">
+    <table
+      v-show="showTable && fixedCol >= 0"
+      @paste="handlePaste"
+      :class="['vue-bigdata-table-data-table', 'vue-bigdata-table-fixed-table', showFixedBoxShadow ? 'box-shadow' : '']"
+      cellspacing="0"
+      cellpadding="0"
+      border="0"
+    >
+      <colgroup>
+        <col
+          v-if="i <= fixedCol"
+          :width="width"
+          v-for="(width, i) in widthArr"
+          :key="'colgroup-fixed-' + i"
+        >
+      </colgroup>
+      <tbody>
+        <tr
+          v-for="(tr, index) in itemData"
+          :key="index"
+          :style="{background: currentMouseEnterIndex === index && canSelectText ? '#ebf7ff' : ''}"
+          :class="[stripe && (indexBase + index) % 2 !== 0 ? 'stripe-gray' : '', tr.className, currentScrollToRowIndex === indexBase + index ? 'scroll-to-row-tip' : '', indexBase + index === highlightRowIndex ? 'highlight-row' : '']"
+          @click="handleClickTr(indexBase + index, tr.initRowIndex)"
+          @mouseenter.stop="handleMouseIn(index)"
+          @mouseleave.stop="handleMouseLeave"
+        >
+          <td
+            v-if="showIndex"
+            :class="['vue-bigdata-table-cell', 'vue-bigdata-table-data-table-center']"
+          >
+            <render-dom
+              :render="indexRender"
+              :back-value="{index: (indexBase + index), params: indexRenderParams}"
+            ></render-dom>
+          </td>
+          <td
+            v-if="i <= fixedColCom"
+            :data-row="indexBase + index"
+            :data-col="i"
+            @click="handleClickTd(indexBase + index, i, tr.initRowIndex)"
+            @dblclick="handleDblclickTd(indexBase + index, i, (typeof td === 'object' && td !== null) ? td.value : td)"
+            v-for="(td, i) in tr"
+            :class="['vue-bigdata-table-cell',
+								setAlign(i),
+								(typeof td === 'object' && td !== null) ? td.className : '',
+								getSelectCellClasses(indexBase + index, i)
+							]"
+            :style="rowStyles"
+            :key="i"
+          >
+            <template v-if="!canEdit || (canEdit && `${indexBase + index}-${i}` !== edittingTd)">
+              <div
+                v-if="!showCellRender[showIndex ? (i + 1) : i]"
+                class="vue-bigdata-table-cell"
+              >{{ (typeof td === 'object' && td !== null) ? td.value : td }}</div>
+              <template v-else>
+                <render-dom
+                  :render="showCellRender[showIndex ? (i + 1) : i]"
+                  :back-value="{row: indexBase + index, col: i, value: (typeof td === 'object' && td !== null) ? td.value : td}"
+                ></render-dom>
+              </template>
+            </template>
+            <render-dom
+              v-else
+              :render="editCellRender"
+              :back-value="{row: indexBase + index, col: i, value: (typeof td === 'object' && td !== null) ? td.value : td, beforeSave}"
+            ></render-dom>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table
+      v-show="showTable"
+      @paste="handlePaste"
+      ref="itemTable"
+      class="vue-bigdata-table-data-table vue-bigdata-table-content-table"
+      :style="{position: fixedCol < 0 ? '' : 'absolute'}"
+      cellspacing="0"
+      cellpadding="0"
+      border="0"
+      width="100%"
+    >
+      <colgroup>
+        <col :width="width" v-for="(width, i) in widthArr" :key="'colgroup-' + i">
+      </colgroup>
+      <tbody>
+        <tr
+          v-for="(tr, index) in itemData"
+          :key="index"
+          @click="handleClickTr(indexBase + index, tr.initRowIndex)"
+          @mouseenter.stop="handleMouseIn(index)"
+          @mouseleave.stop="handleMouseLeave"
+          :style="{background: currentMouseEnterIndex === index && canSelectText ? '#ebf7ff' : ''}"
+          :class="[stripe && (indexBase + index) % 2 !== 0 ? 'stripe-gray' : '', tr.className, currentScrollToRowIndex === indexBase + index ? 'scroll-to-row-tip' : '', indexBase + index === highlightRowIndex ? 'highlight-row' : '']"
+        >
+          <td
+            v-if="showIndex"
+            :class="['vue-bigdata-table-cell', 'vue-bigdata-table-data-table-center']"
+          >
+            <render-dom v-if="fixedCol < 0" :render="indexRender" :back-value="(indexBase + index)"></render-dom>
+          </td>
+          <td
+            v-for="(td, i) in tr"
+            :data-row="indexBase + index"
+            :data-col="i"
+            @click="handleClickTd(indexBase + index, i, tr.initRowIndex)"
+            @dblclick="handleDblclickTd(indexBase + index, i, (typeof td === 'object' && td !== null) ? td.value : td)"
+            :class="['vue-bigdata-table-cell',
+								setAlign(i),
+								(typeof td === 'object' && td !== null) ? td.className : '',
+								getSelectCellClasses(indexBase + index, i)
+							]"
+            :style="rowStyles"
+            :key="i"
+          >
+            <template v-if="!canEdit || (canEdit && `${indexBase + index}-${i}` !== edittingTd)">
+              <div
+                v-if="(!showCellRender[showIndex ? (i + 1) : i]) && (i >= fixedCol)"
+                class="vue-bigdata-table-cell"
+              >{{ (typeof td === 'object' && td !== null) ? td.value : td }}</div>
+              <template v-else-if="i >= fixedCol">
+                <render-dom
+                  :render="showCellRender[showIndex ? (i + 1) : i]"
+                  :back-value="{row: indexBase + index, col: i, value: (typeof td === 'object' && td !== null) ? td.value : td}"
+                ></render-dom>
+              </template>
+            </template>
+            <render-dom
+              v-else
+              :render="editCellRender"
+              :back-value="{row: indexBase + index, col: i, value: (typeof td === 'object' && td !== null) ? td.value : td, beforeSave, initRowIndex: tr.initRowIndex}"
+            ></render-dom>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+import renderDom from "./renderDom";
+export default {
+  name: "ItemTable",
+  components: {
+    renderDom
+  },
+  data() {
+    return {
+      prefix: "vue-bigdata-table-data-table",
+      tableWidth: 0,
+      currentMouseEnterIndex: -1,
+      editInputValue: ""
+    };
+  },
+  props: {
+    times: Number,
+    tableIndex: Number,
+    itemData: Array,
+    rowStyles: Object,
+    widthArr: Array,
+    columns: Array,
+    itemNum: Number,
+    showIndex: Boolean,
+    indexRender: Function,
+    stripe: Boolean,
+    fixedCol: Number,
+    currentScrollToRowIndex: Number,
+    canEdit: Boolean,
+    edittingTd: String,
+    startEditType: String,
+    showFixedBoxShadow: Boolean,
+    editCellRender: Function,
+    beforeSave: Function,
+    canSelectText: Boolean,
+    startSelect: Object,
+    endSelect: Object,
+    disabledHover: Boolean,
+    highlightRow: Boolean,
+    highlightRowIndex: Number,
+    indexRenderParams: Object
+  },
+  computed: {
+    showTable() {
+      return this.itemData.length > 0;
+    },
+    indexBase() {
+      return (
+        this.times * this.itemNum * 3 + this.itemNum * (this.tableIndex - 1)
+      );
+    },
+    showCellRender() {
+      return this.columns.map(item => {
+        return item.cellRender ? item.cellRender : undefined;
+      });
+    },
+    baseIndex() {
+      return this.showIndex ? 1 : 0;
+    },
+    fixedColCom() {
+      return this.showIndex ? this.fixedCol - 1 : this.fixedCol;
+    }
+  },
+  methods: {
+    setAlign(i) {
+      let columns = this.columns[i + this.baseIndex];
+      if (!columns) return;
+      let col = columns;
+      return this.prefix + "-" + col.align;
+    },
+    backValue(row, col) {
+      return {
+        row: row,
+        col: col
+      };
+    },
+    handleMouseIn(index) {
+      if (!this.disabledHover) return;
+      this.currentMouseEnterIndex = index;
+    },
+    handleMouseLeave() {
+      this.currentMouseEnterIndex = -1;
+    },
+    handleClickTr(row, initRowIndex) {
+      this.$emit("on-click-tr", row, initRowIndex);
+    },
+    handleClickTd(row, col, initRowIndex) {
+      this.$emit("on-click-td", {
+        row,
+        col,
+        edittingTd: this.edittingTd,
+        initRowIndex
+      });
+    },
+    editCell(row, col) {
+      this.$emit("on-edit-cell", row, col);
+    },
+    handleDblclickTd(row, col, value) {
+      this.editInputValue = value;
+      if (this.canEdit && this.startEditType === "dblclick")
+        this.editCell(row, col);
+    },
+    getSelectCellClasses(row, col) {
+      let startSelect = this.startSelect;
+      let endSelect = this.endSelect;
+      let startRow = parseInt(startSelect["row"]);
+      let endRow = parseInt(endSelect["row"]);
+      let startCol = parseInt(startSelect["col"]);
+      return [
+        startRow === row && startCol === col ? "start-select-cell" : "",
+        endRow === row && endSelect["col"] === col ? "end-select-cell" : "",
+        startRow === row && endSelect["col"] === col
+          ? "right-top-select-cell"
+          : "",
+        endRow === row && startCol === col ? "left-bottom-select-cell" : "",
+        startRow === row && col > startCol && col < endSelect["col"]
+          ? "top-center-select-cell"
+          : "",
+        endRow === row && col > startCol && col < endSelect["col"]
+          ? "bottom-center-select-cell"
+          : "",
+        startCol === col && row > startRow && row < endRow
+          ? "left-center-select-cell"
+          : "",
+        endSelect["col"] === col && row > startRow && row < endRow
+          ? "right-center-select-cell"
+          : ""
+      ];
+    },
+    handlePaste(e) {
+      const data = e.clipboardData.getData("text/plain");
+      const rowsData = data.split(/[\n\u0085\u2028\u2029]|\r\n?/g).map(row => {
+        return row.split("\t");
+      });
+      this.$emit("on-paste", rowsData);
+    }
+  }
+};
+</script>
diff --git a/frontend/src/components/vue-bigdata-table/components/renderDom.js b/frontend/src/components/vue-bigdata-table/components/renderDom.js
new file mode 100644
index 00000000..75649b7a
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/components/renderDom.js
@@ -0,0 +1,11 @@
+export default {
+  name: 'RenderCell',
+  functional: true,
+  props: {
+    render: Function,
+    backValue: [Number, Object]
+  },
+  render: (h, ctx) => {
+    return ctx.props.render(h, ctx.props.backValue, ctx.parent);
+  }
+};
diff --git a/frontend/src/components/vue-bigdata-table/components/sort-button.vue b/frontend/src/components/vue-bigdata-table/components/sort-button.vue
new file mode 100644
index 00000000..a4dc8fc5
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/components/sort-button.vue
@@ -0,0 +1,51 @@
+<template>
+  <span class="sort-button-wrapper" @click="handleSort">
+    <i
+      data-sort-btn="up"
+      :class="[currentActiveColSort && currentSortType === 'up' ? 'sort-button-item-up-active' : '']"
+      class="sort-button-item sort-button-item-up"
+    ></i>
+    <i
+      data-sort-btn="down"
+      :class="[currentActiveColSort && currentSortType === 'down' ? 'sort-button-item-down-active' : '']"
+      class="sort-button-item sort-button-item-down"
+    ></i>
+  </span>
+</template>
+<script>
+export default {
+  name: "sortButton",
+  data() {
+    return {
+      sortingType: ""
+    };
+  },
+  props: {
+    colIndex: Number,
+    currentSortColIndex: Number,
+    currentSortType: String
+  },
+  computed: {
+    currentActiveColSort() {
+      return this.colIndex === this.currentSortColIndex;
+    }
+  },
+  watch: {
+    currentSortType(type) {
+      if (this.currentSortColIndex === this.colIndex) this.sortingType = type;
+    }
+  },
+  methods: {
+    handleSort(e) {
+      const sortType = e.target.getAttribute("data-sort-btn");
+      if (this.sortingType === sortType) {
+        this.sortingType = "";
+        this.$emit("on-cancel-sort");
+      } else {
+        this.sortingType = sortType;
+        this.$emit("on-sort", this.colIndex, sortType);
+      }
+    }
+  }
+};
+</script>
diff --git a/frontend/src/components/vue-bigdata-table/index.js b/frontend/src/components/vue-bigdata-table/index.js
new file mode 100644
index 00000000..25dd4ff8
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/index.js
@@ -0,0 +1,2 @@
+import bigdataTable from './vue-bigdata-table.vue';
+export default bigdataTable;
diff --git a/frontend/src/components/vue-bigdata-table/mixins/data-handle.js b/frontend/src/components/vue-bigdata-table/mixins/data-handle.js
new file mode 100644
index 00000000..2efdde3d
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/mixins/data-handle.js
@@ -0,0 +1,217 @@
+import ItemTable from '../components/item-table.vue';
+import { iteratorByTimes, getHeaderWords } from '../util';
+export default {
+  data() {
+    return {
+      times0: 0, // 当前是第几轮
+      times1: 0,
+      times2: -1,
+      table1Data: [],
+      table2Data: [],
+      table3Data: [],
+      currentIndex: 0, // 当前展示的表格是第几个
+      itemNum: 0, // 一块数据显示的数据条数
+      timer: null,
+      scrollLeft: 0,
+      insideTableData: [],
+      initTableData: [] // 初始表格数据，用于恢复搜索和筛选,
+    };
+  },
+  computed: {
+    cellNum() { // 表格列数
+      return this.columnsHandled.length;
+    },
+    columnsHandled() {
+      let columns = [...this.columns];
+      if (this.colNum > this.columns.length) {
+        let colLength = this.colNum - this.columns.length;
+        let headerWordsArr = getHeaderWords(colLength);
+        iteratorByTimes(colLength, (i) => {
+          columns.push({
+            title: headerWordsArr[i]
+          });
+        });
+      }
+      if (this.showIndex) {
+        columns.unshift({
+          title: 'No',
+          align: 'center',
+          width: this.indexWidthInside
+        });
+      }
+      return columns;
+    }
+  },
+  methods: {
+    getComputedTableDataIndex(colIndex) {
+      return this.showIndex ? (colIndex - 1) : colIndex;
+    },
+    handleScroll(e) {
+      let ele = e.srcElement || e.target;
+      let { scrollTop, scrollLeft } = ele;
+      this.scrollLeft = scrollLeft;
+      // let direction = (scrollTop - this.scrollTop) > 0 ? 1 : ((scrollTop - this.scrollTop) < 0 ? -1 : 0); // 1 => down  -1 => up  0 => stop
+      this.currentIndex = parseInt((scrollTop % (this.moduleHeight * 3)) / this.moduleHeight);
+      this.scrollTop = scrollTop;
+      this.$nextTick(() => {
+        this.setTopPlace();
+      });
+    },
+    setTableData() {
+      let count1 = this.times0 * this.itemNum * 3;
+      this.table1Data = this.insideTableData.slice(count1, count1 + this.itemNum);
+      let count2 = this.times1 * this.itemNum * 3;
+      this.table2Data = this.insideTableData.slice(count2 + this.itemNum, count2 + this.itemNum * 2);
+      let count3 = this.times2 * this.itemNum * 3;
+      this.table3Data = this.insideTableData.slice(count3 + this.itemNum * 2, count3 + this.itemNum * 3);
+    },
+    getTables(h) {
+      let table1 = this.getItemTable(h, this.table1Data, 1);
+      let table2 = this.getItemTable(h, this.table2Data, 2);
+      let table3 = this.getItemTable(h, this.table3Data, 3);
+      if (this.currentIndex === 0) {
+        return [table1, table2, table3];
+      } else if (this.currentIndex === 1) {
+        return [table2, table3, table1];
+      } else {
+        return [table3, table1, table2];
+      }
+    },
+    renderTable(h) {
+      return h('div', {
+        style: this.tableWidthStyles
+      }, this.getTables(h));
+    },
+    getItemTable(h, data, index) {
+      return h(ItemTable, {
+        props: {
+          times: this['times' + (index - 1)],
+          tableIndex: index,
+          itemData: data,
+          itemNum: this.itemNum,
+          rowStyles: this.rowStyles,
+          widthArr: this.colWidthArr,
+          columns: this.columnsHandled,
+          showIndex: this.showIndex,
+          indexRender: this.indexRender,
+          stripe: this.stripe,
+          fixedCol: this.fixedCol,
+          currentScrollToRowIndex: this.currentScrollToRowIndex,
+          canEdit: this.canEdit,
+          edittingTd: this.edittingTd,
+          startEditType: this.startEditType,
+          showFixedBoxShadow: this.showFixedBoxShadow,
+          editCellRender: this.editCellRender,
+          beforeSave: this.beforeSave,
+          canSelectText: this.canSelectText,
+          startSelect: this.startSelect,
+          endSelect: this.endSelect,
+          disabledHover: this.disabledHover,
+          highlightRow: this.highlightRow,
+          highlightRowIndex: this.highlightRowIndex,
+          indexRenderParams: this.indexRenderParams
+        },
+        on: {
+          'on-click-tr': (index, initRowIndex) => {
+            if (this.highlightRow) this.highlightRowIndex = index;
+            this.$emit('on-click-tr', index, initRowIndex);
+          },
+          'on-click-td': (params) => {
+            this.$emit('on-click-td', params);
+          },
+          'on-edit-cell': (row, col) => {
+            // this.edittingTd = `${row}-${col}`;
+            this._editCell(row, col, false);
+          },
+          'on-success-save': ({ row, col, value, initRowIndex, oldValue }) => {
+            let data = [...this.value];
+            data[initRowIndex][col] = value;
+            this.$emit('input', data);
+            this.$emit('on-success-save', { row, col, value, initRowIndex, oldValue });
+            this.edittingTd = '';
+          },
+          'on-fail-save': ({ row, col, value, initRowIndex }) => {
+            this.$emit('on-fail-save', { row, col, value, initRowIndex });
+          },
+          'on-cancel-edit': () => {
+            this.edittingTd = '';
+          },
+          'on-paste': (data) => {
+            if (!this.paste) return;
+            let value = [...this.value];
+            let rowLength = data.length;
+            let startSelect = this.startSelect;
+            let endSelect = this.endSelect;
+            let startRow = startSelect.row;
+            let startCol = startSelect.col;
+            let endRow = endSelect.row;
+            let endCol = endSelect.col;
+            let selectRow = endRow - startRow + 1;
+            let selectCol = endCol - startCol + 1;
+            // let lastColLength = value[0].length - startCol;
+            // let lastRowLength = value.length - startRow;
+            if (rowLength === 0) return;
+            let colLength = data[0].length;
+            if (colLength === 0) return;
+            // 使用复制的数据替换原数据
+            for (let r = 0; r < rowLength && r < selectRow; r++) {
+              for (let c = 0; c < colLength && c < selectCol; c++) {
+                let valueRow = startRow + r;
+                let valueCol = startCol + c;
+                if (typeof value[valueRow][valueCol] === 'object') {
+                  value[valueRow][valueCol].value = data[r][c];
+                } else {
+                  value[valueRow][valueCol] = data[r][c];
+                }
+              }
+            }
+            // for (let r = startRow; r < selectRow; r++) {
+            // 	for (let c = startCol; c < selectCol; c++) {
+            // 		//
+            // 	}
+            // }
+            this.$emit('input', value);
+            this.$emit('on-paste', data);
+            this._tableResize();
+          }
+        },
+        key: 'table-item-key' + index,
+        ref: 'itemTable' + index,
+        attrs: {
+          'data-index': index
+        }
+      });
+    },
+    _scrollToIndexRow(index) {
+      index = parseInt(index);
+      if (isNaN(index) || index >= this.insideTableData.length || index < 0) return;
+      let scrollTop = index * this.itemRowHeight;
+      this.$refs.outer.scrollTop = scrollTop;
+      this.currentScrollToRowIndex = index;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.currentScrollToRowIndex = -1;
+      }, 1800);
+    },
+    // 给表格数据添加行号，用于排序后正确修改数据
+    setInitIndex(tableData) {
+      return tableData.map((item, i) => {
+        let row = item;
+        row.initRowIndex = i;
+        return row;
+      });
+    },
+    // 获取指定行的初始行号
+    _getInitRowIndexByIndex(index) {
+      return this.insideTableData[index].initRowIndex;
+    },
+    _getIndexByInitRowIndex(index) {
+      let i = -1;
+      let len = this.insideTableData.length;
+      while (++i < len) {
+        let row = this.insideTableData[i];
+        if (row.initRowIndex === index) return i;
+      }
+    }
+  }
+};
diff --git a/frontend/src/components/vue-bigdata-table/mixins/edit.js b/frontend/src/components/vue-bigdata-table/mixins/edit.js
new file mode 100644
index 00000000..0ba5d304
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/mixins/edit.js
@@ -0,0 +1,90 @@
+import { findNodeUpper } from '../util';
+export default {
+  data() {
+    return {
+      edittingTd: '', // 正在编辑的单元格的行号和列号拼接的字符串 `${row}-${col}`
+      editContent: '', // 用来保存编辑的内容
+      selectCellsStart: {}, // 编辑模式下可选中多行多列，此用来保存其实单元格行列号
+      selectCellsEnd: {},
+      selectTotalColStartIndex: -1, // 选取整列起始序列号
+      selectTotalColEndIndex: -1
+    };
+  },
+  computed: {
+    startSelect() {
+      return {
+        row: Math.min(this.selectCellsStart.row, this.selectCellsEnd.row),
+        col: Math.min(this.selectCellsStart.col, this.selectCellsEnd.col)
+      };
+    },
+    endSelect() {
+      return {
+        row: Math.max(this.selectCellsStart.row, this.selectCellsEnd.row),
+        col: Math.max(this.selectCellsStart.col, this.selectCellsEnd.col)
+      };
+    }
+  },
+  watch: {
+    selectable() {
+      this.selectCellsStart = {
+        row: -1,
+        col: -1
+      };
+      this.selectCellsEnd = {
+        row: -1,
+        col: -1
+      };
+    }
+  },
+  methods: {
+    _editCell(row, col, scrollToView = true) {
+      if (!this.canEdit || row < 0 || row > this.insideTableData.length || col < 0 || col > this.columns.length || this.edittingTd === `${row}-${col}`) return;
+      if (scrollToView && parseInt(this.edittingTd.split('-')[0]) !== row) this.scrollToRow(row);
+      this.edittingTd = `${row}-${col}`;
+    },
+    handleMousedownOnTable(e) {
+      if (e.button !== 0 || (!this.paste && !this.selectable)) return;
+      let currentTd = e.target.tagName === 'TD' ? e.target : findNodeUpper(e.target, 'td');
+      this.selectCellsStart = {
+        row: currentTd.getAttribute('data-row'),
+        col: currentTd.getAttribute('data-col')
+      };
+      this.selectCellsEnd = {
+        row: currentTd.getAttribute('data-row'),
+        col: currentTd.getAttribute('data-col')
+      };
+      this.canSelectText = false;
+      document.addEventListener('mousemove', this.handleMoveOnTable);
+      document.addEventListener('mouseup', this.handleUpOnTable);
+    },
+    handleMoveOnTable(e) {
+      if (!(e.target.tagName === 'TD' || findNodeUpper(e.target, 'td'))) return;
+      let currentTd = e.target.tagName === 'TD' ? e.target : findNodeUpper(e.target, 'td');
+      this.selectCellsEnd = {
+        row: currentTd.getAttribute('data-row'),
+        col: currentTd.getAttribute('data-col')
+      };
+    },
+    handleUpOnTable(e) {
+      if (!this.paste && !this.selectable) return;
+      this.canSelectText = true;
+      this.handleMoveOnTable(e);
+      document.removeEventListener('mousemove', this.handleMoveOnTable);
+      document.removeEventListener('mouseup', this.handleUpOnTable);
+      this.$emit('on-select-cells', {
+        start: {
+          row: this.startSelect.row,
+          col: this.startSelect.col
+        },
+        end: {
+          row: this.endSelect.row,
+          col: this.endSelect.col
+        }
+      });
+    },
+    _selectCell(row, col) {
+      this.selectCellsStart = { row, col };
+      this.selectCellsEnd = { row, col };
+    }
+  }
+};
diff --git a/frontend/src/components/vue-bigdata-table/mixins/empty-table.js b/frontend/src/components/vue-bigdata-table/mixins/empty-table.js
new file mode 100644
index 00000000..221f7cd1
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/mixins/empty-table.js
@@ -0,0 +1,31 @@
+export default {
+  methods: {
+    _createEmptyData() {
+      // this.$nextTick(() => {
+      let rowNum = this.rowNum;
+      let colNum = this.colNum;
+      if (this.rowNum && this.colNum) {
+        console.log(this.value.length, this.rowNum, this.colNum);
+        let valueRowNum = this.value.length;
+        let valueColNum = this.value[0] ? this.value[0].length : 0;
+        let totalRowNum = valueRowNum + rowNum;
+        let totalColNum = valueColNum + colNum;
+        let value = [...this.value];
+        console.log(totalRowNum, valueRowNum);
+        for (let r = valueRowNum; r < totalRowNum; r++) {
+          value.push([]);
+          for (let c = valueColNum; c < totalColNum; c++) {
+            value[r].push('');
+          }
+        }
+        // this.
+        console.log(value);
+        this.$emit('input', value);
+        // this.$nextTick(() => {
+        // 	this._tableResize();
+        // })
+      }
+      // });
+    }
+  }
+};
diff --git a/frontend/src/components/vue-bigdata-table/mixins/filter.js b/frontend/src/components/vue-bigdata-table/mixins/filter.js
new file mode 100644
index 00000000..bcb2c13f
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/mixins/filter.js
@@ -0,0 +1,14 @@
+import { hasOneOf } from '../util';
+export default {
+  methods: {
+    _filter(col, queryArr) {
+      let value = [...this.value];
+      this.insideTableData = value.filter(item => hasOneOf(item[col], queryArr));
+      this._tableResize();
+    },
+    _cancelFilter() {
+      this.insideTableData = [...this.value];
+      this._tableResize();
+    }
+  }
+};
diff --git a/frontend/src/components/vue-bigdata-table/mixins/header-move.js b/frontend/src/components/vue-bigdata-table/mixins/header-move.js
new file mode 100644
index 00000000..cb03dc63
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/mixins/header-move.js
@@ -0,0 +1,65 @@
+import { findNodeUpper } from '../util';
+export default {
+  data() {
+    return {
+      isOnCellEdge: false, // 鼠标是否在表头的两个单元格之间的边框上
+      canResizeCell: false,
+      initCellX: 0, // 用于计算鼠标移动的距离
+      scrollLeft: 0,
+      colIndex: 0, // 在表头上移动时鼠标所在列的序号,
+      atLeftGivenArea: false, // 是否在表头单元格指定区域(距左侧)
+      atRightGivenArea: false // 是否在表头单元格指定区域(距右侧)
+    };
+  },
+  methods: {
+    handleMousemove(e) {
+      const target = e.srcElement || e.target;
+      let cell = target.tagName.toUpperCase() === 'TH' ? target : findNodeUpper(target, 'th');
+      let cellDomRect = cell.getBoundingClientRect();
+      let atLeft = (e.pageX - cellDomRect.left) < (cellDomRect.width / 2);
+      let atLeftGivenArea = (cellDomRect.left + this.atLeftCellPosi) >= e.pageX;
+      let atRightGivenArea = (cellDomRect.right - e.pageX) <= this.atRightCellPosi;
+      let cellIndex = parseInt(cell.getAttribute('data-index')); // 当前单元格的序号
+      if (atLeft && cellIndex !== 0) {
+        this.isOnCellEdge = (e.pageX - cellDomRect.left) <= 1 && cellIndex - 1 !== this.fixedCol;
+      } else if (!atLeft && cellIndex !== this.cellNum - 1) {
+        this.isOnCellEdge = (cellDomRect.right - e.pageX) <= 1 && cellIndex !== this.fixedCol;
+      }
+      e.atRightGivenArea = atRightGivenArea;
+      e.atLeftGivenArea = atLeftGivenArea;
+      this.atRightGivenArea = atRightGivenArea;
+      this.atLeftGivenArea = atLeftGivenArea;
+      let index = 0; // 调整表格列宽的左侧的表格的序列
+      e.colIndex = cellIndex;
+      this.colIndex = cellIndex;
+      this.$emit('on-moving-on-header', e);
+      if (this.canResizeCell) {
+        if (atLeft) {
+          index = cellIndex - 1;
+        } else {
+          index = cellIndex;
+        }
+        if (index === this.fixedCol) return;
+        let widthLeft = this.widthArr[index] + e.pageX - this.initCellX;
+        let widthRight = this.widthArr[index + 1] + this.initCellX - e.pageX;
+        this.widthArr.splice(index, 2, widthLeft, widthRight);
+        this.initCellX = e.pageX;
+      }
+    },
+    handleMousedown(e) {
+      e.colIndex = this.cellIndex;
+      this.$emit('on-mousedown-on-header', e);
+      if (this.isOnCellEdge) {
+        this.canResizeCell = true;
+        this.initCellX = e.pageX;
+      }
+    },
+    canNotMove(e) {
+      this.canResizeCell = false;
+      e.colIndex = this.colIndex;
+      e.atLeftGivenArea = this.atLeftGivenArea;
+      e.atRightGivenArea = this.atRightGivenArea;
+      this.$emit('on-mouseup-on-header', e);
+    }
+  }
+};
diff --git a/frontend/src/components/vue-bigdata-table/mixins/index.js b/frontend/src/components/vue-bigdata-table/mixins/index.js
new file mode 100644
index 00000000..426f0de6
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/mixins/index.js
@@ -0,0 +1,9 @@
+import headerMove from './header-move';
+import styleComputed from './style-compute';
+import dataHandle from './data-handle';
+import edit from './edit';
+import emptyTable from './empty-table';
+import sort from './sort';
+import filter from './filter';
+
+export default [headerMove, styleComputed, dataHandle, edit, emptyTable, sort, filter];
diff --git a/frontend/src/components/vue-bigdata-table/mixins/sort.js b/frontend/src/components/vue-bigdata-table/mixins/sort.js
new file mode 100644
index 00000000..d30daa30
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/mixins/sort.js
@@ -0,0 +1,40 @@
+import { sortArr, sortDesArr } from '../util';
+export default {
+  data() {
+    return {
+      sortedByColIndex: -1,
+      sortedType: ''
+    };
+  },
+  methods: {
+    showSortBtn(colIndex) {
+      const sortable = this.sortable ? true : this.sortIndex !== undefined;
+      return (sortable && !(this.showIndex && colIndex === 0) && (typeof this.sortIndex === 'number' ? colIndex <= this.sortIndex : this.sortIndex.indexOf(colIndex) >= 0)) || this.columnsHandled[colIndex].sortable;
+    },
+    handleSort(colIndex, sortType) {
+      this.sortedByColIndex = colIndex;
+      this.sortedType = sortType;
+      let valueArr = [...this.value];
+      colIndex = this.showIndex ? colIndex - 1 : colIndex;
+      if (sortType === 'up') {
+        sortArr(valueArr, colIndex);
+      } else {
+        sortDesArr(valueArr, colIndex);
+      }
+      this.insideTableData = [...valueArr];
+    },
+    handleCancelSort() {
+      this.sortedByColIndex = -1;
+      this.sortedType = '';
+      this.insideTableData = [...this.value];
+    },
+    initSort() {
+      if (this.defaultSort) {
+        const colIndex = parseInt(Object.keys(this.defaultSort)[0]);
+        if (!(colIndex || colIndex === 0)) return;
+        const sortType = this.defaultSort[colIndex];
+        this.handleSort(colIndex, sortType);
+      }
+    }
+  }
+};
diff --git a/frontend/src/components/vue-bigdata-table/mixins/style-compute.js b/frontend/src/components/vue-bigdata-table/mixins/style-compute.js
new file mode 100644
index 00000000..f7958a1b
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/mixins/style-compute.js
@@ -0,0 +1,202 @@
+import { getScrollbarWidth } from '../util';
+export default {
+  data() {
+    return {
+      wrapperHeight: 0,
+      scrollTop: 0,
+      moduleHeight: 0, // 三个tr块中的一块的高度
+      topPlaceholderHeight: 0, // 顶部占位容器高度
+      tableWidth: 0,
+      widthArr: [], // 用于给数据表格传递列宽
+      totalRowHeight: 0, // 如果全量渲染应该是多高，用于计算占位
+      currentScrollToRowIndex: -1, // 当前跳转到的行号，用于做闪烁提示
+      canSelectText: true, // 用于控制是否可选中表格文字
+      indexWidthInside: 0,
+      outerWidth: 0, // 外面容器宽度
+      oldTableWidth: 0, // 旧的表格宽度，用于重新计算列宽
+      highlightRowIndex: -1, // 高亮行号
+      updateID: 0
+    };
+  },
+  computed: {
+    fixedColCom() {
+      return this.showIndex ? (this.fixedCol + 1) : this.fixedCol;
+    },
+    wrapperClasses() {
+      return [
+        this.prefix,
+        this.fixed ? `${this.prefix}-fixed` : ''
+      ];
+    },
+    headerStyle() {
+      return {
+        height: this.headerHeight + 'px',
+        transform: 'translateX(0)'
+      };
+    },
+    showFixedBoxShadow() {
+      return this.scrollLeft !== 0;
+    },
+    tableWidthStyles() {
+      return { width: this.tableWidth + 'px' };
+    },
+    rowStyles() {
+      return this.rowHeight !== undefined ? { height: `${this.rowHeight}px` } : {};
+    },
+    placeholderHeight() {
+      return this.totalRowHeight - this.moduleHeight * 3; // 占位容器的总高度(上 + 下)
+    },
+    bottomPlaceholderHeight() {
+      return (this.placeholderHeight - this.topPlaceholderHeight) < 0 ? 0 : this.placeholderHeight - this.topPlaceholderHeight;
+    },
+    itemRowHeight() {
+      return this.rowHeight === undefined ? 48 : this.rowHeight;
+    },
+    colWidthArr() {
+      let len = this.cellNum;
+      let colWidthArr = [];
+      if (this.fixedWrapperWidth) {
+        let width = this.outerWidth;
+        let num = this.cellNum;
+        if (this.showIndex) {
+          colWidthArr.push(this.indexWidth);
+          width -= this.indexWidth;
+          num -= 1;
+        }
+        let i = -1;
+        let itemColWidth = width / num;
+        while (++i < num) {
+          colWidthArr.push(itemColWidth);
+        }
+      } else {
+        let i = 0;
+        let hasWidthCellCount = 0; // 统计设置了width的列的数量，从而为没有设置width的列分配宽度
+        let noWidthCellIndexArr = []; // 没有设置宽度的列的序列
+        let hasWidthCellTotalWidth = 0; // 设置了width的列一共多宽
+        while (i < len) {
+          if (this.columnsHandled[i].width) {
+            hasWidthCellCount++;
+            hasWidthCellTotalWidth += this.columnsHandled[i].width;
+            colWidthArr.push(this.columnsHandled[i].width);
+          } else {
+            noWidthCellIndexArr.push(i);
+            colWidthArr.push(0);
+          }
+          i++;
+        }
+        let noWidthCellWidth = (this.tableWidth - hasWidthCellTotalWidth) / (len - hasWidthCellCount);
+        let w = 0;
+        let indexArrLen = noWidthCellIndexArr.length;
+        while (w < indexArrLen) {
+          colWidthArr[noWidthCellIndexArr[w]] = noWidthCellWidth;
+          w++;
+        }
+        // this.widthArr = colWidthArr;
+      }
+      return colWidthArr;
+    },
+    cursorOnHeader() {
+      return this.headerTrStyle.cursor ? this.headerTrStyle.cursor : ((this.isOnCellEdge || this.canResizeCell) ? 'col-resize' : 'default');
+    }
+  },
+  watch: {
+    highlightRow() {
+      this._clearCurrentRow();
+    }
+  },
+  methods: {
+    _tableResize() {
+      this.$nextTick(() => {
+        this.updateHeight();
+        this.setComputedProps();
+        let scrollBarWidth = this.totalRowHeight > this.wrapperHeight ? getScrollbarWidth() : 0;
+        this.outerWidth = this.$refs.outer.offsetWidth - 2 - scrollBarWidth;
+        let width = this.colWidth * this.columns.length + (this.showIndex ? this.indexWidthInside : 0);
+        // this.tableWidth = width > this.outerWidth ? width : this.outerWidth;
+        this.tableWidth = this.fixedWrapperWidth ? this.outerWidth : (width > this.outerWidth ? width : this.outerWidth);
+        if (width < this.outerWidth) this._setColWidthArr();
+        this.widthArr = this.colWidthArr;
+      });
+    },
+    updateHeight() {
+      this.$nextTick(() => {
+        let wrapperHeight = this.$refs.outer.offsetHeight;
+        this.itemNum = Math.ceil((wrapperHeight - this.headerHeight) / this.itemRowHeight) + this.appendNum;
+        this.moduleHeight = this.itemNum * this.itemRowHeight;
+        this.wrapperHeight = wrapperHeight;
+        this.setTopPlace();
+      });
+    },
+    setComputedProps() {
+      const len = this.insideTableData.length;
+      this.totalRowHeight = len * this.itemRowHeight;
+    },
+    setIndexWidth(len) {
+      let width = 70;
+      if (len <= 99) {
+        width = 50;
+      } else if (len > 99 && len <= 1000) {
+        width = 60;
+      } else if (len > 1000 && len <= 10000) {
+        width = 70;
+      } else if (len > 10000 && len <= 100000) {
+        width = 90;
+      } else {
+        width = 100;
+      }
+      return width;
+    },
+    setTopPlace() {
+      let scrollTop = this.scrollTop;
+      let t0 = 0;
+      let t1 = 0;
+      let t2 = 0;
+      if (scrollTop > this.moduleHeight) {
+        switch (this.currentIndex) {
+          case 0:
+            t0 = parseInt(scrollTop / (this.moduleHeight * 3));
+            t1 = t2 = t0;
+            break;
+          case 1:
+            t1 = parseInt((scrollTop - this.moduleHeight) / (this.moduleHeight * 3));
+            t0 = t1 + 1;
+            t2 = t1;
+            break;
+          case 2:
+            t2 = parseInt((scrollTop - this.moduleHeight * 2) / (this.moduleHeight * 3));
+            t0 = t1 = t2 + 1;
+        }
+      }
+      this.times0 = t0;
+      this.times1 = t1;
+      this.times2 = t2;
+      this.topPlaceholderHeight = parseInt(scrollTop / this.moduleHeight) * this.moduleHeight;
+      this.setTableData();
+    },
+    _initMountedHandle() {
+      if (this.indexWidth === undefined) this.indexWidthInside = this.setIndexWidth(this.insideTableData.length);
+      else this.indexWidthInside = this.indexWidth;
+      this.oldTableWidth = this.colWidthArr.reduce((sum, b) => {
+        return sum + b;
+      }, 0);
+      this.widthArr = this.colWidthArr;
+      if ((this.colWidth * this.columns.length + (this.showIndex ? this.indexWidthInside : 0)) < this.outerWidth) this._setColWidthArr();
+    },
+    _setColWidthArr() {
+      let widthArr = this.widthArr.map(width => {
+        return width / this.oldTableWidth * this.tableWidth;
+      });
+      this.oldTableWidth = this.tableWidth;
+      this.widthArr = widthArr;
+    },
+    _clearCurrentRow() {
+      this.highlightRowIndex = -1;
+    },
+    refreshHeader() {
+      this.updateID++;
+    },
+    _setHighlightRow(row) {
+      this.highlightRowIndex = row;
+    }
+  }
+};
diff --git a/frontend/src/components/vue-bigdata-table/util/index.js b/frontend/src/components/vue-bigdata-table/util/index.js
new file mode 100644
index 00000000..d235b557
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/util/index.js
@@ -0,0 +1,136 @@
+export const findNodeUpper = (ele, tag) => {
+  if (ele.parentNode) {
+    if (ele.parentNode.tagName === tag.toUpperCase()) {
+      return ele.parentNode;
+    } else {
+      if (ele.parentNode) return findNodeUpper(ele.parentNode, tag);
+      else return false;
+    }
+  }
+};
+
+export const getScrollbarWidth = () => {
+  let oP = document.createElement('p');
+  let styles = {
+    width: '100px',
+    height: '100px',
+    overflowY: 'scroll'
+  };
+  for (let i in styles) {
+    oP.style[i] = styles[i];
+  }
+  document.body.appendChild(oP);
+  let scrollbarWidth = oP.offsetWidth - oP.clientWidth;
+  oP.remove();
+  return scrollbarWidth;
+};
+
+export const createNewArray = (length, content = undefined) => {
+  let i = -1;
+  let arr = [];
+  while (++i < length) {
+    let con = Array.isArray(content) ? content[i] : content;
+    arr.push(con);
+  }
+  return arr;
+};
+
+export const iteratorByTimes = (times, fn) => {
+  let i = -1;
+  while (++i < times) {
+    fn(i);
+  }
+};
+
+export const getHeaderWords = (length) => {
+  let wordsArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+  let headerArr = [];
+  if (length <= 26) {
+    headerArr = wordsArr.slice(0, length);
+  } else {
+    headerArr = [...wordsArr];
+    let num = length - 26;
+    let firstWordIndex = 0;
+    let secondWordIndex = 0;
+    let i = -1;
+    while (++i < num) {
+      firstWordIndex = Math.floor(i / 26);
+      secondWordIndex = i % 26;
+      let sumWord = `${wordsArr[firstWordIndex]}${wordsArr[secondWordIndex]}`;
+      headerArr.push(sumWord);
+    }
+  }
+  return headerArr;
+};
+
+// 获取数组中第一个不为空的值
+export const getFirstNotNullValue = (array, index) => {
+  if (!(array && array.length)) return false;
+  let r = -1;
+  let rowLength = array.length;
+  while (++r < rowLength) {
+    let item = array[r][index];
+    if (item || item === 0) return item;
+  }
+  return false;
+};
+
+export const sortArr = (arr, index) => {
+  const isChineseReg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
+  if (arr.length <= 1) return;
+  const firstNotNullValue = getFirstNotNullValue(arr, index);
+  if (!firstNotNullValue && firstNotNullValue !== 0) return;
+  if (!isChineseReg.test(firstNotNullValue)) {
+    if (isNaN(Number(firstNotNullValue))) {
+      // 非中文非数值
+      arr.sort();
+    } else {
+      // 数值型
+      arr.sort((a, b) => {
+        return a[index] - b[index];
+      });
+    }
+  } else {
+    arr.sort((a, b) => {
+      return a[index].localeCompare(b[index], 'zh');
+    });
+  }
+};
+
+// 倒序
+export const sortDesArr = (arr, index) => {
+  const isChineseReg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
+  if (arr.length <= 1) return;
+  const firstNotNullValue = getFirstNotNullValue(arr, index);
+  if (!firstNotNullValue && firstNotNullValue !== 0) return;
+  if (!isChineseReg.test(firstNotNullValue)) {
+    if (isNaN(Number(firstNotNullValue))) {
+      // 非中文非数值
+      arr.sort().reverse();
+    } else {
+      // 数值型
+      arr.sort((a, b) => {
+        return b[index] - a[index];
+      });
+    }
+  } else {
+    arr.sort((a, b) => {
+      return b[index].localeCompare(a[index], 'zh');
+    });
+  }
+};
+
+export const hasOneOf = (str, targetArr) => {
+  let len = targetArr.length;
+  let i = -1;
+  while (++i < len) {
+    if (str.indexOf(targetArr[i]) >= 0) {
+      return true;
+    }
+  }
+  return false;
+};
+
+export const oneOf = (ele, targetArr) => {
+  return targetArr.indexOf(ele) > -1;
+};
diff --git a/frontend/src/components/vue-bigdata-table/vue-bigdata-table.less b/frontend/src/components/vue-bigdata-table/vue-bigdata-table.less
new file mode 100755
index 00000000..4dbe6a15
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/vue-bigdata-table.less
@@ -0,0 +1,311 @@
+@prefix: ~"vue-bigdata-table";
+@select-border-color: #3695FE;
+
+@keyframes scroll-tip {
+  0% {
+    background: #fff;
+  }
+
+  50% {
+    background: #d0e8ff;
+  }
+}
+
+.@{prefix} {
+  width: 100%;
+  box-sizing: border-box;
+
+  * {
+    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+    color: #495060;
+    font-size: 12px;
+    font-weight: 400;
+  }
+
+  &-outer {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    border: 1px solid #e9eaec;
+    box-sizing: border-box;
+    position: relative;
+
+    .@{prefix}-header-wrapper {
+      box-sizing: border-box;
+      z-index: 70;
+
+      &.header-wrapper-fixed {
+        position: -webkit-sticky;
+        position: sticky;
+      }
+
+      table {
+        table-layout: fixed;
+        height: 100%;
+
+        tr th {
+          border-right: 1px solid #e9eaec;
+          border-bottom: 1px solid #e9eaec;
+          background: #fff;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          word-break: break-all;
+
+          // &:last-child{
+          //     border-right: none;
+          // }
+          .@{prefix}-header-inside-wrapper {
+            box-sizing: border-box;
+            padding: 0 8px;
+          }
+        }
+      }
+    }
+  }
+
+  &-fixed-header {
+    position: -webkit-sticky;
+    position: sticky;
+    transform: translateX(0);
+    left: 0;
+    z-index: 110;
+    transition: box-shadow .2s ease;
+
+    &.box-shadow {
+      box-shadow: 2px 0 6px -2px rgba(0, 0, 0, .2);
+      transition: box-shadow .2s ease;
+    }
+  }
+
+  &-wrapper {
+    width: 100%;
+    border-bottom: none;
+
+    .@{prefix}-content {
+      width: 100%;
+      height: auto;
+      // &.noselect-text{
+      // 	-webkit-touch-callout: none;
+      // 	-webkit-user-select: none;
+      // 	-khtml-user-select: none;
+      // 	-moz-user-select: none;
+      // 	-ms-user-select: none;
+      // 	user-select: none;
+      // }
+    }
+
+    &:nth-child(2) {
+      border-top: 1px solid #e9eaec;
+    }
+
+    &:nth-child(4) {
+      border-bottom: 1px solid #e9eaec;
+    }
+
+    .@{prefix}-data-table {
+      &.@{prefix}-content-table {
+
+        left: 0;
+        top: 0;
+      }
+
+      border-bottom: none;
+      border-top: none;
+      table-layout: fixed;
+
+      tr {
+        background: #fff;
+
+        &.scroll-to-row-tip {
+          animation: scroll-tip .6s 3;
+        }
+
+        td {
+          min-width: 0;
+          height: 48px;
+          box-sizing: border-box;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          vertical-align: middle;
+          border-bottom: 1px solid #e9eaec;
+          border-right: 1px solid #e9eaec;
+
+          border-left: 1px solid transparent;
+          border-top: 1px solid transparent; // 表格选中
+
+          .@{prefix}-cell {
+            box-sizing: border-box;
+            padding: 0 18px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            word-break: break-all;
+          }
+
+          // &:last-child{
+          //     border-right: none;
+          // }
+          .edit-item-con {
+            width: 100%;
+            text-align: left;
+            padding: 0 6px;
+            box-sizing: border-box;
+
+            .edit-item {
+              &-input {
+                width: ~"calc(100% - 50px)";
+                float: left;
+              }
+
+              &-btn-con {
+                float: left;
+
+                .edit-btn {
+                  width: 20px;
+                  margin: 7px 4px 0 0;
+                }
+              }
+            }
+          }
+
+          &.start-select-cell {
+            border-left: 1px solid @select-border-color;
+            border-top: 1px solid @select-border-color;
+          }
+
+          &.end-select-cell {
+            border-right: 1px solid @select-border-color;
+            border-bottom: 1px solid @select-border-color;
+          }
+
+          &.right-top-select-cell {
+            border-right: 1px solid @select-border-color;
+            border-top: 1px solid @select-border-color;
+          }
+
+          &.left-bottom-select-cell {
+            border-left: 1px solid @select-border-color;
+            border-bottom: 1px solid @select-border-color;
+          }
+
+          &.top-center-select-cell {
+            border-top: 1px solid @select-border-color;
+          }
+
+          &.bottom-center-select-cell {
+            border-bottom: 1px solid @select-border-color;
+          }
+
+          &.left-center-select-cell {
+            border-left: 1px solid @select-border-color;
+          }
+
+          &.right-center-select-cell {
+            border-right: 1px solid @select-border-color;
+          }
+        }
+
+        &.stripe-gray {
+          background: #f8f8f9;
+        }
+
+        &.highlight-row {
+          background: #ebf7ff;
+        }
+      }
+
+      &-left {
+        text-align: left;
+      }
+
+      &-center {
+        text-align: center;
+      }
+
+      &-right {
+        text-align: right;
+      }
+    }
+  }
+
+  &-fixed {
+    .@{prefix}-header-wrapper {
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
+    }
+  }
+
+  &-fixed-table {
+    position: -webkit-sticky;
+    position: sticky;
+    left: 0;
+    z-index: 60;
+    transition: box-shadow .2s ease;
+
+    &.box-shadow {
+      box-shadow: 2px 0 6px -2px rgba(0, 0, 0, .2);
+      transition: box-shadow .2s ease;
+    }
+
+    td {
+      border-right: 1px solid #e9eaec;
+      // &:last-child{
+      //     border-right: 1px solid #e9eaec !important;
+      // }
+    }
+  }
+
+  &-item-table {
+    position: relative;
+  }
+
+  .sort-button {
+    &-wrapper {
+      display: inline-block;
+      position: relative;
+      width: 10px;
+      height: 11px;
+      transform: translateY(1px);
+    }
+
+    &-item {
+      position: absolute;
+      display: inline-block;
+      width: 0;
+      height: 0;
+      border: 4px solid transparent;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      transition: border-color .2s ease;
+
+      &-up {
+        top: -4px;
+        border-bottom: 4px solid #bbbec4;
+
+        &:hover {
+          border-bottom: 4px solid #495060;
+        }
+
+        &-active {
+          border-bottom: 4px solid #2d8cf0;
+        }
+      }
+
+      &-down {
+        bottom: -4px;
+        border-top: 4px solid #bbbec4;
+
+        &:hover {
+          border-top: 4px solid #495060;
+        }
+
+        &-active {
+          border-top: 4px solid #2d8cf0;
+        }
+      }
+    }
+  }
+}
diff --git a/frontend/src/components/vue-bigdata-table/vue-bigdata-table.vue b/frontend/src/components/vue-bigdata-table/vue-bigdata-table.vue
new file mode 100644
index 00000000..65bd8c1e
--- /dev/null
+++ b/frontend/src/components/vue-bigdata-table/vue-bigdata-table.vue
@@ -0,0 +1,441 @@
+<style lang="less">
+@import "./vue-bigdata-table.less";
+</style>
+
+<template>
+  <div
+    class="vue-bigdata-table-outer"
+    ref="outer"
+    @DOMMouseScroll="handleScroll"
+    @scroll="handleScroll"
+  >
+    <div :class="wrapperClasses" :style="tableWidthStyles">
+      <div class="vue-bigdata-table-wrapper" ref="outWrapper">
+        <div
+          :class="['vue-bigdata-table-header-wrapper', fixed ? 'header-wrapper-fixed' : '']"
+          :style="headerStyle"
+        >
+          <slot name="top" :colWidthArr="widthArr"></slot>
+          <table
+            v-if="fixedCol >= 0"
+            :class="['vue-bigdata-table-fixed-header', showFixedBoxShadow ? 'box-shadow' : '']"
+            cellspacing="0"
+            cellpadding="0"
+            border="0"
+          >
+            <colgroup>
+              <col
+                v-if="i <= fixedCol"
+                :width="width"
+                v-for="(width, i) in widthArr"
+                :key="'header-key-fixed-' + i"
+              >
+            </colgroup>
+            <tr
+              :style="{cursor: cursorOnHeader}"
+              :data-update="updateID"
+              @mousemove.capture.prevent="handleMousemove"
+              @mousedown="handleMousedown"
+              @mouseup="canNotMove"
+              @mouseleave="canNotMove"
+            >
+              <th
+                v-if="i <= fixedCol"
+                v-for="(col, i) in columnsHandled"
+                :data-index="i"
+                :key="`table-title-${i}`"
+                style="border-right: 1px solid #e9eaec;"
+              >
+                <span v-if="!col.render">
+                  {{ col.title }}
+                  <sort-button
+                    v-if="showSortBtn(i)"
+                    :col-index="i"
+                    @on-sort="handleSort"
+                    @on-cancel-sort="handleCancelSort"
+                    :current-sort-col-index="sortedByColIndex"
+                    :current-sort-type="sortedType"
+                  ></sort-button>
+                </span>
+                <render-dom v-else :render="col.render" :back-value="getComputedTableDataIndex(i)"></render-dom>
+              </th>
+            </tr>
+          </table>
+          <table
+            ref="headerTable"
+            style="position: absolute;left: 0;top: 0;"
+            cellspacing="0"
+            cellpadding="0"
+            border="0"
+            width="100%"
+          >
+            <colgroup>
+              <col :width="width" v-for="(width, i) in widthArr" :key="'header-key-' + i">
+            </colgroup>
+            <tr
+              :style="{cursor: cursorOnHeader}"
+              :data-update="updateID"
+              @mousemove.capture.prevent="handleMousemove"
+              @mousedown="handleMousedown"
+              @mouseup="canNotMove"
+              @mouseleave="canNotMove"
+            >
+              <th v-for="(col, i) in columnsHandled" :data-index="i" :key="`table-title-${i}`">
+                <span v-if="!col.render && (i > fixedCol)">
+                  {{ col.title }}
+                  <sort-button
+                    v-if="showSortBtn(i)"
+                    :col-index="i"
+                    @on-sort="handleSort"
+                    @on-cancel-sort="handleCancelSort"
+                    :current-sort-col-index="sortedByColIndex"
+                    :current-sort-type="sortedType"
+                  ></sort-button>
+                </span>
+                <render-dom
+                  v-else-if="(i > fixedCol)"
+                  :render="col.render"
+                  :back-value="getComputedTableDataIndex(i)"
+                ></render-dom>
+              </th>
+            </tr>
+          </table>
+        </div>
+        <div class="vue-bigdata-table-content" @mousedown="handleMousedownOnTable">
+          <div :style="{height: `${topPlaceholderHeight}px`}"></div>
+          <render-dom :render="renderTable"></render-dom>
+          <div :style="{height: `${bottomPlaceholderHeight}px`}"></div>
+        </div>
+      </div>
+    </div>
+    <Spin fix size="large" v-if="loading">
+      <slot name="loading"></slot>
+    </Spin>
+  </div>
+</template>
+<script>
+import renderDom from "./components/renderDom";
+import sortButton from "./components/sort-button.vue";
+import editRender from "./components/input-render";
+import mixins from "./mixins";
+export default {
+  name: "bigdataTable",
+  components: {
+    renderDom,
+    sortButton
+  },
+  mixins: [...mixins],
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @description 是否显示序列号列
+     */
+    showIndex: {
+      type: Boolean,
+      default: false
+    },
+    rowNum: Number,
+    colNum: Number,
+    /**
+     * @description 表格数据二维数组
+     */
+    value: {
+      type: Array
+    },
+    /**
+     * @description 表格行高
+     */
+    rowHeight: {
+      type: Number,
+      default: 48
+    },
+    /**
+     * @description 是否固定表头
+     */
+    fixed: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @description 设为true后表格列宽总是平分容器宽度减去indexWidth后的宽度
+     */
+    fixedWrapperWidth: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @description 是否取消鼠标悬浮高亮效果
+     */
+    disabledHover: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * @description 点击一行是否高亮
+     */
+    highlightRow: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @description 表头数组，元素为单个表头的对象，【{ title: 'xxx', render: (h) => {} }】
+     */
+    columns: {
+      type: Array
+    },
+    /**
+     * @description 列宽，如果单独列中指定了宽度则按单独列，如果所有宽度加起来比容器宽度小，则平分宽度，否则用colWidth
+     */
+    colWidth: {
+      type: Number,
+      default: 100
+    },
+    /**
+     * @description 表头高度
+     */
+    headerHeight: {
+      type: Number,
+      default: 52
+    },
+    /**
+     * @description 表头tr行的样式
+     */
+    headerTrStyle: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    /**
+     * @description 序列号列宽，如果没有设置，则会根据数据行数自动计算适合的宽度
+     */
+    indexWidth: Number,
+    /**
+     * @description 序列号渲染render
+     */
+    indexRender: {
+      type: Function,
+      default: (h, params) => {
+        return h("span", params.index + 1);
+      }
+    },
+    /**
+     * @description indexRender的第三个参数
+     */
+    indexRenderParams: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    /**
+     * @description 是否显示斑马线
+     */
+    stripe: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @description 当前鼠标在表头单元格左侧atLeftCellPosi像素处
+     */
+    atLeftCellPosi: {
+      type: Number,
+      default: 80
+    },
+    /**
+     * @description 当前鼠标在表头单元格右侧atRightCellPosi像素处
+     */
+    atRightCellPosi: {
+      type: Number,
+      default: 80
+    },
+    /**
+     * @description 固定的列的范围，[0, fixedCol]，设为2即固定0，1，2列，这三列横向不滚动
+     */
+    fixedCol: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * @description 根据表格容器高度计算内置单个表格（1/3）渲染的行数基础上额外渲染的行数，行数越多表格接替渲染效果越好，但越耗性能
+     */
+    appendNum: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * @description 当前是否可编辑
+     */
+    canEdit: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @description 触发编辑单元格的方式，enum:['dblclick' => 双击单元格]
+     */
+    startEditType: {
+      type: String,
+      default: "dblclick"
+    },
+    /**
+     * @description 编辑单元格所渲染元素的render函数，如果不传则使用内置元素
+     */
+    editCellRender: {
+      type: Function,
+      default: editRender
+    },
+    /**
+     * @description 保存修改的单元格内容之前的钩子，如果该函数返回false，则阻止保存
+     */
+    beforeSave: {
+      type: Function,
+      default: () => {
+        return true;
+      }
+    },
+    /**
+     * @description 是否可选择单元格
+     */
+    selectable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @description 是否可粘贴，如果设为true，则selectable效果为true
+     */
+    paste: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @description 是否可排序
+     */
+    sortable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @description 开启排序的列序号数组或序号
+     */
+    sortIndex: [Array, Number],
+    /**
+     * @description 默认按指定列指定排序方式排序
+     */
+    defaultSort: Object
+  },
+  /**
+   * Events
+   * @on-click-tr 	des: 点击行时触发
+   * 					arg: index: 当前行号, initRowIndex: 初始行号（排序筛选之前）
+   * @on-click-td 	des: 点击单元格触发
+   * 					arg: { row: 行号, col: 列号 }
+   * @on-success-save des: 编辑成功时触发
+   * 					arg: { row: 行号, col: 列号, value: 修改后的值, initRowIndex: 初始行号 }
+   * @on-fail-save    des: 编辑失败时触发
+   * 					arg: 同on-success-save
+   * @on-paste		des: 粘贴数据成功时触发
+   * 					des: data: 粘贴的数据的二维数组
+   */
+  data() {
+    return {
+      prefix: "vue-bigdata-table"
+    };
+  },
+  methods: {
+    // 涉及到表格容器尺寸变化或数据变化的情况调用此方法重新计算相关值
+    resize(changeInitIndex) {
+      // this.insideTableData = [...this.value]
+      this.$nextTick(() => {
+        if (changeInitIndex)
+          this.insideTableData = this.setInitIndex(this.value);
+        else this.insideTableData = [...this.value];
+        this.initSort();
+        // this._initMountedHandle();
+      });
+      // this._tableResize();
+    },
+    // 获取表格横向滚动的距离
+    getScrollLeft() {
+      return this.$refs.outer.scrollLeft;
+    },
+    // 调用此方法跳转到某条数据
+    scrollToRow(row) {
+      this._scrollToIndexRow(row);
+    },
+    // canEdit为true时调用此方法使第row+1行第col+1列变为编辑状态，这里的行列指的是表格显示的行和除序列号列的列
+    editCell(row, col, scrollToView) {
+      this._editCell(row, col, scrollToView);
+    },
+    // canEdit为true时调用此方法使指定单元格被选中
+    selectCell(row, col) {
+      this._selectCell(row, col);
+    },
+    // 手动设置高亮行
+    setHighlightRow(row) {
+      this._setHighlightRow(row);
+    },
+    /**
+     * @argument {Number} col 要按哪一列筛选的列号
+     * @argument {Array} queryArr 筛选关键字数组
+     * @description 按照某一列的指定关键词进行筛选
+     */
+    filter(col, queryArr) {
+      this._filter(col, queryArr);
+    },
+    /**
+     * @description 取消筛选
+     */
+    cancelFilter() {
+      this._cancelFilter();
+    },
+    undo() {
+      this._undo();
+    },
+    /**
+     * @description 清除高亮项目
+     */
+    clearCurrentRow() {
+      this._clearCurrentRow();
+    },
+    /**
+     * @description 获取指定行的初始行号
+     */
+    getInitRowIndexByIndex(row) {
+      return this._getInitRowIndexByIndex(row);
+    },
+    /**
+     * @description 获取指定初始行号的当前行号
+     */
+    getIndexByInitRowIndex(initRow) {
+      return this._getIndexByInitRowIndex(initRow);
+    }
+  },
+  watch: {
+    value() {
+      this.$nextTick(() => {
+        this.insideTableData = this.setInitIndex(this.value);
+        this.initSort();
+        this._initMountedHandle();
+      });
+    },
+    insideTableData() {
+      this._tableResize();
+    },
+    defaultSort() {
+      this.insideTableData = this.setInitIndex(this.value);
+      this._initMountedHandle();
+      this.resize();
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.insideTableData = this.setInitIndex(this.value);
+      this._initMountedHandle();
+      this.resize();
+    });
+  }
+};
+</script>
diff --git a/frontend/src/views/virtual/orders/cards.vue b/frontend/src/views/virtual/orders/cards.vue
index ec2db8ba..65aa8957 100644
--- a/frontend/src/views/virtual/orders/cards.vue
+++ b/frontend/src/views/virtual/orders/cards.vue
@@ -127,15 +127,14 @@
           </div>
         </Col>
         <Col offset="1" span="7">
-          <Table
+          <BTable
             ref="cardSelection"
-            :loading="cardLoading"
-            :columns="cardColumns"
             size="small"
+            :loading="cardLoading"
+            :columns="cardColumns2"
             :data="cards"
-            @on-selection-change="handleSelectCards"
-            height="450"
-          ></Table>
+            :height="449"
+          ></BTable>
         </Col>
       </Row>
     </div>
@@ -148,3 +147,14 @@
 </template>
 
 <script src="./js/cards.js"></script>
+
+<style scoped>
+>>> .ivu-modal {
+  top: 50px;
+}
+
+>>> .ivu-table {
+  font-size: 11px;
+}
+</style>
+
diff --git a/frontend/src/views/virtual/orders/js/cards.js b/frontend/src/views/virtual/orders/js/cards.js
index ce8f62d9..74499809 100644
--- a/frontend/src/views/virtual/orders/js/cards.js
+++ b/frontend/src/views/virtual/orders/js/cards.js
@@ -1,4 +1,7 @@
 export default {
+  components: {
+    BTable: resolve => require(['components/table'], resolve)
+  },
   props: {
     show: {
       type: Boolean,
@@ -20,13 +23,17 @@ export default {
         show: true
       },
       params: {
-        company_id: "",
-        package_id: "",
-        carrier_operator: "",
-        time: [],
-        used: 0,
-        sim: ""
+        company_id: '',
+        package_id: '',
+        carrier_operator: '',
+        time: [
+          this.moment().subtract('2', 'months').startOf('month').format('YYYY-MM-DD'),
+          this.moment().subtract('2', 'months').endOf('month').format('YYYY-MM-DD')
+        ],
+        used: '',
+        sim: ''
       },
+      showCards: [],
       orderColumns: [
         {
           width: 60,
@@ -96,52 +103,52 @@ export default {
         {
           title: "订单编号",
           key: "sn",
-          width: 200
+          width: 165
         },
 
         {
           title: "企业名称",
           key: "company_name",
-          width: 280
+          width: 210
         },
         {
           title: "运营商",
           key: "carrier_operator_name",
-          width: 90
+          width: 75
         },
         {
           title: "套餐名称",
           key: "package_name",
-          width: 180
+          width: 150
         },
         {
           title: "支付方式",
           key: "pay_channel_name",
-          width: 100
+          width: 90
         },
         {
           title: "订单卡量",
           key: "counts",
-          width: 100
+          width: 90
         },
         {
           title: "订单金额",
           key: "total_price",
-          width: 120
+          width: 100
         },
 
         {
           title: "订单时间",
           key: "order_at",
-          width: 170
+          width: 150
         },
         {
           title: "所需卡量",
           key: "",
-          width: 100
+          width: 90
         }
       ],
-      cardColumns: [
+      cardColumns2: [
         {
           width: 60,
           align: "center",
@@ -201,6 +208,11 @@ export default {
             });
           }
         },
+        {
+          title: "序号",
+          key: "_index",
+          width: 140
+        },
         {
           title: "SIM",
           key: "sim",
@@ -231,6 +243,87 @@ export default {
           key: "package_name",
           width: 200
         }
+      ],
+
+      cardColumns: [
+        {
+          width: 60,
+          align: 'center',
+          render: (h) => {
+            let value = false;
+            let indeterminate = false;
+
+            let select = this.selected.find(item => {
+              return item.id === this.order_id;
+            });
+
+            value = !!select;
+
+            indeterminate =
+              select &&
+              select.cards &&
+              select.cards.length !== this.cards.length;
+
+            return h("Checkbox", {
+              props: {
+                indeterminate: value && indeterminate,
+                value: value
+              },
+              on: {
+                input: value => {
+                  console.log(value);
+                }
+              }
+            });
+          },
+          cellRender: (h, context) => {
+            let value = !!context.value;
+
+            return h("Checkbox", {
+              props: {
+                value: value
+              },
+              on: {
+                input: value => {
+                  console.log(value);
+                }
+              }
+            });
+          }
+        },
+        {
+          title: "SIM",
+          width: 135,
+          align: 'center'
+        },
+        {
+          title: "状态",
+          width: 100,
+          align: 'center',
+          cellRender: (h, context) => {
+            return h(
+              "Tag", {
+                props: {
+                  color: context.value ? "error" : "primary"
+                }
+              },
+              context.value ? "已使用" : "未使用"
+            );
+          }
+        },
+        {
+          title: "数量",
+          width: 80,
+          align: 'center'
+        },
+        {
+          title: "VD企业",
+          width: 210
+        },
+        {
+          title: "VD套餐",
+          width: 150
+        }
       ]
     };
   },
@@ -297,6 +390,17 @@ export default {
         this.$store
           .dispatch("getCards", params)
           .then(cards => {
+            this.showCards = cards.map(item => {
+              return [
+                false,
+                item.sim,
+                item.virtual_order_id ? 1 : 0,
+                item.counts,
+                item.virtual ? item.virtual.company_name : '',
+                item.virtual ? item.virtual.package_name : ''
+              ];
+            });
+
             this.cardLoading = false;
             resolve(cards);
           })
@@ -316,12 +420,13 @@ export default {
     },
     resetSearch() {
       for (let k in this.params) {
-        if (k === "time") {
-          this.params[k] = [];
-        } else if (k === "used") {
-          this.params[k] = 0;
+        if (k === 'time') {
+          this.params[k] = [
+            this.moment().subtract('2', 'months').startOf('month').format('YYYY-MM-DD'),
+            this.moment().subtract('2', 'months').endOf('month').format('YYYY-MM-DD')
+          ];
         } else {
-          this.params[k] = "";
+          this.params[k] = '';
         }
       }
       this.index(1);
@@ -335,15 +440,20 @@ export default {
             cards: cards
           };
 
-          this.cards = this.cards.map(item => {
-            item._checked = true;
+          this.showCards = this.showCards.map(item => {
+            item[0] = true;
             return item;
           });
 
-          this.$store.commit("PUSH_REAL_ORDER_SELECTED", obj);
+          this.$store.commit('PUSH_REAL_ORDER_SELECTED', obj);
         });
       } else {
-        this.$store.commit("REMOVE_REAL_ORDER_SELECTED", row.id);
+        this.showCards = this.showCards.map(item => {
+          item[0] = false;
+          return item;
+        });
+
+        this.$store.commit('REMOVE_REAL_ORDER_SELECTED', row.id);
       }
     },
     handleSelectCards(t, a, b) {
diff --git a/frontend/src/views/virtual/orders/js/edit.js b/frontend/src/views/virtual/orders/js/edit.js
index 93ea231c..b6c60bdf 100644
--- a/frontend/src/views/virtual/orders/js/edit.js
+++ b/frontend/src/views/virtual/orders/js/edit.js
@@ -144,6 +144,9 @@ export default {
         this.params[k] = '';
       }
 
+      this.params.unit_price = 0;
+      this.params.counts = 0;
+      this.params.area = [];
       this.my_show = false;
     },
     handleChange(type) {
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index 09efd1a2..f840ae7e 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -10,6 +10,7 @@ module.exports = {
   lintOnSave: true,
   chainWebpack: config => {
     config.resolve.alias
+      .set('node_modules', resolve('node_modules'))
       .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
       .set('src', resolve('src'))
       .set('views', resolve('src/views'))
diff --git a/tests/SchemaTest.php b/tests/SchemaTest.php
index 80ab7075..464b7e70 100644
--- a/tests/SchemaTest.php
+++ b/tests/SchemaTest.php
@@ -1,13 +1,20 @@
 <?php
 
+use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Schema;
 use Illuminate\Database\Schema\Blueprint;
 
 require_once realpath(dirname(__FILE__) . '/TestCase.php');
 
-Schema::dropIfExists('real_order_cards_table_partition');
+DB::table('virtual_orders')->truncate();
 
-Schema::create('real_order_cards_table_partition', function (Blueprint $table) {
+DB::table('virtual_order_cards_partition')->truncate();
+
+dd();
+
+Schema::dropIfExists('real_order_cards_partition');
+
+Schema::create('real_order_cards_partition', function (Blueprint $table) {
     $table->increments('id')->comment('关联表ID');
     $table->tinyInteger('type')->unsigned()->default(0)->comment('订单类型（1:套餐续费 2：续费包 3:加油包 4:可选包 5:附加包）');
     $table->bigInteger('sim')->unsigned()->default(0)->comment('sim号');