vxe-table 3.12.10-beta.2 → 3.12.10-beta.21

package/lib/table/src/props.js

@@ -37,10 +37,10 @@ var _default = exports.default = {
     type: [Boolean, String],
     default: () => getConfig().table.border
   },
-  // 单元格是否有边距
+  // 已废弃，被 cell-config.padding 替换
   padding: {
     type: Boolean,
-    default: () => getConfig().table.padding
+    default: null
   },
   // 是否圆角边框
   round: {
@@ -186,6 +186,10 @@ var _default = exports.default = {
   columnConfig: Object,
   // 单元格配置信息
   cellConfig: Object,
+  // 表头单元格配置信息
+  headerCellConfig: Object,
+  // 表尾单元格配置信息
+  footerCellConfig: Object,
   // 行配置信息
   rowConfig: Object,
   // 已废弃，被 rowDragConfig 替换

package/lib/table/src/props.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _ui=require("../../ui");let getConfig=_ui.VxeUI.getConfig;var _default=exports.default={id:[String,Function],data:Array,height:[Number,String],minHeight:{type:[Number,String],default:()=>getConfig().table.minHeight},maxHeight:[Number,String],resizable:{type:Boolean,default:()=>getConfig().table.resizable},stripe:{type:Boolean,default:()=>getConfig().table.stripe},border:{type:[Boolean,String],default:()=>getConfig().table.border},padding:{type:Boolean,default:()=>getConfig().table.padding},round:{type:Boolean,default:()=>getConfig().table.round},size:{type:String,default:()=>getConfig().table.size||getConfig().size},fit:{type:Boolean,default:()=>getConfig().table.fit},loading:Boolean,align:{type:String,default:()=>getConfig().table.align},headerAlign:{type:String,default:()=>getConfig().table.headerAlign},footerAlign:{type:String,default:()=>getConfig().table.footerAlign},showHeader:{type:Boolean,default:()=>getConfig().table.showHeader},highlightCurrentRow:{type:Boolean,default:()=>getConfig().table.highlightCurrentRow},highlightHoverRow:{type:Boolean,default:()=>getConfig().table.highlightHoverRow},highlightCurrentColumn:{type:Boolean,default:()=>getConfig().table.highlightCurrentColumn},highlightHoverColumn:{type:Boolean,default:()=>getConfig().table.highlightHoverColumn},highlightCell:Boolean,showFooter:Boolean,footerData:Array,footerMethod:Function,rowClassName:[String,Function],cellClassName:[String,Function],headerRowClassName:[String,Function],headerCellClassName:[String,Function],footerRowClassName:[String,Function],footerCellClassName:[String,Function],cellStyle:[Object,Function],headerCellStyle:[Object,Function],footerCellStyle:[Object,Function],rowStyle:[Object,Function],headerRowStyle:[Object,Function],footerRowStyle:[Object,Function],mergeCells:Array,mergeFooterItems:Array,spanMethod:Function,footerSpanMethod:Function,showOverflow:{type:[Boolean,String],default:()=>getConfig().table.showOverflow},showHeaderOverflow:{type:[Boolean,String],default:()=>getConfig().table.showHeaderOverflow},showFooterOverflow:{type:[Boolean,String],default:()=>getConfig().table.showFooterOverflow},columnKey:Boolean,rowKey:Boolean,rowId:{type:String,default:()=>getConfig().table.rowId},zIndex:Number,emptyText:{type:String,default:()=>getConfig().table.emptyText},keepSource:{type:Boolean,default:()=>getConfig().table.keepSource},autoResize:{type:Boolean,default:()=>getConfig().table.autoResize},syncResize:[Boolean,String,Number],resizeConfig:Object,columnConfig:Object,cellConfig:Object,rowConfig:Object,dragConfig:Object,rowDragConfig:Object,columnDragConfig:Object,resizableConfig:Object,seqConfig:Object,sortConfig:Object,filterConfig:Object,radioConfig:Object,checkboxConfig:Object,tooltipConfig:Object,exportConfig:[Boolean,Object],importConfig:[Boolean,Object],printConfig:Object,expandConfig:Object,treeConfig:[Boolean,Object],menuConfig:[Boolean,Object],contextMenu:[Boolean,Object],mouseConfig:Object,areaConfig:Object,keyboardConfig:Object,clipConfig:Object,fnrConfig:Object,editConfig:[Boolean,Object],validConfig:Object,editRules:Object,loadingConfig:Object,emptyRender:[Boolean,Object],customConfig:Object,scrollX:Object,scrollY:Object,virtualXConfig:Object,virtualYConfig:Object,scrollbarConfig:Object,animat:{type:Boolean,default:()=>getConfig().table.animat},delayHover:{type:Number,default:()=>getConfig().table.delayHover},params:Object};
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _ui=require("../../ui");let getConfig=_ui.VxeUI.getConfig;var _default=exports.default={id:[String,Function],data:Array,height:[Number,String],minHeight:{type:[Number,String],default:()=>getConfig().table.minHeight},maxHeight:[Number,String],resizable:{type:Boolean,default:()=>getConfig().table.resizable},stripe:{type:Boolean,default:()=>getConfig().table.stripe},border:{type:[Boolean,String],default:()=>getConfig().table.border},padding:{type:Boolean,default:null},round:{type:Boolean,default:()=>getConfig().table.round},size:{type:String,default:()=>getConfig().table.size||getConfig().size},fit:{type:Boolean,default:()=>getConfig().table.fit},loading:Boolean,align:{type:String,default:()=>getConfig().table.align},headerAlign:{type:String,default:()=>getConfig().table.headerAlign},footerAlign:{type:String,default:()=>getConfig().table.footerAlign},showHeader:{type:Boolean,default:()=>getConfig().table.showHeader},highlightCurrentRow:{type:Boolean,default:()=>getConfig().table.highlightCurrentRow},highlightHoverRow:{type:Boolean,default:()=>getConfig().table.highlightHoverRow},highlightCurrentColumn:{type:Boolean,default:()=>getConfig().table.highlightCurrentColumn},highlightHoverColumn:{type:Boolean,default:()=>getConfig().table.highlightHoverColumn},highlightCell:Boolean,showFooter:Boolean,footerData:Array,footerMethod:Function,rowClassName:[String,Function],cellClassName:[String,Function],headerRowClassName:[String,Function],headerCellClassName:[String,Function],footerRowClassName:[String,Function],footerCellClassName:[String,Function],cellStyle:[Object,Function],headerCellStyle:[Object,Function],footerCellStyle:[Object,Function],rowStyle:[Object,Function],headerRowStyle:[Object,Function],footerRowStyle:[Object,Function],mergeCells:Array,mergeFooterItems:Array,spanMethod:Function,footerSpanMethod:Function,showOverflow:{type:[Boolean,String],default:()=>getConfig().table.showOverflow},showHeaderOverflow:{type:[Boolean,String],default:()=>getConfig().table.showHeaderOverflow},showFooterOverflow:{type:[Boolean,String],default:()=>getConfig().table.showFooterOverflow},columnKey:Boolean,rowKey:Boolean,rowId:{type:String,default:()=>getConfig().table.rowId},zIndex:Number,emptyText:{type:String,default:()=>getConfig().table.emptyText},keepSource:{type:Boolean,default:()=>getConfig().table.keepSource},autoResize:{type:Boolean,default:()=>getConfig().table.autoResize},syncResize:[Boolean,String,Number],resizeConfig:Object,columnConfig:Object,cellConfig:Object,headerCellConfig:Object,footerCellConfig:Object,rowConfig:Object,dragConfig:Object,rowDragConfig:Object,columnDragConfig:Object,resizableConfig:Object,seqConfig:Object,sortConfig:Object,filterConfig:Object,radioConfig:Object,checkboxConfig:Object,tooltipConfig:Object,exportConfig:[Boolean,Object],importConfig:[Boolean,Object],printConfig:Object,expandConfig:Object,treeConfig:[Boolean,Object],menuConfig:[Boolean,Object],contextMenu:[Boolean,Object],mouseConfig:Object,areaConfig:Object,keyboardConfig:Object,clipConfig:Object,fnrConfig:Object,editConfig:[Boolean,Object],validConfig:Object,editRules:Object,loadingConfig:Object,emptyRender:[Boolean,Object],customConfig:Object,scrollX:Object,scrollY:Object,virtualXConfig:Object,virtualYConfig:Object,scrollbarConfig:Object,animat:{type:Boolean,default:()=>getConfig().table.animat},delayHover:{type:Number,default:()=>getConfig().table.delayHover},params:Object};

package/lib/table/src/table.js

@@ -185,7 +185,7 @@ const renderDragTip = (h, $xeTable) => {
   }
   return renderEmptyElement($xeTable);
 };
-function handleUupdateResize(_vm) {
+function handleUpdateResize(_vm) {
   const {
     $el
   } = _vm;
@@ -193,6 +193,120 @@ function handleUupdateResize(_vm) {
     _vm.recalculate();
   }
 }
+function renderScrollX(h, $xeTable) {
+  return h('div', {
+    key: 'vsx',
+    ref: 'refScrollXVirtualElem',
+    class: 'vxe-table--scroll-x-virtual'
+  }, [h('div', {
+    ref: 'refScrollXLeftCornerElem',
+    class: 'vxe-table--scroll-x-left-corner'
+  }), h('div', {
+    ref: 'refScrollXWrapperElem',
+    class: 'vxe-table--scroll-x-wrapper'
+  }, [h('div', {
+    ref: 'refScrollXHandleElem',
+    class: 'vxe-table--scroll-x-handle',
+    on: {
+      scroll: $xeTable.triggerVirtualScrollXEvent
+    }
+  }, [h('div', {
+    ref: 'refScrollXSpaceElem',
+    class: 'vxe-table--scroll-x-space'
+  })])]), h('div', {
+    ref: 'refScrollXRightCornerElem',
+    class: 'vxe-table--scroll-x-right-corner'
+  })]);
+}
+function renderScrollY(h, $xeTable) {
+  return h('div', {
+    ref: 'refScrollYVirtualElem',
+    class: 'vxe-table--scroll-y-virtual'
+  }, [h('div', {
+    ref: 'refScrollYTopCornerElem',
+    class: 'vxe-table--scroll-y-top-corner'
+  }), h('div', {
+    ref: 'refScrollYWrapperElem',
+    class: 'vxe-table--scroll-y-wrapper'
+  }, [h('div', {
+    ref: 'refScrollYHandleElem',
+    class: 'vxe-table--scroll-y-handle',
+    on: {
+      scroll: $xeTable.triggerVirtualScrollYEvent
+    }
+  }, [h('div', {
+    ref: 'refScrollYSpaceElem',
+    class: 'vxe-table--scroll-y-space'
+  })])]), h('div', {
+    ref: 'refScrollYBottomCornerElem',
+    class: 'vxe-table--scroll-y-bottom-corner'
+  })]);
+}
+function renderViewport(h, $xeTable) {
+  const props = $xeTable;
+  const reactData = $xeTable;
+  const {
+    showHeader,
+    showFooter
+  } = props;
+  const {
+    overflowX,
+    tableData,
+    tableColumn,
+    tableGroupColumn,
+    footerTableData,
+    columnStore
+  } = reactData;
+  const {
+    leftList,
+    rightList
+  } = columnStore;
+  return h('div', {
+    ref: 'refTableViewportElem',
+    class: 'vxe-table--viewport-wrapper'
+  }, [h('div', {
+    class: 'vxe-table--main-wrapper'
+  }, [
+  /**
+     * 表头
+     */
+  showHeader ? h(_header.default, {
+    ref: 'refTableHeader',
+    props: {
+      tableData,
+      tableColumn,
+      tableGroupColumn
+    }
+  }) : renderEmptyElement($xeTable),
+  /**
+     * 表体
+     */
+  h(_body.default, {
+    ref: 'refTableBody',
+    props: {
+      tableData,
+      tableColumn
+    }
+  }),
+  /**
+     * 表尾
+     */
+  showFooter ? h(_footer.default, {
+    ref: 'refTableFooter',
+    props: {
+      footerTableData,
+      tableColumn
+    }
+  }) : renderEmptyElement($xeTable)]), h('div', {
+    class: 'vxe-table--fixed-wrapper'
+  }, [leftList && leftList.length && overflowX ? renderFixed(h, $xeTable, 'left') : renderEmptyElement($xeTable), rightList && rightList.length && overflowX ? renderFixed(h, $xeTable, 'right') : renderEmptyElement($xeTable)])]);
+}
+function renderBody(h, $xeTable) {
+  const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft;
+  return h('div', {
+    class: 'vxe-table--layout-wrapper'
+  }, scrollbarYToLeft ? [renderScrollY(h, $xeTable), renderViewport(h, $xeTable)] : [renderViewport(h, $xeTable), renderScrollY(h, $xeTable)]);
+}
 var _default = exports.default = {
   name: 'VxeTable',
   mixins: [globalMixins.sizeMixin, _mixin.default, _mixin2.default, _mixin3.default, _mixin4.default, _mixin5.default, _mixin6.default, _mixin7.default],
@@ -219,8 +333,7 @@ var _default = exports.default = {
     const xID = _xeUtils.default.uniqueId();
     return {
       xID,
-      tId: `${_xeUtils.default.uniqueId()}`,
-      isCalcColumn: false,
+      tId: xID,
       // 低性能的静态列
       staticColumns: [],
       // 渲染的列分组
@@ -431,15 +544,19 @@ var _default = exports.default = {
         isFooter: false
       },
       scrollVMLoading: false,
-      isCalcCellHeight: 0,
+      calcCellHeightFlag: 0,
+      resizeHeightFlag: 0,
       isCustomStatus: false,
       isDragRowMove: false,
       dragRow: null,
       isDragColMove: false,
       dragCol: null,
       dragTipText: '',
-      _isResize: false,
-      isLoading: false
+      isDragResize: false,
+      isLoading: false,
+      reScrollFlag: 0,
+      reLayoutFlag: 0,
+      footFlag: 0
     };
   },
   computed: Object.assign(Object.assign({}, {}), {
@@ -506,6 +623,16 @@ var _default = exports.default = {
       const props = $xeTable;
       return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig);
     },
+    computeScrollbarXToTop() {
+      const $xeTable = this;
+      const scrollbarOpts = $xeTable.computeScrollbarOpts;
+      return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top');
+    },
+    computeScrollbarYToLeft() {
+      const $xeTable = this;
+      const scrollbarOpts = $xeTable.computeScrollbarOpts;
+      return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left');
+    },
     computeScrollYThreshold() {
       const $xeTable = this;
       const sYOpts = $xeTable.computeSYOpts;
@@ -532,7 +659,7 @@ var _default = exports.default = {
       const $xeTable = this;
       const vSize = $xeTable.computeSize;
       const rowHeightMaps = $xeTable.computeRowHeightMaps;
-      return rowHeightMaps[vSize || 'default'];
+      return rowHeightMaps[vSize || 'default'] || 18;
     },
     columnOpts() {
       return this.computeColumnOpts;
@@ -541,7 +668,19 @@ var _default = exports.default = {
       return Object.assign({}, getConfig().table.columnConfig, this.columnConfig);
     },
     computeCellOpts() {
-      return Object.assign({}, getConfig().table.cellConfig, this.cellConfig);
+      const $xeTable = this;
+      const props = $xeTable;
+      return Object.assign({}, getConfig().table.cellConfig, props.cellConfig);
+    },
+    computeHeaderCellOpts() {
+      const $xeTable = this;
+      const props = $xeTable;
+      return Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig);
+    },
+    computeFooterCellOpts() {
+      const $xeTable = this;
+      const props = $xeTable;
+      return Object.assign({}, getConfig().table.footerCellConfig, props.footerCellConfig);
     },
     rowOpts() {
       return this.computeRowOpts;
@@ -596,6 +735,20 @@ var _default = exports.default = {
     tipConfig() {
       return Object.assign({}, this.tooltipOpts);
     },
+    computeTableTipConfig() {
+      const $xeTable = this;
+      const reactData = $xeTable;
+      const {
+        tooltipStore
+      } = reactData;
+      const tooltipOpts = $xeTable.computeTooltipOpts;
+      return Object.assign({}, tooltipOpts, tooltipStore.currOpts);
+    },
+    computeValidTipConfig() {
+      const $xeTable = this;
+      const tooltipOpts = $xeTable.computeTooltipOpts;
+      return Object.assign({}, tooltipOpts);
+    },
     validTipOpts() {
       return Object.assign({
         isArrow: false
@@ -652,23 +805,55 @@ var _default = exports.default = {
       return Object.assign({}, getConfig().table.fnrConfig, this.fnrConfig);
     },
     headerCtxMenu() {
-      const headerOpts = this.ctxMenuOpts.header;
+      return this.computeHeaderMenu;
+    },
+    computeHeaderMenu() {
+      const $xeTable = this;
+      const menuOpts = $xeTable.computeMenuOpts;
+      const headerOpts = menuOpts.header;
       return headerOpts && headerOpts.options ? headerOpts.options : [];
     },
     bodyCtxMenu() {
-      const bodyOpts = this.ctxMenuOpts.body;
+      return this.computeBodyMenu;
+    },
+    computeBodyMenu() {
+      const $xeTable = this;
+      const menuOpts = $xeTable.computeMenuOpts;
+      const bodyOpts = menuOpts.body;
       return bodyOpts && bodyOpts.options ? bodyOpts.options : [];
     },
     footerCtxMenu() {
-      const footerOpts = this.ctxMenuOpts.footer;
+      return this.computeFooterMenu;
+    },
+    computeFooterMenu() {
+      const $xeTable = this;
+      const menuOpts = $xeTable.computeMenuOpts;
+      const footerOpts = menuOpts.footer;
       return footerOpts && footerOpts.options ? footerOpts.options : [];
     },
     isCtxMenu() {
-      return !!((this.contextMenu || this.menuConfig) && (0, _utils.isEnableConf)(this.ctxMenuOpts) && (this.headerCtxMenu.length || this.bodyCtxMenu.length || this.footerCtxMenu.length));
+      return this.computeIsMenu;
+    },
+    computeIsMenu() {
+      const $xeTable = this;
+      const props = $xeTable;
+      const menuOpts = $xeTable.computeMenuOpts;
+      const headerMenu = $xeTable.computeHeaderMenu;
+      const bodyMenu = $xeTable.computeBodyMenu;
+      const footerMenu = $xeTable.computeFooterMenu;
+      return !!((props.contextMenu || props.menuConfig) && (0, _utils.isEnableConf)(menuOpts) && (headerMenu.length || bodyMenu.length || footerMenu.length));
     },
     ctxMenuList() {
+      return this.computeMenuList;
+    },
+    computeMenuList() {
+      const $xeTable = this;
+      const reactData = $xeTable;
+      const {
+        ctxMenuStore
+      } = reactData;
       const rest = [];
-      this.ctxMenuStore.list.forEach(list => {
+      ctxMenuStore.list.forEach(list => {
         list.forEach(item => {
           rest.push(item);
         });
@@ -881,7 +1066,7 @@ var _default = exports.default = {
       if (value && value.length >= 50000) {
         (0, _log.warnLog)('vxe.error.errLargeData', ['loadData(data), reloadData(data)']);
       }
-      this.loadTableData(value || []).then(() => {
+      this.loadTableData(value || [], false).then(() => {
         this.inited = true;
         this.initStatus = true;
         if (!initStatus) {
@@ -909,33 +1094,50 @@ var _default = exports.default = {
     reColumnFlag() {
       this.$nextTick().then(() => this.refreshColumn());
     },
+    computeSize() {
+      this.reScrollFlag++;
+    },
     showHeader() {
-      this.$nextTick(() => {
-        this.recalculate(true).then(() => this.refreshScroll());
-      });
+      this.reScrollFlag++;
     },
     showFooter() {
-      this.$nextTick(() => {
-        this.recalculate(true).then(() => this.refreshScroll());
+      this.reScrollFlag++;
+    },
+    reScrollFlag() {
+      const $xeTable = this;
+      $xeTable.$nextTick(() => {
+        $xeTable.recalculate(true).then(() => $xeTable.refreshScroll());
       });
     },
     height() {
-      this.$nextTick(() => this.recalculate(true));
+      this.reLayoutFlag++;
     },
     maxHeight() {
-      this.$nextTick(() => this.recalculate(true));
+      this.reLayoutFlag++;
     },
-    computeSize() {
-      this.$nextTick(() => {
-        this.recalculate(true).then(() => this.refreshScroll());
-      });
+    computeScrollbarXToTop() {
+      this.reLayoutFlag++;
+    },
+    computeScrollbarYToLeft() {
+      this.reLayoutFlag++;
+    },
+    reLayoutFlag() {
+      const $xeTable = this;
+      $xeTable.$nextTick(() => $xeTable.recalculate(true));
+    },
+    footerData() {
+      this.footFlag++;
+    },
+    footFlag() {
+      const $xeTable = this;
+      $xeTable.updateFooter();
     },
     syncResize(value) {
       if (value) {
-        handleUupdateResize(this);
+        handleUpdateResize(this);
         this.$nextTick(() => {
-          handleUupdateResize(this);
-          setTimeout(() => handleUupdateResize(this));
+          handleUpdateResize(this);
+          setTimeout(() => handleUpdateResize(this));
         });
       }
     },
@@ -1047,11 +1249,14 @@ var _default = exports.default = {
       if (treeConfig && (treeOpts.showLine || treeOpts.line) && (!(this.rowKey || rowOpts.useKey) || !showOverflow)) {
         (0, _log.warnLog)('vxe.error.reqProp', ['row-config.useKey | show-overflow']);
       }
+      if (treeConfig && !treeOpts.transform && this.stripe) {
+        (0, _log.warnLog)('vxe.error.noTree', ['stripe']);
+      }
       if (this.showFooter && !(this.footerMethod || this.footerData)) {
         (0, _log.warnLog)('vxe.error.reqProp', ['footer-data | footer-method']);
       }
-      if (treeConfig && !treeOpts.transform && this.stripe) {
-        (0, _log.warnLog)('vxe.error.noTree', ['stripe']);
+      if (rowOpts.height) {
+        (0, _log.warnLog)('vxe.error.delProp', ['row-config.height', 'cell-config.height']);
       }
       if (this.tooltipOpts.enabled) {
         (0, _log.warnLog)('vxe.error.delProp', ['tooltip-config.enabled', 'tooltip-config.showAll']);
@@ -1198,7 +1403,7 @@ var _default = exports.default = {
       endIndex: 1,
       visibleSize: 0
     });
-    this.loadTableData(data).then(() => {
+    this.loadTableData(data, true).then(() => {
       if (data && data.length) {
         this.inited = true;
         this.initStatus = true;
@@ -1321,29 +1526,24 @@ var _default = exports.default = {
       editRules
     } = props;
     const {
-      isCalcColumn,
       isGroup,
       overflowX,
       overflowY,
       scrollXLoad,
       scrollYLoad,
-      scrollbarHeight,
       tableData,
-      tableColumn,
-      tableGroupColumn,
-      footerTableData,
       initStore,
       columnStore,
       filterStore,
-      customStore,
-      tooltipStore
+      customStore
     } = reactData;
     const {
       leftList,
       rightList
     } = columnStore;
     const loadingSlot = slots.loading;
-    const tooltipOpts = $xeTable.computeTooltipOpts;
+    const tableTipConfig = $xeTable.computeTableTipConfig;
+    const validTipConfig = $xeTable.computeValidTipConfig;
     const validOpts = $xeTable.computeValidOpts;
     const checkboxOpts = $xeTable.computeCheckboxOpts;
     const treeOpts = $xeTable.computeTreeOpts;
@@ -1359,9 +1559,11 @@ var _default = exports.default = {
     const resizableOpts = $xeTable.computeResizableOpts;
     const isArea = mouseConfig && mouseOpts.area;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
+    const scrollbarXToTop = $xeTable.computeScrollbarXToTop;
+    const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft;
     return h('div', {
       ref: 'refElem',
-      class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
+      class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
         [`size--${vSize}`]: vSize,
         [`valid-msg--${validOpts.msgMode}`]: !!editRules,
         'vxe-editable': !!editConfig,
@@ -1374,7 +1576,6 @@ var _default = exports.default = {
         'row--highlight': rowOpts.isHover || highlightHoverRow,
         'column--highlight': columnOpts.isHover || highlightHoverColumn,
         'checkbox--range': checkboxOpts.range,
-        'column--calc': isCalcColumn,
         'col--drag-cell': columnOpts.drag && columnDragOpts.trigger === 'cell',
         'is--header': showHeader,
         'is--footer': showFooter,
@@ -1383,7 +1584,6 @@ var _default = exports.default = {
         'is--fixed-left': leftList.length,
         'is--fixed-right': rightList.length,
         'is--animat': !!props.animat,
-        'is--padding': props.padding,
         'is--round': props.round,
         'is--stripe': !treeConfig && stripe,
         'is--loading': currLoading,
@@ -1409,82 +1609,7 @@ var _default = exports.default = {
     }, this.$slots.default), h('div', {
       key: 'tw',
       class: 'vxe-table--render-wrapper'
-    }, [h('div', {
-      ref: 'refTableViewportElem',
-      class: 'vxe-table--viewport-wrapper'
-    }, [h('div', {
-      class: 'vxe-table--main-wrapper'
-    }, [
-    /**
-     * 表头
-     */
-    showHeader ? h(_header.default, {
-      ref: 'refTableHeader',
-      props: {
-        tableData,
-        tableColumn,
-        tableGroupColumn,
-        size: vSize
-      }
-    }) : renderEmptyElement($xeTable),
-    /**
-    * 表体
-    */
-    h(_body.default, {
-      ref: 'refTableBody',
-      props: {
-        tableData,
-        tableColumn,
-        size: vSize
-      }
-    }),
-    /**
-    * 表尾
-    */
-    showFooter ? h(_footer.default, {
-      ref: 'refTableFooter',
-      props: {
-        footerTableData,
-        tableColumn,
-        size: vSize
-      }
-    }) : renderEmptyElement($xeTable)]), h('div', {
-      class: 'vxe-table--fixed-wrapper'
-    }, [leftList && leftList.length && overflowX ? renderFixed(h, this, 'left') : renderEmptyElement($xeTable), rightList && rightList.length && overflowX ? renderFixed(h, this, 'right') : renderEmptyElement($xeTable)])]), h('div', {
-      ref: 'refScrollYVirtualElem',
-      class: 'vxe-table--scroll-y-virtual'
-    }, [h('div', {
-      ref: 'refScrollYTopCornerElem',
-      class: 'vxe-table--scroll-y-top-corner'
-    }), h('div', {
-      ref: 'refScrollYHandleElem',
-      class: 'vxe-table--scroll-y-handle',
-      on: {
-        scroll: this.scrollYEvent
-      }
-    }, [h('div', {
-      ref: 'refScrollYSpaceElem',
-      class: 'vxe-table--scroll-y-space'
-    })]), h('div', {
-      ref: 'refScrollYBottomCornerElem',
-      class: 'vxe-table--scroll-y-bottom-corner'
-    })])]), h('div', {
-      key: 'vx',
-      ref: 'refScrollXVirtualElem',
-      class: 'vxe-table--scroll-x-virtual'
-    }, [h('div', {
-      ref: 'refScrollXHandleElem',
-      class: 'vxe-table--scroll-x-handle',
-      on: {
-        scroll: this.scrollXEvent
-      }
-    }, [h('div', {
-      ref: 'refScrollXSpaceElem',
-      class: 'vxe-table--scroll-x-space'
-    })]), h('div', {
-      ref: 'refScrollXRightCornerElem',
-      class: 'vxe-table--scroll-x-right-corner'
-    })]),
+    }, scrollbarXToTop ? [renderScrollX(h, $xeTable), renderBody(h, $xeTable)] : [renderBody(h, $xeTable), renderScrollX(h, $xeTable)]),
     /**
      * 空数据
      */
@@ -1506,14 +1631,21 @@ var _default = exports.default = {
      * 列宽线
      */
     h('div', {
-      key: 'cl',
-      ref: 'refCellResizeBar',
-      class: 'vxe-table--resizable-bar',
-      style: overflowX ? {
-        'padding-bottom': `${scrollbarHeight}px`
-      } : undefined
+      key: 'tcl',
+      ref: 'refColResizeBar',
+      class: 'vxe-table--resizable-col-bar'
+    }, resizableOpts.showDragTip ? [h('div', {
+      ref: 'refColResizeTip',
+      class: 'vxe-table--resizable-number-tip'
+    })] : []),
+    /**
+     * 行高线
+     */
+    h('div', {
+      key: 'trl',
+      ref: 'refRowResizeBar',
+      class: 'vxe-table--resizable-row-bar'
     }, resizableOpts.showDragTip ? [h('div', {
-      ref: 'refCellResizeTip',
       class: 'vxe-table--resizable-number-tip'
     })] : []),
     /**
@@ -1615,7 +1747,12 @@ var _default = exports.default = {
     VxeUITooltipComponent ? h(VxeUITooltipComponent, {
       key: 'btp',
       ref: 'tooltip',
-      props: Object.assign({}, tooltipOpts, tooltipStore.currOpts)
+      props: {
+        theme: tableTipConfig.theme,
+        enterable: tableTipConfig.enterable,
+        enterDelay: tableTipConfig.enterDelay,
+        leaveDelay: tableTipConfig.leaveDelay
+      }
     }) : renderEmptyElement($xeTable),
     /**
      * 校验提示
@@ -1626,9 +1763,12 @@ var _default = exports.default = {
       class: [{
         'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete'
       }, 'vxe-table--valid-error'],
-      props: validOpts.message === 'tooltip' || tableData.length === 1 ? Object.assign({
-        isArrow: false
-      }, tooltipOpts) : {}
+      props: {
+        theme: validTipConfig.theme,
+        enterable: validTipConfig.enterable,
+        enterDelay: validTipConfig.enterDelay,
+        leaveDelay: validTipConfig.leaveDelay
+      }
     }) : renderEmptyElement($xeTable)])]);
   },
   methods: _methods.default