vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
955 lines (954 loc) • 38.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _conf = _interopRequireDefault(require("../../v-x-e-table/src/conf"));
var _vXETable = require("../../v-x-e-table");
var _util = require("./util");
var _dom = require("../../tools/dom");
var _utils = require("../../tools/utils");
var _vn = require("../../tools/vn");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var __assign = void 0 && (void 0).__assign || function () {
__assign = Object.assign || function (t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var renderType = 'body';
var lineOffsetSizes = {
mini: 3,
small: 2,
medium: 1
};
var _default = (0, _vue.defineComponent)({
name: 'VxeTableBody',
props: {
tableData: Array,
tableColumn: Array,
fixedColumn: Array,
fixedType: {
type: String,
default: null
}
},
setup: function (props) {
var $xetable = (0, _vue.inject)('$xetable', {});
var xesize = (0, _vue.inject)('xesize', null);
var xID = $xetable.xID,
tableProps = $xetable.props,
tableContext = $xetable.context,
tableReactData = $xetable.reactData,
tableInternalData = $xetable.internalData;
var _a = $xetable.getRefMaps(),
refTableHeader = _a.refTableHeader,
refTableBody = _a.refTableBody,
refTableFooter = _a.refTableFooter,
refTableLeftBody = _a.refTableLeftBody,
refTableRightBody = _a.refTableRightBody,
refValidTooltip = _a.refValidTooltip;
var _b = $xetable.getComputeMaps(),
computeEditOpts = _b.computeEditOpts,
computeMouseOpts = _b.computeMouseOpts,
computeSYOpts = _b.computeSYOpts,
computeEmptyOpts = _b.computeEmptyOpts,
computeKeyboardOpts = _b.computeKeyboardOpts,
computeTooltipOpts = _b.computeTooltipOpts,
computeRadioOpts = _b.computeRadioOpts,
computeExpandOpts = _b.computeExpandOpts,
computeTreeOpts = _b.computeTreeOpts,
computeCheckboxOpts = _b.computeCheckboxOpts,
computeValidOpts = _b.computeValidOpts,
computeRowOpts = _b.computeRowOpts,
computeColumnOpts = _b.computeColumnOpts;
var refElem = (0, _vue.ref)();
var refBodyTable = (0, _vue.ref)();
var refBodyColgroup = (0, _vue.ref)();
var refBodyTBody = (0, _vue.ref)();
var refBodyXSpace = (0, _vue.ref)();
var refBodyYSpace = (0, _vue.ref)();
var refBodyEmptyBlock = (0, _vue.ref)();
var getOffsetSize = function () {
if (xesize) {
var vSize = xesize.value;
if (vSize) {
return lineOffsetSizes[vSize] || 0;
}
}
return 0;
};
// 滚动、拖动过程中不需要触发
var isVMScrollProcess = function () {
var delayHover = tableProps.delayHover;
var lastScrollTime = tableReactData.lastScrollTime,
_isResize = tableReactData._isResize;
return !!(_isResize || lastScrollTime && Date.now() < lastScrollTime + delayHover);
};
var countTreeExpand = function (prevRow, params) {
var count = 1;
if (!prevRow) {
return count;
}
var treeOpts = computeTreeOpts.value;
var childrenField = treeOpts.children || treeOpts.childrenField;
var rowChildren = prevRow[childrenField];
if (rowChildren && $xetable.isTreeExpandByRow(prevRow)) {
for (var index = 0; index < rowChildren.length; index++) {
count += countTreeExpand(rowChildren[index], params);
}
}
return count;
};
var calcTreeLine = function (params, items, rIndex) {
var expandSize = 1;
if (rIndex) {
expandSize = countTreeExpand(items[rIndex - 1], params);
}
return tableReactData.rowHeight * expandSize - (rIndex ? 1 : 12 - getOffsetSize());
};
var renderLine = function (params) {
var row = params.row,
column = params.column;
var treeConfig = tableProps.treeConfig;
var treeOpts = computeTreeOpts.value;
var slots = column.slots,
treeNode = column.treeNode;
var fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData;
var rowid = (0, _util.getRowid)($xetable, row);
var rest = fullAllDataRowIdData[rowid];
var rLevel = 0;
var rIndex = 0;
var items = [];
if (rest) {
rLevel = rest.level;
rIndex = rest._index;
items = rest.items;
}
if (slots && slots.line) {
return $xetable.callSlot(slots.line, params);
}
if (treeConfig && treeNode && (treeOpts.showLine || treeOpts.line)) {
return [(0, _vue.h)('div', {
class: 'vxe-tree--line-wrapper'
}, [(0, _vue.h)('div', {
class: 'vxe-tree--line',
style: {
height: "".concat(calcTreeLine(params, items, rIndex), "px"),
left: "".concat(rLevel * treeOpts.indent + (rLevel ? 2 - getOffsetSize() : 0) + 16, "px")
}
})])];
}
return [];
};
/**
* 渲染列
*/
var renderColumn = function (seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, columns, items) {
var _a;
var columnKey = tableProps.columnKey,
height = tableProps.height,
allColumnOverflow = tableProps.showOverflow,
allCellClassName = tableProps.cellClassName,
cellStyle = tableProps.cellStyle,
allAlign = tableProps.align,
spanMethod = tableProps.spanMethod,
mouseConfig = tableProps.mouseConfig,
editConfig = tableProps.editConfig,
editRules = tableProps.editRules,
tooltipConfig = tableProps.tooltipConfig;
var tableData = tableReactData.tableData,
overflowX = tableReactData.overflowX,
scrollYLoad = tableReactData.scrollYLoad,
currentColumn = tableReactData.currentColumn,
mergeList = tableReactData.mergeList,
editStore = tableReactData.editStore,
isAllOverflow = tableReactData.isAllOverflow,
validErrorMaps = tableReactData.validErrorMaps;
var afterFullData = tableInternalData.afterFullData;
var validOpts = computeValidOpts.value;
var checkboxOpts = computeCheckboxOpts.value;
var editOpts = computeEditOpts.value;
var tooltipOpts = computeTooltipOpts.value;
var rowOpts = computeRowOpts.value;
var sYOpts = computeSYOpts.value;
var columnOpts = computeColumnOpts.value;
var type = column.type,
cellRender = column.cellRender,
editRender = column.editRender,
align = column.align,
showOverflow = column.showOverflow,
className = column.className,
treeNode = column.treeNode,
slots = column.slots;
var actived = editStore.actived;
var scrollYRHeight = sYOpts.rHeight;
var rowHeight = rowOpts.height;
var renderOpts = editRender || cellRender;
var compConf = renderOpts ? _vXETable.VXETable.renderer.get(renderOpts.name) : null;
var compCellClassName = compConf ? compConf.cellClassName : '';
var compCellStyle = compConf ? compConf.cellStyle : '';
var showAllTip = tooltipOpts.showAll;
var columnIndex = $xetable.getColumnIndex(column);
var _columnIndex = $xetable.getVTColumnIndex(column);
var isEdit = (0, _utils.isEnableConf)(editRender);
var fixedHiddenColumn = fixedType ? column.fixed !== fixedType : column.fixed && overflowX;
var cellOverflow = _xeUtils.default.isUndefined(showOverflow) || _xeUtils.default.isNull(showOverflow) ? allColumnOverflow : showOverflow;
var showEllipsis = cellOverflow === 'ellipsis';
var showTitle = cellOverflow === 'title';
var showTooltip = cellOverflow === true || cellOverflow === 'tooltip';
var hasEllipsis = showTitle || showTooltip || showEllipsis;
var isDirty;
var tdOns = {};
var cellAlign = align || allAlign;
var errorValidItem = validErrorMaps["".concat(rowid, ":").concat(column.id)];
var showValidTip = editRules && validOpts.showMessage && (validOpts.message === 'default' ? height || tableData.length > 1 : validOpts.message === 'inline');
var attrs = {
colid: column.id
};
var params = {
$table: $xetable,
$grid: $xetable.xegrid,
seq: seq,
rowid: rowid,
row: row,
rowIndex: rowIndex,
$rowIndex: $rowIndex,
_rowIndex: _rowIndex,
column: column,
columnIndex: columnIndex,
$columnIndex: $columnIndex,
_columnIndex: _columnIndex,
fixed: fixedType,
type: renderType,
isHidden: fixedHiddenColumn,
level: rowLevel,
visibleData: afterFullData,
data: tableData,
items: items
};
// 虚拟滚动不支持动态高度
if (scrollYLoad && !hasEllipsis) {
showEllipsis = hasEllipsis = true;
}
// hover 进入事件
if (showTitle || showTooltip || showAllTip || tooltipConfig) {
tdOns.onMouseenter = function (evnt) {
if (isVMScrollProcess()) {
return;
}
if (showTitle) {
(0, _dom.updateCellTitle)(evnt.currentTarget, column);
} else if (showTooltip || showAllTip) {
// 如果配置了显示 tooltip
$xetable.triggerBodyTooltipEvent(evnt, params);
}
$xetable.dispatchEvent('cell-mouseenter', Object.assign({
cell: evnt.currentTarget
}, params), evnt);
};
}
// hover 退出事件
if (showTooltip || showAllTip || tooltipConfig) {
tdOns.onMouseleave = function (evnt) {
if (isVMScrollProcess()) {
return;
}
if (showTooltip || showAllTip) {
$xetable.handleTargetLeaveEvent(evnt);
}
$xetable.dispatchEvent('cell-mouseleave', Object.assign({
cell: evnt.currentTarget
}, params), evnt);
};
}
// 按下事件处理
if (checkboxOpts.range || mouseConfig) {
tdOns.onMousedown = function (evnt) {
$xetable.triggerCellMousedownEvent(evnt, params);
};
}
// 点击事件处理
tdOns.onClick = function (evnt) {
$xetable.triggerCellClickEvent(evnt, params);
};
// 双击事件处理
tdOns.onDblclick = function (evnt) {
$xetable.triggerCellDblclickEvent(evnt, params);
};
// 合并行或列
if (mergeList.length) {
var spanRest = (0, _util.mergeBodyMethod)(mergeList, _rowIndex, _columnIndex);
if (spanRest) {
var rowspan = spanRest.rowspan,
colspan = spanRest.colspan;
if (!rowspan || !colspan) {
return null;
}
if (rowspan > 1) {
attrs.rowspan = rowspan;
}
if (colspan > 1) {
attrs.colspan = colspan;
}
}
} else if (spanMethod) {
// 自定义合并行或列的方法
var _b = spanMethod(params) || {},
_c = _b.rowspan,
rowspan = _c === void 0 ? 1 : _c,
_d = _b.colspan,
colspan = _d === void 0 ? 1 : _d;
if (!rowspan || !colspan) {
return null;
}
if (rowspan > 1) {
attrs.rowspan = rowspan;
}
if (colspan > 1) {
attrs.colspan = colspan;
}
}
// 如果被合并不可隐藏
if (fixedHiddenColumn && mergeList) {
if (attrs.colspan > 1 || attrs.rowspan > 1) {
fixedHiddenColumn = false;
}
}
// 如果编辑列开启显示状态
if (!fixedHiddenColumn && editConfig && (editRender || cellRender) && (editOpts.showStatus || editOpts.showUpdateStatus)) {
isDirty = $xetable.isUpdateByRow(row, column.field);
}
var tdVNs = [];
if (fixedHiddenColumn && (allColumnOverflow ? isAllOverflow : allColumnOverflow)) {
tdVNs.push((0, _vue.h)('div', {
class: ['vxe-cell', {
'c--title': showTitle,
'c--tooltip': showTooltip,
'c--ellipsis': showEllipsis
}],
style: {
maxHeight: hasEllipsis && (scrollYRHeight || rowHeight) ? "".concat(scrollYRHeight || rowHeight, "px") : ''
}
}));
} else {
// 渲染单元格
tdVNs.push.apply(tdVNs, __spreadArray(__spreadArray([], renderLine(params), false), [(0, _vue.h)('div', {
class: ['vxe-cell', {
'c--title': showTitle,
'c--tooltip': showTooltip,
'c--ellipsis': showEllipsis
}],
style: {
maxHeight: hasEllipsis && (scrollYRHeight || rowHeight) ? "".concat(scrollYRHeight || rowHeight, "px") : ''
},
title: showTitle ? $xetable.getCellLabel(row, column) : null
}, column.renderCell(params))], false));
if (showValidTip && errorValidItem) {
var errRule = errorValidItem.rule;
var validSlot = slots ? slots.valid : null;
var validParams = __assign(__assign({}, params), errorValidItem);
tdVNs.push((0, _vue.h)('div', {
class: ['vxe-cell--valid-error-hint', (0, _dom.getPropClass)(validOpts.className, validParams)],
style: errRule && errRule.maxWidth ? {
width: "".concat(errRule.maxWidth, "px")
} : null
}, validSlot ? $xetable.callSlot(validSlot, validParams) : [(0, _vue.h)('span', {
class: 'vxe-cell--valid-error-msg'
}, errorValidItem.content)]));
}
}
return (0, _vue.h)('td', __assign(__assign(__assign({
class: ['vxe-body--column', column.id, (_a = {}, _a["col--".concat(cellAlign)] = cellAlign, _a["col--".concat(type)] = type, _a['col--last'] = $columnIndex === columns.length - 1, _a['col--tree-node'] = treeNode, _a['col--edit'] = isEdit, _a['col--ellipsis'] = hasEllipsis, _a['fixed--hidden'] = fixedHiddenColumn, _a['col--dirty'] = isDirty, _a['col--active'] = editConfig && isEdit && actived.row === row && (actived.column === column || editOpts.mode === 'row'), _a['col--valid-error'] = !!errorValidItem, _a['col--current'] = currentColumn === column, _a), (0, _dom.getPropClass)(compCellClassName, params), (0, _dom.getPropClass)(className, params), (0, _dom.getPropClass)(allCellClassName, params)],
key: columnKey || columnOpts.useKey ? column.id : $columnIndex
}, attrs), {
style: Object.assign({
height: hasEllipsis && (scrollYRHeight || rowHeight) ? "".concat(scrollYRHeight || rowHeight, "px") : ''
}, _xeUtils.default.isFunction(compCellStyle) ? compCellStyle(params) : compCellStyle, _xeUtils.default.isFunction(cellStyle) ? cellStyle(params) : cellStyle)
}), tdOns), tdVNs);
};
var renderRows = function (fixedType, tableData, tableColumn) {
var stripe = tableProps.stripe,
rowKey = tableProps.rowKey,
highlightHoverRow = tableProps.highlightHoverRow,
rowClassName = tableProps.rowClassName,
rowStyle = tableProps.rowStyle,
allColumnOverflow = tableProps.showOverflow,
editConfig = tableProps.editConfig,
treeConfig = tableProps.treeConfig;
var hasFixedColumn = tableReactData.hasFixedColumn,
treeExpandedMaps = tableReactData.treeExpandedMaps,
scrollYLoad = tableReactData.scrollYLoad,
rowExpandedMaps = tableReactData.rowExpandedMaps,
expandColumn = tableReactData.expandColumn,
selectRadioRow = tableReactData.selectRadioRow,
pendingRowMaps = tableReactData.pendingRowMaps,
pendingRowList = tableReactData.pendingRowList;
var fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData;
var checkboxOpts = computeCheckboxOpts.value;
var radioOpts = computeRadioOpts.value;
var treeOpts = computeTreeOpts.value;
var editOpts = computeEditOpts.value;
var rowOpts = computeRowOpts.value;
var transform = treeOpts.transform;
var childrenField = treeOpts.children || treeOpts.childrenField;
var rows = [];
tableData.forEach(function (row, $rowIndex) {
var trOn = {};
var rowIndex = $rowIndex;
// 确保任何情况下 rowIndex 都精准指向真实 data 索引
rowIndex = $xetable.getRowIndex(row);
// 事件绑定
if (rowOpts.isHover || highlightHoverRow) {
trOn.onMouseenter = function (evnt) {
if (isVMScrollProcess()) {
return;
}
$xetable.triggerHoverEvent(evnt, {
row: row,
rowIndex: rowIndex
});
};
trOn.onMouseleave = function () {
if (isVMScrollProcess()) {
return;
}
$xetable.clearHoverRow();
};
}
var rowid = (0, _util.getRowid)($xetable, row);
var rest = fullAllDataRowIdData[rowid];
var rowLevel = 0;
var seq = -1;
var _rowIndex = 0;
if (rest) {
rowLevel = rest.level;
seq = rest.seq;
_rowIndex = rest._index;
}
var params = {
$table: $xetable,
seq: seq,
rowid: rowid,
fixed: fixedType,
type: renderType,
level: rowLevel,
row: row,
rowIndex: rowIndex,
$rowIndex: $rowIndex,
_rowIndex: _rowIndex
};
// 行是否被展开
var isExpandRow = expandColumn && !!rowExpandedMaps[rowid];
// 树节点是否被展开
var isExpandTree = false;
var rowChildren = [];
// 处理新增状态
var isNewRow = false;
if (editConfig) {
isNewRow = $xetable.isInsertByRow(row);
}
if (treeConfig && !scrollYLoad && !transform) {
rowChildren = row[childrenField];
isExpandTree = rowChildren && rowChildren.length && !!treeExpandedMaps[rowid];
}
rows.push((0, _vue.h)('tr', __assign({
class: ['vxe-body--row', treeConfig ? "row--level-".concat(rowLevel) : '', {
'row--stripe': stripe && ($xetable.getVTRowIndex(row) + 1) % 2 === 0,
'is--new': isNewRow,
'is--expand-row': isExpandRow,
'is--expand-tree': isExpandTree,
'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
'row--radio': radioOpts.highlight && $xetable.eqRow(selectRadioRow, row),
'row--checked': checkboxOpts.highlight && $xetable.isCheckedByCheckboxRow(row),
'row--pending': pendingRowList.length && !!pendingRowMaps[rowid]
}, (0, _dom.getPropClass)(rowClassName, params)],
rowid: rowid,
style: rowStyle ? _xeUtils.default.isFunction(rowStyle) ? rowStyle(params) : rowStyle : null,
key: rowKey || rowOpts.useKey || treeConfig ? rowid : $rowIndex
}, trOn), tableColumn.map(function (column, $columnIndex) {
return renderColumn(seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
})));
// 如果行被展开了
if (isExpandRow) {
var expandOpts = computeExpandOpts.value;
var expandHeight = expandOpts.height;
var cellStyle = {};
if (expandHeight) {
cellStyle.height = "".concat(expandHeight, "px");
}
if (treeConfig) {
cellStyle.paddingLeft = "".concat(rowLevel * treeOpts.indent + 30, "px");
}
var showOverflow = expandColumn.showOverflow;
var hasEllipsis = _xeUtils.default.isUndefined(showOverflow) || _xeUtils.default.isNull(showOverflow) ? allColumnOverflow : showOverflow;
var expandParams = {
$table: $xetable,
seq: seq,
column: expandColumn,
fixed: fixedType,
type: renderType,
level: rowLevel,
row: row,
rowIndex: rowIndex,
$rowIndex: $rowIndex,
_rowIndex: _rowIndex
};
rows.push((0, _vue.h)('tr', __assign({
class: 'vxe-body--expanded-row',
key: "expand_".concat(rowid),
style: rowStyle ? _xeUtils.default.isFunction(rowStyle) ? rowStyle(expandParams) : rowStyle : null
}, trOn), [(0, _vue.h)('td', {
class: {
'vxe-body--expanded-column': 1,
'fixed--hidden': fixedType && !hasFixedColumn,
'col--ellipsis': hasEllipsis
},
colspan: tableColumn.length
}, [(0, _vue.h)('div', {
class: {
'vxe-body--expanded-cell': 1,
'is--ellipsis': expandHeight
},
style: cellStyle
}, [expandColumn.renderData(expandParams)])])]));
}
// 如果是树形表格
if (isExpandTree) {
rows.push.apply(rows, renderRows(fixedType, rowChildren, tableColumn));
}
});
return rows;
};
/**
* 同步滚动条
*/
var scrollProcessTimeout;
var syncBodyScroll = function (fixedType, scrollTop, elem1, elem2) {
if (elem1 || elem2) {
if (elem1) {
(0, _util.removeScrollListener)(elem1);
elem1.scrollTop = scrollTop;
}
if (elem2) {
(0, _util.removeScrollListener)(elem2);
elem2.scrollTop = scrollTop;
}
clearTimeout(scrollProcessTimeout);
scrollProcessTimeout = setTimeout(function () {
// const tableBody = refTableBody.value
// const leftBody = refTableLeftBody.value
// const rightBody = refTableRightBody.value
// const bodyElem = tableBody.$el as XEBodyScrollElement
// const leftElem = leftBody ? leftBody.$el as XEBodyScrollElement : null
// const rightElem = rightBody ? rightBody.$el as XEBodyScrollElement : null
(0, _util.restoreScrollListener)(elem1);
(0, _util.restoreScrollListener)(elem2);
// 检查滚动条是的同步
// let targetTop = bodyElem.scrollTop
// if (fixedType === 'left') {
// if (leftElem) {
// targetTop = leftElem.scrollTop
// }
// } else if (fixedType === 'right') {
// if (rightElem) {
// targetTop = rightElem.scrollTop
// }
// }
// setScrollTop(bodyElem, targetTop)
// setScrollTop(leftElem, targetTop)
// setScrollTop(rightElem, targetTop)
tableReactData.lastScrollTime = Date.now();
}, 300);
}
};
var scrollLoadingTime = null;
/**
* 滚动处理
* 如果存在列固定左侧，同步更新滚动状态
* 如果存在列固定右侧，同步更新滚动状态
*/
var scrollEvent = function (evnt) {
var fixedType = props.fixedType;
var highlightHoverRow = tableProps.highlightHoverRow;
var scrollXLoad = tableReactData.scrollXLoad,
scrollYLoad = tableReactData.scrollYLoad;
var elemStore = tableInternalData.elemStore,
lastScrollTop = tableInternalData.lastScrollTop,
lastScrollLeft = tableInternalData.lastScrollLeft;
var rowOpts = computeRowOpts.value;
var tableHeader = refTableHeader.value;
var tableBody = refTableBody.value;
var tableFooter = refTableFooter.value;
var leftBody = refTableLeftBody.value;
var rightBody = refTableRightBody.value;
var validTip = refValidTooltip.value;
var scrollBodyElem = refElem.value;
var headerElem = tableHeader ? tableHeader.$el : null;
var footerElem = tableFooter ? tableFooter.$el : null;
var bodyElem = tableBody.$el;
var leftElem = leftBody ? leftBody.$el : null;
var rightElem = rightBody ? rightBody.$el : null;
var bodyYRef = elemStore['main-body-ySpace'];
var bodyYElem = bodyYRef ? bodyYRef.value : null;
var bodyXRef = elemStore['main-body-xSpace'];
var bodyXElem = bodyXRef ? bodyXRef.value : null;
var bodyHeight = scrollYLoad && bodyYElem ? bodyYElem.clientHeight : bodyElem.clientHeight;
var bodyWidth = scrollXLoad && bodyXElem ? bodyXElem.clientWidth : bodyElem.clientWidth;
var scrollTop = scrollBodyElem.scrollTop;
var scrollLeft = bodyElem.scrollLeft;
var isRollX = scrollLeft !== lastScrollLeft;
var isRollY = scrollTop !== lastScrollTop;
tableInternalData.lastScrollTop = scrollTop;
tableInternalData.lastScrollLeft = scrollLeft;
tableReactData.lastScrollTime = Date.now();
if (rowOpts.isHover || highlightHoverRow) {
$xetable.clearHoverRow();
}
if (leftElem && fixedType === 'left') {
scrollTop = leftElem.scrollTop;
syncBodyScroll(fixedType, scrollTop, bodyElem, rightElem);
} else if (rightElem && fixedType === 'right') {
scrollTop = rightElem.scrollTop;
syncBodyScroll(fixedType, scrollTop, bodyElem, leftElem);
} else {
if (isRollX) {
if (headerElem) {
headerElem.scrollLeft = bodyElem.scrollLeft;
}
if (footerElem) {
footerElem.scrollLeft = bodyElem.scrollLeft;
}
}
if (leftElem || rightElem) {
$xetable.checkScrolling();
if (isRollY) {
syncBodyScroll(fixedType, scrollTop, leftElem, rightElem);
}
}
}
// let isLoadScroll = false
if (scrollXLoad && isRollX) {
// isLoadScroll = true
$xetable.triggerScrollXEvent(evnt);
}
if (scrollYLoad && isRollY) {
// isLoadScroll = true
$xetable.triggerScrollYEvent(evnt);
}
if (scrollLoadingTime !== null) {
clearTimeout(scrollLoadingTime);
}
// if (isLoadScroll) {
// tableReactData.scrollVMLoading = true
// scrollLoadingTime = setTimeout(() => {
// scrollLoadingTime = null
// tableReactData.scrollVMLoading = false
// }, 20)
// } else {
// tableReactData.scrollVMLoading = false
// }
if (isRollX && validTip && validTip.reactData.visible) {
validTip.updatePlacement();
}
$xetable.dispatchEvent('scroll', {
type: renderType,
fixed: fixedType,
scrollTop: scrollTop,
scrollLeft: scrollLeft,
scrollHeight: bodyElem.scrollHeight,
scrollWidth: bodyElem.scrollWidth,
bodyHeight: bodyHeight,
bodyWidth: bodyWidth,
isX: isRollX,
isY: isRollY
}, evnt);
};
var wheelTime;
var wheelYSize = 0;
var wheelYInterval = 0;
var wheelYTotal = 0;
var isPrevWheelTop = false;
var handleWheel = function (evnt, isTopWheel, deltaTop, isRollX, isRollY) {
var elemStore = tableInternalData.elemStore;
var scrollXLoad = tableReactData.scrollXLoad,
scrollYLoad = tableReactData.scrollYLoad;
var tableBody = refTableBody.value;
var leftBody = refTableLeftBody.value;
var rightBody = refTableRightBody.value;
var leftElem = leftBody ? leftBody.$el : null;
var rightElem = rightBody ? rightBody.$el : null;
var bodyElem = tableBody.$el;
var bodyYRef = elemStore['main-body-ySpace'];
var bodyYElem = bodyYRef ? bodyYRef.value : null;
var bodyXRef = elemStore['main-body-xSpace'];
var bodyXElem = bodyXRef ? bodyXRef.value : null;
var bodyHeight = scrollYLoad && bodyYElem ? bodyYElem.clientHeight : bodyElem.clientHeight;
var bodyWidth = scrollXLoad && bodyXElem ? bodyXElem.clientWidth : bodyElem.clientWidth;
var remainSize = isPrevWheelTop === isTopWheel ? Math.max(0, wheelYSize - wheelYTotal) : 0;
isPrevWheelTop = isTopWheel;
wheelYSize = Math.abs(isTopWheel ? deltaTop - remainSize : deltaTop + remainSize);
wheelYInterval = 0;
wheelYTotal = 0;
clearTimeout(wheelTime);
var handleSmooth = function () {
if (wheelYTotal < wheelYSize) {
var fixedType = props.fixedType;
wheelYInterval = Math.max(5, Math.floor(wheelYInterval * 1.5));
wheelYTotal = wheelYTotal + wheelYInterval;
if (wheelYTotal > wheelYSize) {
wheelYInterval = wheelYInterval - (wheelYTotal - wheelYSize);
}
var scrollTop = bodyElem.scrollTop,
clientHeight = bodyElem.clientHeight,
scrollHeight = bodyElem.scrollHeight;
var targerTop = scrollTop + wheelYInterval * (isTopWheel ? -1 : 1);
bodyElem.scrollTop = targerTop;
if (leftElem) {
leftElem.scrollTop = targerTop;
}
if (rightElem) {
rightElem.scrollTop = targerTop;
}
if (isTopWheel ? targerTop < scrollHeight - clientHeight : targerTop >= 0) {
wheelTime = setTimeout(handleSmooth, 10);
}
$xetable.dispatchEvent('scroll', {
type: renderType,
fixed: fixedType,
scrollTop: bodyElem.scrollTop,
scrollLeft: bodyElem.scrollLeft,
scrollHeight: bodyElem.scrollHeight,
scrollWidth: bodyElem.scrollWidth,
bodyHeight: bodyHeight,
bodyWidth: bodyWidth,
isX: isRollX,
isY: isRollY
}, evnt);
}
};
handleSmooth();
};
/**
* 滚轮处理
*/
var wheelEvent = function (evnt) {
var deltaY = evnt.deltaY,
deltaX = evnt.deltaX;
var highlightHoverRow = tableProps.highlightHoverRow;
var scrollYLoad = tableReactData.scrollYLoad;
var lastScrollTop = tableInternalData.lastScrollTop,
lastScrollLeft = tableInternalData.lastScrollLeft;
var rowOpts = computeRowOpts.value;
var tableBody = refTableBody.value;
var scrollBodyElem = refElem.value;
var bodyElem = tableBody.$el;
var deltaTop = deltaY;
var deltaLeft = deltaX;
var isTopWheel = deltaTop < 0;
// 如果滚动位置已经是顶部或底部，则不需要触发
if (isTopWheel ? scrollBodyElem.scrollTop <= 0 : scrollBodyElem.scrollTop >= scrollBodyElem.scrollHeight - scrollBodyElem.clientHeight) {
return;
}
var scrollTop = scrollBodyElem.scrollTop + deltaTop;
var scrollLeft = bodyElem.scrollLeft + deltaLeft;
var isRollX = scrollLeft !== lastScrollLeft;
var isRollY = scrollTop !== lastScrollTop;
// 用于鼠标纵向滚轮处理
if (isRollY) {
evnt.preventDefault();
tableInternalData.lastScrollTop = scrollTop;
tableInternalData.lastScrollLeft = scrollLeft;
tableReactData.lastScrollTime = Date.now();
if (rowOpts.isHover || highlightHoverRow) {
$xetable.clearHoverRow();
}
handleWheel(evnt, isTopWheel, deltaTop, isRollX, isRollY);
if (scrollYLoad) {
$xetable.triggerScrollYEvent(evnt);
}
}
};
(0, _vue.onMounted)(function () {
(0, _vue.nextTick)(function () {
var fixedType = props.fixedType;
var elemStore = tableInternalData.elemStore;
var prefix = "".concat(fixedType || 'main', "-body-");
var el = refElem.value;
elemStore["".concat(prefix, "wrapper")] = refElem;
elemStore["".concat(prefix, "table")] = refBodyTable;
elemStore["".concat(prefix, "colgroup")] = refBodyColgroup;
elemStore["".concat(prefix, "list")] = refBodyTBody;
elemStore["".concat(prefix, "xSpace")] = refBodyXSpace;
elemStore["".concat(prefix, "ySpace")] = refBodyYSpace;
elemStore["".concat(prefix, "emptyBlock")] = refBodyEmptyBlock;
if (el) {
el.onscroll = scrollEvent;
el._onscroll = scrollEvent;
}
});
});
(0, _vue.onBeforeUnmount)(function () {
var el = refElem.value;
clearTimeout(wheelTime);
if (el) {
el._onscroll = null;
el.onscroll = null;
}
});
(0, _vue.onUnmounted)(function () {
var fixedType = props.fixedType;
var elemStore = tableInternalData.elemStore;
var prefix = "".concat(fixedType || 'main', "-body-");
elemStore["".concat(prefix, "wrapper")] = null;
elemStore["".concat(prefix, "table")] = null;
elemStore["".concat(prefix, "colgroup")] = null;
elemStore["".concat(prefix, "list")] = null;
elemStore["".concat(prefix, "xSpace")] = null;
elemStore["".concat(prefix, "ySpace")] = null;
elemStore["".concat(prefix, "emptyBlock")] = null;
});
var renderVN = function () {
var fixedColumn = props.fixedColumn,
fixedType = props.fixedType,
tableColumn = props.tableColumn;
var keyboardConfig = tableProps.keyboardConfig,
allColumnOverflow = tableProps.showOverflow,
spanMethod = tableProps.spanMethod,
mouseConfig = tableProps.mouseConfig;
var tableData = tableReactData.tableData,
mergeList = tableReactData.mergeList,
scrollYLoad = tableReactData.scrollYLoad,
isAllOverflow = tableReactData.isAllOverflow;
var visibleColumn = tableInternalData.visibleColumn;
var slots = tableContext.slots;
var sYOpts = computeSYOpts.value;
var emptyOpts = computeEmptyOpts.value;
var keyboardOpts = computeKeyboardOpts.value;
var mouseOpts = computeMouseOpts.value;
// const isMergeLeftFixedExceeded = computeIsMergeLeftFixedExceeded.value
// const isMergeRightFixedExceeded = computeIsMergeRightFixedExceeded.value
// 如果是使用优化模式
if (fixedType) {
// 如果存在展开行使用全量渲染
if (!tableReactData.expandColumn && (scrollYLoad || (allColumnOverflow ? isAllOverflow : allColumnOverflow))) {
if (!mergeList.length && !spanMethod && !(keyboardConfig && keyboardOpts.isMerge)) {
tableColumn = fixedColumn;
} else {
tableColumn = visibleColumn;
// 检查固定列是否被合并，合并范围是否超出固定列
// if (mergeList.length && !isMergeLeftFixedExceeded && fixedType === 'left') {
// tableColumn = fixedColumn
// } else if (mergeList.length && !isMergeRightFixedExceeded && fixedType === 'right') {
// tableColumn = fixedColumn
// } else {
// tableColumn = visibleColumn
// }
}
} else {
tableColumn = visibleColumn;
}
}
var emptyContent;
var emptySlot = slots ? slots.empty : null;
if (emptySlot) {
emptyContent = $xetable.callSlot(emptySlot, {
$table: $xetable,
$grid: $xetable.xegrid
});
} else {
var compConf = emptyOpts.name ? _vXETable.VXETable.renderer.get(emptyOpts.name) : null;
var renderEmpty = compConf ? compConf.renderEmpty : null;
if (renderEmpty) {
emptyContent = (0, _vn.getSlotVNs)(renderEmpty(emptyOpts, {
$table: $xetable
}));
} else {
emptyContent = tableProps.emptyText || _conf.default.i18n('vxe.table.emptyText');
}
}
return (0, _vue.h)('div', __assign({
ref: refElem,
class: ['vxe-table--body-wrapper', fixedType ? "fixed-".concat(fixedType, "--wrapper") : 'body--wrapper'],
xid: xID
}, sYOpts.mode === 'wheel' ? {
onWheel: wheelEvent
} : {}), [fixedType ? (0, _vue.createCommentVNode)() : (0, _vue.h)('div', {
ref: refBodyXSpace,
class: 'vxe-body--x-space'
}), (0, _vue.h)('div', {
ref: refBodyYSpace,
class: 'vxe-body--y-space'
}), (0, _vue.h)('table', {
ref: refBodyTable,
class: 'vxe-table--body',
xid: xID,
cellspacing: 0,
cellpadding: 0,
border: 0
}, [
/**
* 列宽
*/
(0, _vue.h)('colgroup', {
ref: refBodyColgroup
}, tableColumn.map(function (column, $columnIndex) {
return (0, _vue.h)('col', {
name: column.id,
key: $columnIndex
});
})),
/**
* 内容
*/
(0, _vue.h)('tbody', {
ref: refBodyTBody
}, renderRows(fixedType, tableData, tableColumn))]), (0, _vue.h)('div', {
class: 'vxe-table--checkbox-range'
}), mouseConfig && mouseOpts.area ? (0, _vue.h)('div', {
class: 'vxe-table--cell-area'
}, [(0, _vue.h)('span', {
class: 'vxe-table--cell-main-area'
}, mouseOpts.extension ? [(0, _vue.h)('span', {
class: 'vxe-table--cell-main-area-btn',
onMousedown: function (evnt) {
$xetable.triggerCellExtendMousedownEvent(evnt, {
$table: $xetable,
fixed: fixedType,
type: renderType
});
}
})] : []), (0, _vue.h)('span', {
class: 'vxe-table--cell-copy-area'
}), (0, _vue.h)('span', {
class: 'vxe-table--cell-extend-area'
}), (0, _vue.h)('span', {
class: 'vxe-table--cell-multi-area'
}), (0, _vue.h)('span', {
class: 'vxe-table--cell-active-area'
})]) : null, !fixedType ? (0, _vue.h)('div', {
class: 'vxe-table--empty-block',
ref: refBodyEmptyBlock
}, [(0, _vue.h)('div', {
class: 'vxe-table--empty-content'
}, emptyContent)]) : null]);
};
return renderVN;
}
});
exports.default = _default;