diff --git a/web/src/js/component/table/index.js b/web/src/js/component/table/index.js
index 350c6b1a73..5def7449c0 100644
--- a/web/src/js/component/table/index.js
+++ b/web/src/js/component/table/index.js
@@ -15,7 +15,7 @@
  *
  */
 
-import WeTable from './table.vue';
+import WeTable from './resultTable/table.vue';
 import historyTable from './historyTable/historyTable.vue';
 
 export default { WeTable,
diff --git a/web/src/js/component/table/resultTable/body.vue b/web/src/js/component/table/resultTable/body.vue
new file mode 100644
index 0000000000..502a4aa3f2
--- /dev/null
+++ b/web/src/js/component/table/resultTable/body.vue
@@ -0,0 +1,285 @@
+<template>
+  <div>
+    <div class="list-view-phantom" :style="{
+      width: contentWidth + 'px'
+    }">
+    </div>
+    <div ref="content" class="list-view-content" :class="{ header:type === 'header' }">
+      <div class="list-view-item" :style="{
+        width: sizeAndOffsetCahce[startIndex + index].size + 'px'
+      }" v-for="(col, index) in visibleData" :key="index">
+        <slot :col="col" :index="index"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    cache: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    isListenScroll: {
+      type: Boolean,
+      default: false,
+    },
+    data: {
+      type: Array,
+      required: true,
+    },
+
+    estimatedItemSize: {
+      type: Number,
+      default: 30,
+    },
+
+    itemSizeGetter: {
+      type: Function,
+    },
+    header: {
+      type: Array,
+      default: () => [],
+    },
+    type: String,
+  },
+
+  data() {
+    return {
+      viewWidth: 0,
+      lastMeasuredIndex: -1,
+      startIndex: 0,
+      sizeAndOffsetCahce: {},
+      visibleData: [],
+      ops: {
+        bar: {
+          background: 'rgb(24, 144, 255)',
+          keepShow: true,
+          minSize: 0.1,
+        },
+        rail: {
+          border: '1px solid #cecece',
+          size: '20px',
+        },
+        scrollButton: {
+          enable: true,
+          background: '#cecece',
+        },
+      },
+      cacheVH: {
+        v: {},
+        h: {
+          scrollLeft: 0,
+        },
+      },
+      isDivideWidth: false,
+      divideWidth: 0,
+    };
+  },
+  computed: {
+    contentWidth() {
+      const {
+        data,
+        lastMeasuredIndex,
+        estimatedItemSize
+      } = this;
+      let itemCount = data.length;
+      if (lastMeasuredIndex >= 0) {
+        const lastMeasuredSizeAndOffset = this.getLastMeasuredSizeAndOffset();
+        return lastMeasuredSizeAndOffset.offset + lastMeasuredSizeAndOffset.size + (itemCount - 1 -
+            lastMeasuredIndex) * estimatedItemSize;
+      } else {
+        return itemCount * estimatedItemSize;
+      }
+    },
+  },
+  watch: {
+    data: {
+      handler() {
+        this.resize();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.setItemWidth();
+  },
+  methods: {
+    setItemWidth(isDataChange) {
+      this.viewWidth = this.$refs.content.clientWidth;
+      let count = 0;
+      this.header.forEach((item, index) => {
+        count += this.getItemSizeAndOffset(this.startIndex + index).size;
+      });
+      // 如果所有已分配宽度的列宽度和小于表格的宽度，就使用等比宽度
+      if (count && count <= this.viewWidth) {
+        this.isDivideWidth = true;
+        this.divideWidth = this.viewWidth / this.header.length;
+        let offset = 0;
+        for (const i in this.sizeAndOffsetCahce) {
+          if (this.sizeAndOffsetCahce.hasOwnProperty(i)) {
+            this.sizeAndOffsetCahce[i] = {
+              size: this.divideWidth,
+              offset,
+            };
+            this.cache[i] = this.divideWidth;
+            offset += this.divideWidth;
+          }
+        }
+      }
+      if (isDataChange) {
+        let {
+          v,
+          h
+        } = this.cacheVH;
+        this.handleScroll(v, h);
+      } else {
+        this.updateVisibleData();
+      }
+    },
+    getItemSizeAndOffset(index) {
+      const {
+        lastMeasuredIndex,
+        sizeAndOffsetCahce,
+        data,
+        itemSizeGetter,
+        header
+      } = this;
+      if (lastMeasuredIndex >= index) {
+        return sizeAndOffsetCahce[index];
+      }
+      let offset = 0;
+      if (lastMeasuredIndex >= 0) {
+        const lastMeasured = sizeAndOffsetCahce[lastMeasuredIndex];
+        if (lastMeasured) {
+          offset = lastMeasured.offset + lastMeasured.size;
+        }
+      }
+      for (let i = lastMeasuredIndex + 1; i <= index; i++) {
+        let item = header[i];
+        let size;
+        if (this.isDivideWidth) {
+          size = this.divideWidth;
+          this.cache[i] = size;
+        } else {
+          if (this.cache[i]) {
+            size = this.cache[i];
+          } else {
+            size = itemSizeGetter.call(null, item, i);
+            this.cache[i] = size;
+          }
+        }
+        sizeAndOffsetCahce[i] = {
+          size,
+          offset,
+        };
+        offset += size;
+      }
+      if (index > lastMeasuredIndex) {
+        this.lastMeasuredIndex = index;
+      }
+      return sizeAndOffsetCahce[index];
+    },
+
+    getLastMeasuredSizeAndOffset() {
+      return this.lastMeasuredIndex >= 0 ? this.sizeAndOffsetCahce[this.lastMeasuredIndex] : {
+        offset: 0,
+        size: 0
+      };
+    },
+
+    findNearestItemIndex(scrollLeft) {
+      const {
+        data
+      } = this;
+      let total = 0;
+      for (let i = 0, j = data.length; i < j; i++) {
+        const size = this.getItemSizeAndOffset(i).size;
+        total += size;
+        if (total >= scrollLeft || i === j - 1) {
+          return i;
+        }
+      }
+
+      return 0;
+    },
+
+    updateVisibleData(scrollLeft) {
+      let canScrollWidth = this.contentWidth - this.viewWidth;
+      scrollLeft = scrollLeft || 0;
+      if (scrollLeft > canScrollWidth) {
+        scrollLeft = canScrollWidth;
+      }
+      const start = this.findNearestItemIndex(scrollLeft);
+      const end = this.findNearestItemIndex(scrollLeft + (this.$el.clientWidth || 1400));
+      this.visibleData = this.data.slice(start, Math.min(end + 3, this.data.length));
+      this.startIndex = start;
+      this.$refs.content.style.webkitTransform = `translate3d(${this.getItemSizeAndOffset(start).offset}px, 0, 0)`;
+    },
+
+    handleScroll(v, h) {
+      const {
+        scrollLeft
+      } = h;
+      this.cacheVH = {
+        v,
+        h
+      };
+      this.$emit('on-scroll', {
+        v,
+        h
+      });
+      this.updateVisibleData(scrollLeft);
+    },
+
+    resize() {
+      this.reset();
+      this.setItemWidth(true);
+    },
+
+    reset() {
+      this.viewWidth = 0;
+      this.lastMeasuredIndex = -1;
+      this.startIndex = 0;
+      this.sizeAndOffsetCahce = {};
+      this.visibleData = [];
+      this.isDivideWidth = false;
+      this.divideWidth = 0;
+    },
+  },
+  beforeDestroy(){
+
+  }
+};
+
+</script>
+<style>
+  .list-view-phantom {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    z-index: -1;
+    height: 100%;
+  }
+
+  .list-view-content {
+    display: flex;
+    left: 0;
+    right: 0;
+    top: 0;
+    position: absolute;
+    height: 100%;
+  }
+
+  .list-view-item {
+    height: 100%;
+    color: #666;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    text-align: center;
+  }
+
+</style>
diff --git a/web/src/js/component/table/resultTable/header.vue b/web/src/js/component/table/resultTable/header.vue
new file mode 100644
index 0000000000..f8bfc2fec5
--- /dev/null
+++ b/web/src/js/component/table/resultTable/header.vue
@@ -0,0 +1,128 @@
+<template>
+  <div
+    class="list-view list-header"
+    ref="list">
+    <list-body
+      ref="body"
+      :cache="cache"
+      :item-size-getter="itemSizeGetter"
+      :estimated-item-size="30"
+      :data="data"
+      :header="data"
+      type="header">
+      <template
+        slot-scope="{col, index}">
+        <div
+          @click.stop="handleSortClick($event, {col, index})"
+          @dblclick.prevent.stop="handleDblClick(col)">
+          <span
+            class="we-table-header-content"
+            :title="col.columnType">{{ col.content }}</span>
+          <span
+            v-if="col.sortable"
+            class="caret-wrapper">
+            <i
+              :class="computeSortClass(col, 'ascending')"
+              @click.stop="handleSortClick($event, {col, index}, 'ascending')"/>
+            <i
+              :class="computeSortClass(col, 'descending')"
+              @click.stop="handleSortClick($event, {col, index}, 'descending')"/>
+          </span>
+        </div>
+      </template>
+    </list-body>
+  </div>
+</template>
+<script>
+import listBody from './body.vue';
+const prefixCls = 'we-table';
+export default {
+  components: {
+    listBody,
+  },
+  props: {
+    cache: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    isListenScroll: {
+      type: Boolean,
+      default: false,
+    },
+    data: {
+      type: Array,
+      required: true,
+    },
+
+    estimatedItemSize: {
+      type: Number,
+      default: 30,
+    },
+
+    itemSizeGetter: {
+      type: Function,
+    },
+  },
+
+  data() {
+    return {
+      sort: {
+        sorting: false,
+        column: null,
+        type: 'normal',
+        start: 0,
+      },
+      dblClickTimer: null,
+    };
+  },
+  methods: {
+    computeSortClass(currentHead, type) {
+      return [
+        `${prefixCls}-sort-caret`,
+        type,
+        {
+          [`${prefixCls}-sort`]: (this.sort.column === currentHead && this.sort.type === type),
+        },
+      ];
+    },
+    handleScroll(v, h) {
+      this.$refs.body.handleScroll(v, h);
+    },
+    // sorting 中不允许再点击
+    // nextTick更新视图
+    // deepFreeze
+    // 如果是已经当前的排序不需要再重排, 1.记录当前排序列，当前的排序方向 2.如果是normal，如果下一次点击还是normal状态就不需要管了
+    // lastScrollLeft不用频繁读取dom节点left
+    handleSortClick(event, { col, index }, sortOrder) {
+      clearTimeout(this.dblClickTimer);
+      this.dblClickTimer = setTimeout(() => {
+        const sortType = sortOrder || 'normal';
+        if (this.sort.sorting && !col.sortable) return;
+        if ((sortType === 'normal' && this.sort.type === 'normal') ||
+        (this.sort.column === col && this.sort.type === sortType)) return;
+        this.sort.sorting = true;
+        this.sort.type = sortType;
+        this.sort.column = col;
+        let reverse = 0;
+        if (sortType !== 'normal') {
+          reverse = sortType === 'descending' ? -1 : 1;
+        }
+        this.$emit('sort-click', {
+          reverse,
+          col,
+          colIndex: index,
+          cb: () => {
+            this.sort.sorting = false;
+          },
+        });
+      }, 300);
+    },
+    handleDblClick(col) {
+      clearTimeout(this.dblClickTimer);
+      this.$emit('dbl-click', col);
+    },
+  },
+};
+</script>
diff --git a/web/src/js/component/table/resultTable/list.vue b/web/src/js/component/table/resultTable/list.vue
new file mode 100644
index 0000000000..aab7cf4e1e
--- /dev/null
+++ b/web/src/js/component/table/resultTable/list.vue
@@ -0,0 +1,102 @@
+<template>
+  <div
+    class="list-view"
+    ref="list">
+    <vuescroll
+      ref="vuescroll"
+      :ops="ops"
+      @handle-scroll="handleScroll">
+      <list-body
+        ref="body"
+        :cache="cache"
+        :item-size-getter="itemSizeGetter"
+        :estimated-item-size="30"
+        :data="data"
+        :header="header"
+        @active="changeActive"
+        type="body">
+        <div
+          slot-scope="{col}">
+          <div
+            v-for="(content, contentIndex) in col"
+            :title="content || contentIndex"
+            :key="contentIndex"
+            class="we-column-item"
+            :class="{'null-text': content === 'NULL', 'active': contentIndex === activeRowIndex}"
+            @click.stop="columnItemClick(contentIndex)">
+            <span class="we-column-item-content">{{ content }}</span>
+          </div>
+        </div>
+      </list-body>
+    </vuescroll>
+  </div>
+</template>
+<script>
+import listBody from './body.vue';
+import vuescroll from 'vuescroll/dist/vuescroll-native';
+export default {
+  components: {
+    vuescroll,
+    listBody,
+  },
+  props: {
+    cache: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    data: {
+      type: Array,
+      required: true,
+    },
+    header: {
+      type: Array,
+      required: true,
+    },
+
+    estimatedItemSize: {
+      type: Number,
+      default: 30,
+    },
+
+    itemSizeGetter: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      ops: {
+        bar: {
+          background: '#cdcdcd',
+          keepShow: true,
+          minSize: 0.05,
+        },
+        rail: {
+          size: '10px',
+          opacity: 1,
+          background: '#fff',
+        },
+        scrollButton: {
+          enable: true,
+          background: '#cecece',
+        },
+      },
+      activeRowIndex: null,
+    };
+  },
+  methods: {
+    handleScroll(v, h) {
+      this.$emit('on-scroll', { v, h });
+      this.$refs.body.handleScroll(v, h);
+    },
+    columnItemClick(index) {
+      this.activeRowIndex = index;
+      this.$emit('on-click', index);
+    },
+    changeActive() {
+      this.activeRowIndex = null;
+    }
+  },
+};
+</script>
diff --git a/web/src/js/component/table/resultTable/table.vue b/web/src/js/component/table/resultTable/table.vue
new file mode 100644
index 0000000000..faa5693b04
--- /dev/null
+++ b/web/src/js/component/table/resultTable/table.vue
@@ -0,0 +1,188 @@
+<template>
+  <div
+    ref="table"
+    :style="style"
+    class="we-table">
+    <div class="we-table-outflow">
+      <div
+        class="we-table-header">
+        <template-header
+          @sort-click="handleSortClick"
+          @dbl-click="handleDblClick"
+          ref="headerCom"
+          class="header-list"
+          :cache="cache"
+          :item-size-getter="itemSizeGetter"
+          :estimated-item-size="30"
+          :data="headRows">
+        </template-header>
+      </div>
+      <div
+        ref="tableBody"
+        class="we-table-body">
+        <template-list
+          ref="bodyCom"
+          :cache="cache"
+          :is-listen-scroll="true"
+          @on-scroll="changeScrollLeft"
+          :item-size-getter="itemSizeGetter"
+          :estimated-item-size="30"
+          :data="bodyRows"
+          :header="headRows"
+          @on-click="onColumnClick">
+        </template-list>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import templateList from './list.vue';
+import templateHeader from './header.vue';
+
+const prefixCls = 'we-table';
+export default {
+  name: prefixCls,
+  components: {
+    templateList,
+    templateHeader,
+  },
+  props: {
+    data: Object,
+    width: Number,
+    height: Number,
+    variable: [Function],
+    maxColumn: {
+      type: Number,
+      default: 50,
+    },
+    offsetX: {
+      type: Number,
+      default: 0,
+    },
+    offsetY: {
+      type: Number,
+      default: 0,
+    },
+    needReset: Boolean,
+  },
+  data() {
+    return {
+      cache: {},
+      sort: {
+        sorting: false,
+        column: null,
+        type: 'normal',
+        start: 0,
+      },
+      bodyRows: [],
+      headRows: [],
+      originRows: [],
+      onscroll() { },
+      dTag: false,
+    };
+  },
+  computed: {
+    style() {
+      const style = {
+      };
+      if (this.width) {
+        // style.width = this.width + 'px';
+      }
+      if (this.height) {
+        style.height = this.height + 'px';
+      }
+      return style;
+    },
+  },
+  watch: {
+    'data': {
+      handler(val) {
+        this.resize();
+        this.headRows = Object.freeze(val.headRows);
+        this.originRows = Object.freeze(val.originRows);
+        this.bodyRows = this.revert(val.bodyRows);
+        if (this.needReset && this.$refs.bodyCom && this.$refs.bodyCom.$refs.body) {
+          this.$nextTick(() => {
+            // 在切换路由时重置滚动条和重置表格显示数据到初始位置
+            this.$refs.bodyCom.$refs.body.updateVisibleData(0);
+            this.changeScrollLeft({ v: 0, h: 0 });
+            this.$refs.bodyCom.$refs.list.scrollLeft = 0;
+            // 这里的原有逻辑是显示的数据是切换路由前的数据，但滚动条已经回到初始位置了
+            // 尝试过将滚动条设置到切换前的位置，但不生效
+            // const cacheVH = this.$refs.bodyCom.$refs.body.cacheVH;
+            // this.$refs.headerCom.$refs.list.scrollBy(cacheVH.h.scrollLeft, cacheVH.v.scrollTop);
+            this.$emit('change-status');
+          });
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+
+  },
+  mounted() {
+  },
+  methods: {
+    changeScrollLeft({ v, h }) {
+      this.$refs.headerCom.$refs.list.scrollLeft = h.scrollLeft;
+      this.$refs.headerCom.handleScroll(v, h);
+    },
+    itemSizeGetter(item, i) {
+      let div = document.createElement('div');
+      document.body.appendChild(div);
+      div.style.paddingLeft = '20px';
+      div.style.paddingRight = '54px';
+      div.style.position = 'absolute';
+      div.style.top = '-9999px';
+      div.style.left = '-9999px';
+      div.innerHTML = item.content;
+      let width = div.offsetWidth;
+      document.body.removeChild(div);
+      this.cache[i] = width;
+      return width;
+    },
+    revert(data) {
+      let newData = [];
+      let firstRowLen = data[0] ? data[0].length : 0;
+      for (let i = 0; i < firstRowLen; i++) {
+        newData[i] = [];
+        for (let j = 0; j < data.length; j++) {
+          newData[i][j] = data[j][i];
+        }
+      }
+      return newData;
+    },
+    computeSortClass(currentHead, type) {
+      return [
+        `${prefixCls}-sort-caret`,
+        type,
+        {
+          [`${prefixCls}-sort`]: (this.sort.column === currentHead && this.sort.type === type),
+        },
+      ];
+    },
+    handleSortClick(args) {
+      this.$emit('handleSortClick', args);
+    },
+    handleDblClick(col) {
+      this.$emit('dbl-click', col);
+    },
+    onColumnClick(index) {
+      this.$emit('on-click', index);
+    },
+    resize() {
+      this.cache = {};
+    }
+  },
+};
+</script>
+<style lang="scss" src="../index.scss"></style>
+<style>
+.list-view {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+  color: #333;
+}
+</style>
diff --git a/web/src/js/module/hiveSidebar/hiveSidebar.vue b/web/src/js/module/hiveSidebar/hiveSidebar.vue
index 4479c4d27b..2edfe52691 100644
--- a/web/src/js/module/hiveSidebar/hiveSidebar.vue
+++ b/web/src/js/module/hiveSidebar/hiveSidebar.vue
@@ -307,8 +307,8 @@ export default {
       this.dispatch('Workbench:pasteInEditor', value, this.node);
     },
     queryTable() {
-      const tabName = `${this.currentAcitved.dbName}.${this.currentAcitved.name}`;
-      const code = `select * from ${tabName} limit 100`;
+      const tabName = `${this.currentAcitved.dbName}_${this.currentAcitved.name}`;
+      const code = `select * from ${this.currentAcitved.dbName}.${this.currentAcitved.name} limit 100`;
       const filename = `${tabName}_select.hql`;
       const md5Path = util.md5(filename);
       this.dispatch('Workbench:add', {
diff --git a/web/src/js/module/process/module.vue b/web/src/js/module/process/module.vue
index 5b734c3bbd..06846caa42 100644
--- a/web/src/js/module/process/module.vue
+++ b/web/src/js/module/process/module.vue
@@ -797,7 +797,7 @@ export default {
               'msgName': '',
               'queryFrequency': 10,
               'maxReceiveHours': 12,
-              'msgSavekey': '',
+              'msgSavekey': 'msg.body',
               'onlyReceiveToday': 'true',
             },
           });
@@ -1635,7 +1635,7 @@ export default {
         const fileName = `${time.getTime()}${match.ext}`;
         const params = {
           fileName,
-          scriptContent: rst.fileContent,
+          scriptContent: rst.fileContent[0][0],
           metadata: rst.params,
         };
         api.fetch('/filesystem/saveScriptToBML', params, 'post')
diff --git a/web/src/js/module/workbench/container.vue b/web/src/js/module/workbench/container.vue
index 64c7dd8e2f..68773e0067 100644
--- a/web/src/js/module/workbench/container.vue
+++ b/web/src/js/module/workbench/container.vue
@@ -441,13 +441,13 @@ export default {
       api.fetch('/filesystem/openFile', {
         path: option.path,
       }, 'get').then((rst) => {
-        const ismodifyByOldTab = option.code && !rst.fileContent;
+        const ismodifyByOldTab = option.code && !rst.fileContent[0][0];
         const params = ismodifyByOldTab ? option.params : this.convertSettingParams(rst.params);
         this[methodName]({
           id: md5Path,
           filename: option.filename,
           filepath: option.path,
-          code: rst.fileContent || option.code,
+          code: rst.fileContent[0][0] || option.code,
           params,
           type: option.type,
           saveAs: option.saveAs || false,
diff --git a/web/src/js/module/workbench/script/result.vue b/web/src/js/module/workbench/script/result.vue
index 30c0458a87..b0b6842d10 100644
--- a/web/src/js/module/workbench/script/result.vue
+++ b/web/src/js/module/workbench/script/result.vue
@@ -36,6 +36,7 @@
           :height="tableData.height"
           :columns="data.headRows"
           :data="data.bodyRows"
+          @on-sort-change="sortChange"
           @on-current-change="onRowClick"
           class="result-normal-table">
         </Table>
@@ -58,7 +59,8 @@
           @on-scroll="saveOffset"
           @dbl-click="copyLabel"
           @on-click="onWeTableRowClick"
-          @change-status="changeStatus"/>
+          @change-status="changeStatus"
+          @handleSortClick="handleSortClick"/>
         <we-water-mask
           v-if="isWaterMask"
           :text="watermaskText"
@@ -78,7 +80,7 @@
       v-else-if="result.type === '5'"
       :style="{'height': resultHeight}"
       class="html-result-div"
-      v-html="result.bodyRows"/>
+      v-html="result.bodyRows[0][0]"/>
     <span
       v-else
       class="empty-text">{{ $t('message.workBench.body.script.result.emptyText') }}</span>
@@ -111,6 +113,7 @@ import WeWaterMask from '@js/component/watermark';
 import WeToolbar from './toolbar.vue';
 import elementResizeEvent from '@js/helper/elementResizeEvent';
 import resultSetList from './resultSetList.vue';
+import pinyin from 'pinyin';
 export default {
   components: {
     WeTable: Table.WeTable,
@@ -243,6 +246,146 @@ export default {
     'Workbench:setParseAction'(id) {
       this.resize();
     },
+    handleSortClick(args) {
+      let { reverse,col, colIndex, cb } = args;
+      let order = 'normal';
+      if (args.reverse === -1) {
+        order = 'desc'
+      } else if (args.reverse === 1) {
+        order = 'asc'
+      }
+      // 先通过表头的内容找到对应全数据数据的index
+      let sortIndex
+      this.data.headRows.map((head, index) => {
+        if (head.content === col.content) {
+          sortIndex = index
+        }
+      })
+      // 大于50列排序现将要排序的列和原始index保持
+      let sortColumnAll = this.originRows.map((row, index) => {
+        return {
+          originIndex: index,
+          value: row[sortIndex]
+        }
+      })
+      // 将找出的列排序
+      sortColumnAll = this.arraySortByName(sortColumnAll, col.columnType, 'value');// 从小到大
+      let newRow = [];
+      if (order === 'asc') {// 升序
+        sortColumnAll.map((item, index) => {
+          newRow[index] = this.originRows[item.originIndex];
+        })
+        this.originRows = newRow;
+      } else if (order === 'desc') {// 降序
+        sortColumnAll.reverse();
+        sortColumnAll.map((item, index) => {
+          newRow[index] = this.originRows[item.originIndex];
+        })
+        this.originRows = newRow;
+      } else if (order === 'normal') {// 恢复原来数据
+        this.originRows = this.result.bodyRows || [];
+        this.data.originRows = this.originRows;
+      }
+      this.pageingData();
+    },
+    addCellClassName() {
+      // 需要将每一行中的NULL挑选出来
+      if (this.tableData.type === 'normal') {
+        this.originRows = this.originRows.map((row) => {
+          row.cellClassName = {};
+          Object.keys(row).forEach((key)=> {
+            if (row[key] === 'NULL') {
+              row.cellClassName[key] = 'is-null';
+            }
+          })
+          return row;
+        })
+      }
+    },
+    sortChange({column, key, order}) {
+      this.originRows = this.arraySortByName(this.originRows, column.columnType, key);// 从小到大
+      if (order === 'asc') {// 升序
+        this.addCellClassName();
+      } else if (order === 'desc') {// 降序
+        this.originRows.reverse();
+        this.addCellClassName();
+      } else if (order === 'normal') {// 恢复原来数据
+        if (this.tableData.type === 'normal') {
+          this.originRows = this.result.bodyRows.map((row) => {
+            let newItem = {};
+            const NullList = [];
+            row.forEach((item, index) => {
+              Object.assign(newItem, {
+                [this.result.headRows[index]]: item,
+              });
+              if (item === 'NULL') {
+                NullList.push(this.result.headRows[index]);
+              }
+            });
+            // 对于NULL值加上高亮样式
+            if (NullList.length) {
+              newItem.cellClassName = {};
+              NullList.forEach((item) => {
+                newItem.cellClassName[item] = 'is-null';
+              });
+            }
+            return newItem;
+          });
+        } else {
+          this.originRows = this.result.bodyRows || [];
+        }
+        this.data.originRows = this.originRows;
+      }
+      this.pageingData();
+    },
+    arraySortByName(list, valueType, key) {
+      if (list === undefined || list === null) return [];
+      list.sort((a, b) => {
+        let strA = a[key];
+        let strB = b[key];
+        // 谁为非法值谁在前面
+        if (strA === undefined || strA === null || strA === '' || strA === ' ' || strA === '　' || strA === 'NULL') {
+          return -1;
+        }
+        if (strB === undefined || strB === null || strB === '' || strB === ' ' || strB === '　' || strB === 'NULL') {
+          return 1;
+        }
+        // 如果为整数型大小
+        if (['int', 'float', 'double', 'long', 'short', 'bigInt', 'decimal'].includes(valueType.toLowerCase())) {
+
+          return strA - strB;
+        }
+        const charAry = strA.split('');
+        for (const i in charAry) {
+          if ((this.charCompare(strA[i], strB[i]) !== 0)) {
+            return this.charCompare(strA[i], strB[i]);
+          }
+        }
+        // 如果通过上面的循环对比还比不出来，就无解了，直接返回-1
+        return -1;
+      });
+      return list;
+    },
+    charCompare(charA, charB) {
+      // 谁为非法值谁在前面
+      if (charA === undefined || charA === null || charA === '' || charA === ' ' || charA === '　') {
+        return -1;
+      }
+      if (charB === undefined || charB === null || charB === '' || charB === ' ' || charB === '　') {
+        return 1;
+      }
+      if (!this.notChinese(charA)) {
+        charA = pinyin(charA)[0][0];
+      }
+      if (!this.notChinese(charB)) {
+        charB = pinyin(charB)[0][0];
+      }
+      return charA.localeCompare(charB);
+    },
+    notChinese(char) {
+      const charCode = char.charCodeAt(0);
+      return charCode >= 0 && charCode <= 128;
+    },
     initOffset() {
       let cache = this.script.result.cache;
       let x = 0;
@@ -279,6 +422,7 @@ export default {
         let headRows = this.result.headRows || [];
         this.data.headRows = [];
         this.data.bodyRows = [];
+
         this.originRows = this.result.bodyRows || [];
         this.tableData.total = this.result.total;
         if (this.tableData.type === 'normal') {
@@ -289,10 +433,7 @@ export default {
             this.data.headRows.push({
               title,
               key: item,
-              sortable: 'true',
-              sortMethod: function(a, b, type) {
-                return util.sort(a, b, type);
-              },
+              sortable: 'custom',
               columnType,
               renderHeader: (h, params) => {
                 return h('span', {
@@ -362,7 +503,7 @@ export default {
         this.data.bodyRows = newArr;
       }
     },
-    change(page) {
+    change(page = 1) {
       this.hightLightRow = null;
       this.page.current = page;
       this.pageingData();