vxe-table 3.12.8 → 3.12.10-beta.0

package/lib/table/src/body.js

@@ -18,46 +18,60 @@ const {
 } = _ui.VxeUI;
 const renderType = 'body';
 // 滚动、拖动过程中不需要触发
-function isVMScrollProcess($xetable) {
-  return $xetable._isResize || $xetable.lastScrollTime && Date.now() < $xetable.lastScrollTime + $xetable.delayHover;
-}
-function renderLine(h, _vm, $xetable, params) {
+const isVMScrollProcess = $xeTable => {
+  const tableProps = $xeTable;
+  const tableReactData = $xeTable;
+  const {
+    delayHover
+  } = tableProps;
+  const {
+    lastScrollTime,
+    _isResize
+  } = tableReactData;
+  return !!(_isResize || lastScrollTime && Date.now() < lastScrollTime + delayHover);
+};
+function renderLine(h, _vm, params) {
+  const $xeTable = _vm.$parent;
+  const tableProps = $xeTable;
+  const tableInternalData = $xeTable;
   const {
     row,
     column
   } = params;
   const {
-    afterFullData,
-    treeOpts,
-    treeConfig,
-    fullAllDataRowIdData
-  } = $xetable;
+    afterFullData
+  } = tableInternalData;
+  const {
+    treeConfig
+  } = tableProps;
+  const treeOpts = $xeTable.computeTreeOpts;
   const {
     slots,
     treeNode
   } = column;
-  const rowid = (0, _util.getRowid)($xetable, row);
+  const {
+    fullAllDataRowIdData
+  } = tableInternalData;
+  if (slots && slots.line) {
+    return $xeTable.callSlot(slots.line, params, h);
+  }
+  const rowid = (0, _util.getRowid)($xeTable, row);
   const rest = fullAllDataRowIdData[rowid];
   let rLevel = 0;
-  let rIndex = 0;
-  let items = [];
+  let prevRow = null;
   if (rest) {
     rLevel = rest.level;
-    rIndex = rest._index;
-    items = rest.items;
-  }
-  if (slots && slots.line) {
-    return $xetable.callSlot(slots.line, params, h);
+    prevRow = rest.items[rest._index - 1];
   }
-  const isFirstRow = $xetable.eqRow(afterFullData[0], row);
+  const isFirstRow = $xeTable.eqRow(afterFullData[0], row);
   if (treeConfig && treeNode && (treeOpts.showLine || treeOpts.line)) {
     return [h('div', {
       class: 'vxe-tree--line-wrapper'
     }, [h('div', {
       class: 'vxe-tree--line',
       style: {
-        height: `${isFirstRow ? 1 : (0, _util.calcTreeLine)(params, items, rIndex)}px`,
-        left: `${rLevel * treeOpts.indent + (rLevel ? 2 - (0, _util.getOffsetSize)($xetable) : 0) + 16}px`
+        height: `${isFirstRow ? 1 : (0, _util.calcTreeLine)(params, prevRow)}px`,
+        left: `${rLevel * treeOpts.indent + (rLevel ? 2 - (0, _util.getOffsetSize)($xeTable) : 0) + 16}px`
       }
     })])];
   }
@@ -66,56 +80,63 @@ function renderLine(h, _vm, $xetable, params) {
 /**
  * 渲染列
  */
-function renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, columns, items) {
+function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, columns, items) {
+  const $xeTable = _vm.$parent;
+  const tableProps = $xeTable;
+  const tableReactData = $xeTable;
+  const tableInternalData = $xeTable;
+  const {
+    fullAllDataRowIdData
+  } = tableInternalData;
   const {
-    $listeners: tableListeners,
-    fullAllDataRowIdData,
-    afterFullData,
-    tableData,
-    height,
     columnKey,
-    overflowX,
-    sYOpts,
-    scrollXLoad,
-    scrollYLoad,
-    isCalcCellHeight,
-    highlightCurrentRow,
+    height,
     showOverflow: allColumnOverflow,
-    isAllOverflow,
-    align: allAlign,
-    currentColumn,
     cellClassName: allCellClassName,
     cellStyle,
-    mergeList,
+    align: allAlign,
     spanMethod,
-    radioOpts,
-    checkboxOpts,
-    expandOpts,
-    treeOpts,
-    tooltipOpts,
     mouseConfig,
     editConfig,
-    editOpts,
     editRules,
-    validOpts,
+    tooltipConfig
+  } = tableProps;
+  const {
+    tableData,
+    overflowX,
+    currentColumn,
+    scrollXLoad,
+    scrollYLoad,
+    isCalcCellHeight,
+    mergeList,
     editStore,
-    tooltipConfig,
-    rowOpts,
-    columnOpts,
-    mouseOpts,
-    areaOpts,
+    isAllOverflow,
     validErrorMaps
-  } = $xeTable;
+  } = tableReactData;
+  const {
+    afterFullData,
+    scrollXStore,
+    scrollYStore
+  } = tableInternalData;
+  const cellOpts = $xeTable.computeCellOpts;
+  const validOpts = $xeTable.computeValidOpts;
+  const checkboxOpts = $xeTable.computeCheckboxOpts;
+  const editOpts = $xeTable.computeEditOpts;
+  const tooltipOpts = $xeTable.computeTooltipOpts;
+  const rowOpts = $xeTable.computeRowOpts;
   const rowDragOpts = $xeTable.computeRowDragOpts;
+  const defaultRowHeight = $xeTable.computeDefaultRowHeight;
   const {
     disabledMethod: dragDisabledMethod,
     isCrossDrag,
     isPeerDrag
   } = rowDragOpts;
+  const columnOpts = $xeTable.computeColumnOpts;
+  const mouseOpts = $xeTable.computeMouseOpts;
+  const areaOpts = $xeTable.computeAreaOpts;
   const {
     selectCellToRow
   } = areaOpts;
-  const cellOpts = $xeTable.computeCellOpts;
   const {
     type,
     cellRender,
@@ -133,16 +154,14 @@ function renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, ro
     actived
   } = editStore;
   const {
-    rHeight: scrollYRHeight
-  } = sYOpts;
-  const {
-    height: rowHeight
+    height: customRHeight
   } = rowOpts;
+  const colid = column.id;
   const renderOpts = editRender || cellRender;
   const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
-  const compCellClassName = compConf ? compConf.tableCellClassName || compConf.cellClassName : '';
+  const compCellClassName = compConf ? compConf.tableCellClassName || compConf.cellClassName : null;
   const compCellStyle = compConf ? compConf.tableCellStyle || compConf.cellStyle : '';
-  const showAllTip = tooltipOpts.showAll || tooltipOpts.enabled;
+  const showAllTip = tooltipOpts.showAll;
   const columnIndex = $xeTable.getColumnIndex(column);
   const _columnIndex = $xeTable.getVTColumnIndex(column);
   const isEdit = (0, _utils.isEnableConf)(editRender);
@@ -157,17 +176,14 @@ function renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, ro
   const tdOns = {};
   const rest = fullAllDataRowIdData[rowid];
   const cellAlign = align || (compConf ? compConf.tableCellAlign : '') || allAlign;
-  const errorValidItem = validErrorMaps[`${rowid}:${column.id}`];
+  const errorValidItem = validErrorMaps[`${rowid}:${colid}`];
   const showValidTip = editRules && validOpts.showMessage && (validOpts.message === 'default' ? height || tableData.length > 1 : validOpts.message === 'inline');
   const attrs = {
-    colid: column.id
+    colid
   };
-  const bindMouseenter = tableListeners['cell-mouseenter'];
-  const bindMouseleave = tableListeners['cell-mouseleave'];
-  const triggerDblclick = editRender && editConfig && editOpts.trigger === 'dblclick';
   const params = {
     $table: $xeTable,
-    $grid: $xeTable.$xegrid,
+    $grid: $xeTable.xegrid,
     isEdit: false,
     seq,
     rowid,
@@ -181,7 +197,7 @@ function renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, ro
     _columnIndex,
     fixed: fixedType,
     type: renderType,
-    isHidden: fixedHiddenColumn,
+    isHidden: !!fixedHiddenColumn,
     level: rowLevel,
     visibleData: afterFullData,
     data: tableData,
@@ -196,7 +212,7 @@ function renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, ro
     isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(params));
   }
   // hover 进入事件
-  if (showTitle || showTooltip || showAllTip || bindMouseenter || tooltipConfig) {
+  if (showTitle || showTooltip || showAllTip || tooltipConfig) {
     tdOns.mouseenter = evnt => {
       if (isVMScrollProcess($xeTable)) {
         return;
@@ -207,15 +223,13 @@ function renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, ro
         // 如果配置了显示 tooltip
         $xeTable.triggerBodyTooltipEvent(evnt, params);
       }
-      if (bindMouseenter) {
-        $xeTable.emitEvent('cell-mouseenter', Object.assign({
-          cell: evnt.currentTarget
-        }, params), evnt);
-      }
+      $xeTable.dispatchEvent('cell-mouseenter', Object.assign({
+        cell: evnt.currentTarget
+      }, params), evnt);
     };
   }
   // hover 退出事件
-  if (showTooltip || showAllTip || bindMouseleave || tooltipConfig) {
+  if (showTooltip || showAllTip || tooltipConfig) {
     tdOns.mouseleave = evnt => {
       if (isVMScrollProcess($xeTable)) {
         return;
@@ -223,11 +237,9 @@ function renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, ro
       if (showTooltip || showAllTip) {
         $xeTable.handleTargetLeaveEvent(evnt);
       }
-      if (bindMouseleave) {
-        $xeTable.emitEvent('cell-mouseleave', Object.assign({
-          cell: evnt.currentTarget
-        }, params), evnt);
-      }
+      $xeTable.dispatchEvent('cell-mouseleave', Object.assign({
+        cell: evnt.currentTarget
+      }, params), evnt);
     };
   }
   // 按下事件处理
@@ -241,17 +253,13 @@ function renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, ro
     tdOns.mouseup = $xeTable.triggerCellMouseupEvent;
   }
   // 点击事件处理
-  if (rowOpts.isCurrent || highlightCurrentRow || tableListeners['cell-click'] || editRender && editConfig || expandOpts.trigger === 'row' || expandOpts.trigger === 'cell' || radioOpts.trigger === 'row' || column.type === 'radio' && radioOpts.trigger === 'cell' || checkboxOpts.trigger === 'row' || column.type === 'checkbox' && checkboxOpts.trigger === 'cell' || treeOpts.trigger === 'row' || column.treeNode && treeOpts.trigger === 'cell') {
-    tdOns.click = evnt => {
-      $xeTable.triggerCellClickEvent(evnt, params);
-    };
-  }
+  tdOns.click = evnt => {
+    $xeTable.triggerCellClickEvent(evnt, params);
+  };
   // 双击事件处理
-  if (triggerDblclick || tableListeners['cell-dblclick']) {
-    tdOns.dblclick = evnt => {
-      $xeTable.triggerCellDblclickEvent(evnt, params);
-    };
-  }
+  tdOns.dblclick = evnt => {
+    $xeTable.triggerCellDblclickEvent(evnt, params);
+  };
   // 合并行或列
   if (mergeList.length) {
     const spanRest = (0, _util.mergeBodyMethod)(mergeList, _rowIndex, _columnIndex);
@@ -305,19 +313,19 @@ function renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, ro
         'c--ellipsis': showEllipsis
       }],
       style: {
-        maxHeight: hasEllipsis && (scrollYRHeight || rowHeight) ? `${scrollYRHeight || rowHeight}px` : ''
+        maxHeight: hasEllipsis && (customRHeight || defaultRowHeight) ? `${customRHeight || defaultRowHeight}px` : ''
       }
     }));
   } else {
     // 渲染单元格
-    tdVNs.push(...renderLine(h, _vm, $xeTable, params), h('div', {
+    tdVNs.push(...renderLine(h, _vm, params), h('div', {
       class: ['vxe-cell', {
         'c--title': showTitle,
         'c--tooltip': showTooltip,
         'c--ellipsis': showEllipsis
       }],
       style: {
-        maxHeight: hasEllipsis && (scrollYRHeight || rowHeight) ? `${scrollYRHeight || rowHeight}px` : ''
+        maxHeight: hasEllipsis && (customRHeight || defaultRowHeight) ? `${customRHeight || defaultRowHeight}px` : ''
       },
       attrs: {
         title: showTitle ? $xeTable.getCellLabel(row, column) : null
@@ -333,7 +341,7 @@ function renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, ro
         class: ['vxe-cell--valid-error-tip', (0, _utils.getClass)(validOpts.className, errorValidItem)],
         style: errRule && errRule.maxWidth ? {
           width: `${errRule.maxWidth}px`
-        } : null
+        } : undefined
       }, [h('div', {
         class: `vxe-cell--valid-error-wrapper vxe-cell--valid-error-theme-${validOpts.theme || 'normal'}`
       }, [validSlot ? $xeTable.callSlot(validSlot, validParams, h) : [h('span', {
@@ -344,13 +352,13 @@ function renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, ro
   let cellHeight = '';
   const vnHeight = isCalcCellHeight ? rest.height : 0;
   if (hasEllipsis) {
-    if (scrollYRHeight || rowHeight) {
-      cellHeight = `${scrollYRHeight || rowHeight}px`;
+    if (customRHeight) {
+      cellHeight = `${customRHeight}px`;
     } else if (!isAllOverflow) {
-      cellHeight = `${vnHeight || rowHeight || 18}px`;
+      cellHeight = `${vnHeight || defaultRowHeight || 18}px`;
     }
   } else {
-    cellHeight = `${vnHeight || rowHeight || 18}px`;
+    cellHeight = `${vnHeight || defaultRowHeight || 18}px`;
   }
   if (mouseConfig && mouseOpts.area && selectCellToRow) {
     if (!$columnIndex && selectCellToRow === true || selectCellToRow === column.field) {
@@ -360,6 +368,12 @@ function renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, ro
     }
   }
   const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
+  let isPreLoadStatus = false;
+  if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex || _rowIndex > scrollYStore.visibleEndIndex)) {
+    isPreLoadStatus = true;
+  } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
+    isPreLoadStatus = true;
+  }
   return h('td', {
     class: ['vxe-body--column', column.id, {
       [`col--${cellAlign}`]: cellAlign,
@@ -384,36 +398,44 @@ function renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, ro
       height: cellHeight
     }, _xeUtils.default.isFunction(compCellStyle) ? compCellStyle(params) : compCellStyle, _xeUtils.default.isFunction(cellStyle) ? cellStyle(params) : cellStyle),
     on: tdOns
-  }, tdVNs);
+  }, isPreLoadStatus || isOptimizeMode && fixedHiddenColumn ? [] : tdVNs);
 }
-function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
-  const columnOpts = $xeTable.computeColumnOpts;
-  const columnDragOpts = $xeTable.computeColumnDragOpts;
+function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
+  const $xeTable = _vm.$parent;
+  const tableProps = $xeTable;
+  const tableReactData = $xeTable;
+  const tableInternalData = $xeTable;
   const {
     stripe,
     rowKey,
     highlightHoverRow,
     rowClassName,
     rowStyle,
-    editConfig,
     showOverflow: allColumnOverflow,
-    treeConfig,
-    treeOpts,
-    expandOpts,
-    editOpts,
+    editConfig,
+    treeConfig
+  } = tableProps;
+  const {
+    hasFixedColumn,
     treeExpandedMaps,
     scrollXLoad,
     scrollYLoad,
     rowExpandedMaps,
-    radioOpts,
-    checkboxOpts,
     expandColumn,
-    hasFixedColumn,
-    fullAllDataRowIdData,
-    rowOpts,
+    selectRadioRow,
     pendingRowMaps,
     isDragColMove
-  } = $xeTable;
+  } = tableReactData;
+  const {
+    fullAllDataRowIdData
+  } = tableInternalData;
+  const checkboxOpts = $xeTable.computeCheckboxOpts;
+  const radioOpts = $xeTable.computeRadioOpts;
+  const treeOpts = $xeTable.computeTreeOpts;
+  const editOpts = $xeTable.computeEditOpts;
+  const rowOpts = $xeTable.computeRowOpts;
+  const columnOpts = $xeTable.computeColumnOpts;
+  const columnDragOpts = $xeTable.computeColumnDragOpts;
   const {
     transform,
     seqMode
@@ -466,7 +488,8 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
       level: rowLevel,
       row,
       rowIndex,
-      $rowIndex
+      $rowIndex,
+      _rowIndex
     };
     // 行是否被展开
     const isExpandRow = expandColumn && !!rowExpandedMaps[rowid];
@@ -494,12 +517,12 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
       'is--expand-row': isExpandRow,
       'is--expand-tree': isExpandTree,
       'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
-      'row--radio': radioOpts.highlight && $xeTable.selectRadioRow === row,
+      'row--radio': radioOpts.highlight && selectRadioRow === row,
       'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
       'row--pending': !!pendingRowMaps[rowid]
     }, rowClassName ? _xeUtils.default.isFunction(rowClassName) ? rowClassName(params) : rowClassName : ''];
     const tdVNs = tableColumn.map((column, $columnIndex) => {
-      return renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
+      return renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
     });
     rows.push(columnOpts.drag && columnDragOpts.animation ? h('transition-group', {
       props: {
@@ -510,7 +533,7 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
       attrs: {
         rowid
       },
-      style: rowStyle ? _xeUtils.default.isFunction(rowStyle) ? rowStyle(params) : rowStyle : null,
+      style: rowStyle ? _xeUtils.default.isFunction(rowStyle) ? rowStyle(params) : rowStyle : undefined,
       key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || treeConfig ? rowid : $rowIndex,
       nativeOn: trOn
     }, tdVNs) : h('tr', {
@@ -518,12 +541,13 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
       attrs: {
         rowid
       },
-      style: rowStyle ? _xeUtils.default.isFunction(rowStyle) ? rowStyle(params) : rowStyle : null,
+      style: rowStyle ? _xeUtils.default.isFunction(rowStyle) ? rowStyle(params) : rowStyle : undefined,
       key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || treeConfig ? rowid : $rowIndex,
       on: trOn
     }, tdVNs));
     // 如果行被展开了
     if (isExpandRow) {
+      const expandOpts = $xeTable.computeExpandOpts;
       const {
         height: expandHeight,
         padding
@@ -548,14 +572,15 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
         level: rowLevel,
         row,
         rowIndex,
-        $rowIndex
+        $rowIndex,
+        _rowIndex
       };
       rows.push(h('tr', {
         class: ['vxe-body--expanded-row', {
           'is--padding': padding
         }],
         key: `expand_${rowid}`,
-        style: rowStyle ? _xeUtils.default.isFunction(rowStyle) ? rowStyle(expandParams) : rowStyle : null,
+        style: rowStyle ? _xeUtils.default.isFunction(rowStyle) ? rowStyle(expandParams) : rowStyle : undefined,
         on: trOn
       }, [h('td', {
         class: {
@@ -576,7 +601,7 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
     }
     // 如果是树形表格
     if (isExpandTree) {
-      rows.push(...renderRows(h, _vm, $xeTable, fixedType, rowChildren, tableColumn));
+      rows.push(...renderRows(h, _vm, fixedType, isOptimizeMode, rowChildren, tableColumn));
     }
   });
   return rows;
@@ -587,49 +612,45 @@ var _default = exports.default = {
     tableData: Array,
     tableColumn: Array,
     fixedColumn: Array,
-    size: String,
-    fixedType: String
-  },
-  data() {
-    return {
-      wheelTime: null,
-      wheelYSize: 0,
-      wheelYInterval: 0,
-      wheelYTotal: 0
-    };
+    fixedType: {
+      type: String,
+      default: ''
+    }
   },
   mounted() {
+    const _vm = this;
+    const props = _vm;
+    const $xeTable = _vm.$parent;
+    const tableInternalData = $xeTable;
     const {
-      $parent: $xetable,
-      $el,
-      $refs,
       fixedType
-    } = this;
+    } = props;
     const {
       elemStore
-    } = $xetable;
+    } = tableInternalData;
     const prefix = `${fixedType || 'main'}-body-`;
-    elemStore[`${prefix}wrapper`] = $el;
-    elemStore[`${prefix}table`] = $refs.table;
-    elemStore[`${prefix}colgroup`] = $refs.colgroup;
-    elemStore[`${prefix}list`] = $refs.tbody;
-    elemStore[`${prefix}xSpace`] = $refs.xSpace;
-    elemStore[`${prefix}ySpace`] = $refs.ySpace;
-    elemStore[`${prefix}emptyBlock`] = $refs.emptyBlock;
-  },
-  beforeDestroy() {
-    clearTimeout(this.wheelTime);
+    elemStore[`${prefix}wrapper`] = _vm.$refs.refElem;
+    elemStore[`${prefix}scroll`] = _vm.$refs.refBodyScroll;
+    elemStore[`${prefix}table`] = _vm.$refs.refBodyTable;
+    elemStore[`${prefix}colgroup`] = _vm.$refs.refBodyColgroup;
+    elemStore[`${prefix}list`] = _vm.$refs.refBodyTBody;
+    elemStore[`${prefix}xSpace`] = _vm.$refs.refBodyXSpace;
+    elemStore[`${prefix}ySpace`] = _vm.$refs.refBodyYSpace;
+    elemStore[`${prefix}emptyBlock`] = _vm.$refs.refBodyEmptyBlock;
   },
   destroyed() {
+    const props = this;
+    const $xeTable = this.$parent;
+    const tableInternalData = $xeTable;
     const {
-      $parent: $xetable,
       fixedType
-    } = this;
+    } = props;
     const {
       elemStore
-    } = $xetable;
+    } = tableInternalData;
     const prefix = `${fixedType || 'main'}-body-`;
     elemStore[`${prefix}wrapper`] = null;
+    elemStore[`${prefix}scroll`] = null;
     elemStore[`${prefix}table`] = null;
     elemStore[`${prefix}colgroup`] = null;
     elemStore[`${prefix}list`] = null;
@@ -644,7 +665,7 @@ var _default = exports.default = {
     const tableReactData = $xeTable;
     const tableInternalData = $xeTable;
     const {
-      tId,
+      xID,
       $scopedSlots
     } = $xeTable;
     const {
@@ -675,23 +696,26 @@ var _default = exports.default = {
       fullColumnIdData
     } = tableInternalData;
     const rowOpts = $xeTable.computeRowOpts;
-    const sYOpts = $xeTable.computeSYOpts;
     const emptyOpts = $xeTable.computeEmptyOpts;
     const mouseOpts = $xeTable.computeMouseOpts;
     const rowDragOpts = $xeTable.computeRowDragOpts;
+    const leftFixedWidth = $xeTable.computeLeftFixedWidth;
+    const rightFixedWidth = $xeTable.computeRightFixedWidth;
     let renderDataList = tableData;
     let renderColumnList = tableColumn;
-    if (fixedType) {
-      // 如果是使用优化模式
-      if (scrollXLoad || scrollYLoad || allColumnOverflow && isAllOverflow) {
+    let isOptimizeMode = false;
+    // 如果是使用优化模式
+    if (scrollXLoad || scrollYLoad || allColumnOverflow && isAllOverflow) {
+      if (expandColumn || spanMethod || footerSpanMethod) {
         // 如果不支持优化模式
-        if (expandColumn || spanMethod || footerSpanMethod) {
-          renderColumnList = visibleColumn;
-        } else {
-          renderColumnList = fixedColumn || [];
-        }
       } else {
-        renderColumnList = visibleColumn;
+        isOptimizeMode = true;
+      }
+    }
+    if (fixedType) {
+      renderColumnList = visibleColumn;
+      if (isOptimizeMode) {
+        renderColumnList = fixedColumn || [];
       }
     }
     // 行拖拽
@@ -745,7 +769,7 @@ var _default = exports.default = {
       emptyContent = $scopedSlots.empty.call(this, {
         $table: $xeTable,
         $grid: $xeTable.xegrid
-      }, h);
+      });
     } else {
       const compConf = emptyOpts.name ? renderer.get(emptyOpts.name) : null;
       const rtEmptyView = compConf ? compConf.renderTableEmpty || compConf.renderTableEmptyView || compConf.renderEmpty : null;
@@ -758,39 +782,44 @@ var _default = exports.default = {
       }
     }
     const ons = {
-      scroll: this.scrollEvent
+      scroll(evnt) {
+        $xeTable.triggerBodyScrollEvent(evnt, fixedType);
+      }
     };
-    if (sYOpts.mode === 'wheel') {
-      ons.wheel = this.wheelEvent;
+    if (scrollYLoad || leftFixedWidth || rightFixedWidth) {
+      ons.wheel = $xeTable.triggerBodyWheelEvent;
     }
     return h('div', {
       ref: 'refElem',
       class: ['vxe-table--body-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],
       attrs: {
-        xid: tId
-      },
+        xid: xID
+      }
+    }, [h('div', {
+      ref: 'refBodyScroll',
+      class: 'vxe-table--body-inner-wrapper',
       on: ons
     }, [fixedType ? renderEmptyElement($xeTable) : h('div', {
-      class: 'vxe-body--x-space',
-      ref: 'xSpace'
+      ref: 'refBodyXSpace',
+      class: 'vxe-body--x-space'
     }), h('div', {
-      class: 'vxe-body--y-space',
-      ref: 'ySpace'
+      ref: 'refBodyYSpace',
+      class: 'vxe-body--y-space'
     }), h('table', {
+      ref: 'refBodyTable',
       class: 'vxe-table--body',
       attrs: {
-        xid: tId,
+        xid: xID,
         cellspacing: 0,
         cellpadding: 0,
         border: 0
-      },
-      ref: 'table'
+      }
     }, [
     /**
      * 列宽
      */
     h('colgroup', {
-      ref: 'colgroup'
+      ref: 'refBodyColgroup'
     }, renderColumnList.map((column, $columnIndex) => {
       return h('col', {
         attrs: {
@@ -800,16 +829,17 @@ var _default = exports.default = {
       });
     })),
     /**
-     * 内容
-     */
+    * 内容
+    */
     rowOpts.drag && rowDragOpts.animation ? h('transition-group', {
+      ref: 'refBodyTBody',
       props: {
         tag: 'tbody',
         name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`
       }
-    }, renderRows(h, this, $xeTable, fixedType, renderDataList, renderColumnList)) : h('tbody', {
-      ref: 'tbody'
-    }, renderRows(h, this, $xeTable, fixedType, renderDataList, renderColumnList))]), h('div', {
+    }, renderRows(h, this, fixedType, isOptimizeMode, renderDataList, renderColumnList)) : h('tbody', {
+      ref: 'refBodyTBody'
+    }, renderRows(h, this, fixedType, isOptimizeMode, renderDataList, renderColumnList))]), h('div', {
       class: 'vxe-table--checkbox-range'
     }), mouseConfig && mouseOpts.area ? h('div', {
       class: 'vxe-table--cell-area'
@@ -841,212 +871,6 @@ var _default = exports.default = {
       ref: 'emptyBlock'
     }, [h('div', {
       class: 'vxe-table--empty-content'
-    }, emptyContent)]) : renderEmptyElement($xeTable)]);
-  },
-  methods: {
-    /**
-     * 滚动处理
-     * 如果存在列固定左侧，同步更新滚动状态
-     * 如果存在列固定右侧，同步更新滚动状态
-     */
-    scrollEvent(evnt) {
-      const $xeTable = this.$parent;
-      const tableInternalData = $xeTable;
-      const {
-        fixedType
-      } = this;
-      const {
-        lastScrollTop,
-        lastScrollLeft,
-        inVirtualScroll,
-        inBodyScroll,
-        bodyScrollType,
-        inFooterScroll
-      } = tableInternalData;
-      if (inVirtualScroll) {
-        return;
-      }
-      if (inFooterScroll) {
-        return;
-      }
-      if (inBodyScroll) {
-        if (bodyScrollType !== fixedType) {
-          return;
-        }
-      }
-      const {
-        tableHeader,
-        tableBody,
-        leftBody,
-        rightBody,
-        tableFooter
-      } = $xeTable.$refs;
-      const scrollBodyElem = this.$el;
-      const headerElem = tableHeader ? tableHeader.$el : null;
-      const footerElem = tableFooter ? tableFooter.$el : null;
-      const bodyElem = tableBody ? tableBody.$el : null;
-      if (!bodyElem) {
-        return;
-      }
-      const leftElem = leftBody ? leftBody.$el : null;
-      const rightElem = rightBody ? rightBody.$el : null;
-      const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
-      const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
-      const scrollTop = scrollBodyElem.scrollTop;
-      const scrollLeft = bodyElem.scrollLeft;
-      const isRollX = scrollLeft !== lastScrollLeft;
-      const isRollY = scrollTop !== lastScrollTop;
-      tableInternalData.inBodyScroll = true;
-      tableInternalData.bodyScrollType = fixedType;
-      if (isRollY) {
-        if (leftElem && fixedType === 'left') {
-          (0, _dom.setScrollTop)(bodyElem, scrollTop);
-          (0, _dom.setScrollTop)(rightElem, scrollTop);
-        } else if (rightElem && fixedType === 'right') {
-          (0, _dom.setScrollTop)(bodyElem, scrollTop);
-          (0, _dom.setScrollTop)(leftElem, scrollTop);
-        } else {
-          (0, _dom.setScrollTop)(leftElem, scrollTop);
-          (0, _dom.setScrollTop)(rightElem, scrollTop);
-        }
-        (0, _dom.setScrollTop)(yHandleEl, scrollTop);
-        $xeTable.triggerScrollYEvent(evnt);
-      }
-      if (isRollX) {
-        (0, _dom.setScrollLeft)(xHandleEl, scrollLeft);
-        (0, _dom.setScrollLeft)(headerElem, scrollLeft);
-        (0, _dom.setScrollLeft)(footerElem, scrollLeft);
-        $xeTable.triggerScrollXEvent(evnt);
-      }
-      $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-        type: renderType,
-        fixed: fixedType
-      });
-    },
-    handleWheel(evnt, isTopWheel, deltaTop, isRollX, isRollY) {
-      const {
-        $parent: $xetable
-      } = this;
-      const {
-        $refs,
-        elemStore,
-        scrollYLoad,
-        scrollXLoad
-      } = $xetable;
-      const {
-        tableBody,
-        leftBody,
-        rightBody
-      } = $refs;
-      const bodyElem = tableBody.$el;
-      const leftElem = leftBody ? leftBody.$el : null;
-      const rightElem = rightBody ? rightBody.$el : null;
-      const remainSize = this.isPrevWheelTop === isTopWheel ? Math.max(0, this.wheelYSize - this.wheelYTotal) : 0;
-      const bodyYElem = elemStore['main-body-ySpace'];
-      const bodyXElem = elemStore['main-body-xSpace'];
-      const bodyHeight = scrollYLoad && bodyYElem ? bodyYElem.clientHeight : bodyElem.clientHeight;
-      const bodyWidth = scrollXLoad && bodyXElem ? bodyXElem.clientWidth : bodyElem.clientWidth;
-      this.isPrevWheelTop = isTopWheel;
-      this.wheelYSize = Math.abs(isTopWheel ? deltaTop - remainSize : deltaTop + remainSize);
-      this.wheelYInterval = 0;
-      this.wheelYTotal = 0;
-      clearTimeout(this.wheelTime);
-      const handleSmooth = () => {
-        let {
-          fixedType,
-          wheelYTotal,
-          wheelYSize,
-          wheelYInterval
-        } = this;
-        if (wheelYTotal < wheelYSize) {
-          wheelYInterval = Math.max(5, Math.floor(wheelYInterval * 1.5));
-          wheelYTotal = wheelYTotal + wheelYInterval;
-          if (wheelYTotal > wheelYSize) {
-            wheelYInterval = wheelYInterval - (wheelYTotal - wheelYSize);
-          }
-          const {
-            scrollTop,
-            clientHeight,
-            scrollHeight
-          } = bodyElem;
-          const targetTop = scrollTop + wheelYInterval * (isTopWheel ? -1 : 1);
-          bodyElem.scrollTop = targetTop;
-          if (leftElem) {
-            leftElem.scrollTop = targetTop;
-          }
-          if (rightElem) {
-            rightElem.scrollTop = targetTop;
-          }
-          if (isTopWheel ? targetTop < scrollHeight - clientHeight : targetTop >= 0) {
-            this.wheelTime = setTimeout(handleSmooth, 10);
-          }
-          this.wheelYTotal = wheelYTotal;
-          this.wheelYInterval = wheelYInterval;
-          $xetable.emitEvent('scroll', {
-            type: renderType,
-            fixed: fixedType,
-            scrollTop: bodyElem.scrollTop,
-            scrollLeft: bodyElem.scrollLeft,
-            scrollHeight: bodyElem.scrollHeight,
-            scrollWidth: bodyElem.scrollWidth,
-            bodyHeight,
-            bodyWidth,
-            isX: isRollX,
-            isY: isRollY
-          }, evnt);
-        }
-      };
-      handleSmooth();
-    },
-    /**
-     * 滚轮处理
-     */
-    wheelEvent(evnt) {
-      const {
-        deltaY,
-        deltaX
-      } = evnt;
-      const {
-        $el: scrollBodyElem,
-        $parent: $xetable
-      } = this;
-      const {
-        $refs,
-        highlightHoverRow,
-        scrollYLoad,
-        lastScrollTop,
-        lastScrollLeft,
-        rowOpts
-      } = $xetable;
-      const {
-        tableBody
-      } = $refs;
-      const bodyElem = tableBody.$el;
-      const deltaTop = deltaY;
-      const deltaLeft = deltaX;
-      const isTopWheel = deltaTop < 0;
-      // 如果滚动位置已经是顶部或底部，则不需要触发
-      if (isTopWheel ? scrollBodyElem.scrollTop <= 0 : scrollBodyElem.scrollTop >= scrollBodyElem.scrollHeight - scrollBodyElem.clientHeight) {
-        return;
-      }
-      const scrollTop = scrollBodyElem.scrollTop + deltaTop;
-      const scrollLeft = bodyElem.scrollLeft + deltaLeft;
-      const isRollX = scrollLeft !== lastScrollLeft;
-      const isRollY = scrollTop !== lastScrollTop;
-      // 用于鼠标纵向滚轮处理
-      if (isRollY) {
-        evnt.preventDefault();
-        $xetable.lastScrollTop = scrollTop;
-        $xetable.lastScrollLeft = scrollLeft;
-        $xetable.lastScrollTime = Date.now();
-        if (rowOpts.isHover || highlightHoverRow) {
-          $xetable.clearHoverRow();
-        }
-        this.handleWheel(evnt, isTopWheel, deltaTop, isRollX, isRollY);
-        if (scrollYLoad) {
-          $xetable.triggerScrollYEvent(evnt);
-        }
-      }
-    }
+    }, emptyContent)]) : renderEmptyElement($xeTable)])]);
   }
 };